🎙️ Vue.js dictaphone component to record audio from the user
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Setup May 11, 2018
src
test/unit Replace waveform visualization with frequency visualization May 17, 2018
.babelrc Add Jest configuration May 13, 2018
.editorconfig Setup May 11, 2018
.eslintignore Setup May 11, 2018
.eslintrc.js
.gitignore
LICENSE
README.md Add a MIME type prop to the dictaphone component Jul 2, 2018
dictaphone.gif
index.html
package-lock.json Add Jest configuration May 13, 2018
package.json Add a MIME type prop to the dictaphone component Jul 2, 2018

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)">
  <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;
    }
  }
  // ... 
});

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