vue-voice-recording
v1.0.4TypeScript
Microphone recorder for Vue
vuevuejsvue3typescriptmp3 recorderaudio recordervue audio recordervue microphone recordervue voice recorder
0/weekUpdated 3 years agoMITUnpacked: 958.3 KB
Published by emrebaskan
npm install vue-voice-recording
vue-voice-recording
Features
- Audio recording visualization.
- Start, stop, pause and resume audio recording.
- Fully customizable and configurable.
- Fully documented.
Dependencies
| vue-voice-recording | Vue | lamejstmp |
|---------------------|--------|-----------|
| 1.0.0 | => 3.x | ^1.0.1 |
Install
``
bash
npm install vue-voice-recorder --save
`
Setup
Option 1: Import the component and register globally
`ts
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
`ts
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:
`html
>
`
With all options:
`html
@afterStopRecording="afterStop"
@afterPauseRecording="afterPause"
@afterResumeRecording="afterResume"
@getAsMp3="saveAsMp3"
:showVisualization="true"
visualizationType="SineWave"
:visualizationOptions="{
width: 300,
height: 150,
strokeColor: '#212121',
backgroundColor: 'white',
}"
>
`
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 |
##### Visualization options
`typescript
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
`html
isRecording,
isPaused,
recordingTime,
recordingState,
toggleStartAndStop,
togglePauseAndResume,
startRecording,
resumeRecording
}"
>
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"
>
{{ recordingTime }}
{{ recordingState }}
``