๐๏ธ 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
- the audio blob (
- 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