🎙️ Vue.js dictaphone component to record audio from the user

• HTML/CSS is fully customizable via Scoped Slots
• Spectrum analyser for visualising frequencies (Optional)
• stop event returns an $event object containing
  • the audio blob ($event.blob) for further processing
  • and a data URL ($event.src) for immediate output to the user
• Components emit an error event, when the browser does not support audio recording or the user has blocked microphone access.

npm install --save vue-dictaphone

yarn add vue-dictaphone

import VueDictaphone from "vue-dictaphone";
Vue.use(VueDictaphone);

<vue-dictaphone @stop="handleRecording($event)">
  <template slot-scope="{ isRecording, startRecording, stopRecording, deleteRecording }">
    <button v-if="!isRecording" @click="startRecording">Start recording</button>
    <button v-else @click="stopRecording">Stop recording</button>
  </template>
</vue-dictaphone>

<vue-dictaphone-spectrum-analyser/>

<template v-if="audioSource">
  <audio :src="audioSource" controls></audio>
</template>

new Vue({
  // ... 
  data: {
    audioSource: null
  },
  methods: {
    handleRecording({ blob, src }) {
      this.audioSource = src;
    }
  }
  // ... 
});

Manuel Wieser
https://manu.ninja/
https://twitter.com/manuelwieser
https://www.paypal.me/manuninja