vue-dictaphone

    2.0.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i vue-dictaphone

    DownloadsWeekly Downloads

    89

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    2.25 MB

    Total Files

    24

    Last publish

    Collaborators

    • lorti