diavisoo / vue-voice-recording

Microphone recorder for Vue3

vue-voice-recording

Features

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

Changes

1.1.0

• Removed the deprecated ScriptProcessorNode and replaced it with AudioWorklet
• Added option to press-and-hold to record
• Added delay after stop record has been called (since I noticed myself very easily letting go of the rec button too soon)

Dependencies

vue-voice-recording	Vue	lamejstmp
1.1.0	=> 3.x	inline
1.0.0	=> 3.x	^1.0.1

Install

npm install https://github.com/DiAvisoo/vue-voice-recording

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',
    }"
  :recordingStopDelay="500"
  :pressAndHoldToRecord="false"

></VueVoiceRecording>

Props

Option	Type	Default	Description
showVisualization	number	true	Whether to show the visualization
visualizationType	SineWave, FrequencyBars, FrequencyCircles	SineWave	Audio Recording visualization type
visualizationOptions	object	see below	Audio Recording visualization options
recordingStopDelay	number	500	Milliseconds to keep recording after
			stop has been called
pressAndHoldToRecord	boolean	false	Keep recording while pressing rec

Visualization options

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

Events

Event	Value	Description
afterStartRecording	void	After microphone start recording
afterStopRecording	Blob	After microphone stop recording with recorded audio
afterPauseRecording	void	When microphone pauses recording
afterResumeRecording	void	When microphone resumes recording
getAsMp3	{ data: Blob, url: string}	Get recorded audio as encoded to MP3

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" @mousedown="handleMouseDown" @mouseup="delayedStopRecording" @click="handleClick">
                <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>