A styleless audio recorder button as a vue component

npm i @loquiry/vue-record-audio or yarn add @loquiry/vue-record-audio

<template>
  <VueRecord class="record" @result="onResult">
    Record
    <template slot="isInitiating">
      Grant microphone permissions
    </template>
    <template slot="isRecording">
      Stop
    </template>
    <template slot="isCreating">
      Creating Sound...
    </template>
  </VueRecord>
</template>

<script>
import VueRecord from "@loquiry/vue-record-audio";

export default {
  components: { VueRecord },
  methods: {
    onResult(data) {
      console.log("record button data:", data.blob);
      console.log("Sound in ms:", data.duration);
    }
  }
};
</script>

<style>
.record.active {
  background: red;
}
</style>

The result is an object containing the blob and the duration of the recording in ms

result = {
  blob: blob,
  duration: 1515.9850000000006,
  type: "audio/wav"
};

• result: fired after recording | returns the Result Object
• initiated: fired when permissions are successfully granted | returns nothing
• error: fired when an error happens and | returns the error message

As stated in Usage The component has three slots that will be switched if the button is initiated/recording

• .active when the button is recording
• .needsInitiation when the button has never been pressed
• .creating when the record stopped and the result is being created

• options: pass an options object as prop options

  default:

  { sampleRate: 44100, bufferSize: 16384 }
  

• isAlreadyInitiated: immediatly initiation the recorder (helpful when you know a user has already given permissions to use the microphone)

  default: false

• disabled: html button disabled

yarn install

yarn run serve

This is only working thanks to

• recorder-js