Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

vue-dictaphone

Donate

πŸŽ™οΈ Vue.js dictaphone component to record audio from the user


Features

  • 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.

Installation

npm install --save vue-dictaphone
yarn add vue-dictaphone

Usage

import VueDictaphone from "vue-dictaphone";
Vue.use(VueDictaphone);
<vue-dictaphone @stop="handleRecording($event)" 
                v-slot="{ isRecording, startRecording, stopRecording, deleteRecording }">
    <button v-if="!isRecording" @click="startRecording">Start recording</button>
    <button v-else @click="stopRecording">Stop recording</button>
</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;
    }
  }
  // ... 
});

File types

You can pass an optional mime-type prop on the vue-dictaphone element to change the MIME type of the recorded audio.

<vue-dictaphone @stop="handleRecording($event)" mime-type="audio/mp3">
  <!-- ... -->
</vue-dictaphone>

For a list of MIME types supported by major browsers take a look a Media formats for HTML audio and video on MDN.

Author

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

About

πŸŽ™οΈ Vue.js dictaphone component to record audio from the user

Topics

Resources

License

Releases

No releases published

Packages

No packages published