Vue dictaphone

Vue.js dictaphone component to record audio from the user

Version: 2.0.0 Updated: 04/16/2020

By: Lorti License: MIT

Downloads Last 30 Days: 170

Install

npm i vue-dictaphone
yarn add vue-dictaphone

Repository: https://github.com/Lorti/vue-dictaphone

CDNs

bundle.run: https://bundle.run/vue-dictaphone

jsDelivr: https://cdn.jsdelivr.net/npm/vue-dictaphone

unpkg: https://unpkg.com/vue-dictaphone

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

Categories: Vue js
Tags: