vue-voice-recording

Features

• Audio recording visualization.
• Start, stop, pause and resume audio recording.
• Fully customizable and configurable.
• Fully documented.

Dependencies

Install

npm install vue-voice-recorder --save

Setup

Option 1: Import the component and register globally

import { VueVoiceRecording } from 'vue-voice-recording';
import 'vue-voice-recording/dist/style.css'; // import it if you want to use the default template.

Option 2: Import the hook and use with your own template and styling

import { useRecorder } from 'vue-voice-recording';

const {
    isRecording,
    recordingTime,
    isPaused,
    recordingState,
    toggleStartAndStop,
    togglePauseAndResume,
    startRecording,
    stopRecording,
    pauseRecording,
    resumeRecording
} = useRecorder({
    afterStartRecording: () => console.log('After microphone starts recording'),
    afterStopRecording: (blob) => console.log('After microphone stops recording'),
    afterPauseRecording: () => console.log('After microphone pauses recording'),
    afterResumeRecording: () => console.log('After microphone resumes recording'),
    getAsMp3: ({data, url}) => console.log('After microphone stops recording and audio encoded to mp3'),
});

Use

Basic usage:

<VueVoiceRecording
  @getAsMp3="saveAsMp3"
></VueVoiceRecording>

With all options:

<VueVoiceRecording
  @afterStartRecording="afterStart"
  @afterStopRecording="afterStop"
  @afterPauseRecording="afterPause"
  @afterResumeRecording="afterResume"
  @getAsMp3="saveAsMp3"
  :showVisualization="true"
  visualizationType="SineWave"
  :visualizationOptions="{
        width: 300,
        height: 150,
        strokeColor: '#212121',
        backgroundColor: 'white',
    }"
></VueVoiceRecording>

Props

Visualization options

const defaultVisualizationOptions = {
  width: 300,
  height: 150,
  strokeColor: '#212121',
  backgroundColor: 'white',
}

Events

Slots

<VueVoiceRecording
        v-slot="{
           isRecording,
           isPaused,
           recordingTime,
           recordingState,
           toggleStartAndStop,
           togglePauseAndResume,
           startRecording,
           resumeRecording
        }"
>
    <div class="vue-voice-recorder">
        <div class="vue-voice-recorder__container">
            <div class="vue-voice-recorder__start-and-stop" @click="toggleStartAndStop">
                <div class="vue-voice-recorder__state">
                    <span v-if="isRecording" class="vue-voice-recorder__stop"></span>
                    <svg v-if="!isRecording" class="vue-voice-recorder__start"
                         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                         aria-hidden="true"
                         preserveAspectRatio="xMidYMid meet"
                         viewBox="0 0 24 24"
                    >
                        <path fill="currentColor"
                              d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14Zm-1 7v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.537Q9.925 16 12 16t3.538-1.463Q17 13.075 17 11h2q0 2.625-1.7 4.6q-1.7 1.975-4.3 2.325V21Z"></path>
                    </svg>
                </div>
            </div>
            <template v-if="isRecording">
                <div class="vue-voice-recorder__recording-time">
                    {{ recordingTime }}
                </div>
                <div class="vue-voice-recorder__pause-and-resume" @click="togglePauseAndResume">
                    <span :class="[!isPaused && 'vue-voice-recorder--blink']"></span>
                    <p>{{ recordingState }}</p>
                </div>
            </template>
        </div>
        <canvas v-if="props.showVisualization" :class="[!isRecording && 'visualization--hidden']" ref="canvas"></canvas>
    </div>
</VueVoiceRecording>