Vue audio recorder: Audio Recorder and Player Vue.js Component
Vue-audio-recorder is an audio recorder component for Vue.js. It allows to create, play, download and store records on a server.
Features
- Beautiful clean UI
- Download/upload/play record
- Time limit
- Records limit
- Individuals as an audio player
- MP3/WAV support
Supported
- Chrome
- Firefox
- Safari
Getting Started
Installation
//npm
npm i vue-audio-recorder --save
Usage
Import globally
//~main.js
import AudioRecorder from 'vue-audio-recorder'
Vue.use(AudioRecorder)
Import component in vue file
Audio Recorder
<audio-recorder
upload-url="YOUR_API_URL"
:attempts="3"
:time="2"
:headers="headers"
:before-recording="callback"
:pause-recording="callback"
:after-recording="callback"
:select-record="callback"
:before-upload="callback"
:successful-upload="callback"
:failed-upload="callback"/>
Audio Player
<audio-player src="/demo/example.mp3"/>
Audio Recorder Props
attempts
Type: Number
Description: Number of recording attempts
headers
Type: Object
Description: HTTP headers
Time
Type: Number
Description: Time limit for the record (minutes)
bit-rate
Type: Number
Description: Default: 128 (only for MP3)
sample-rate
Type: Number
Description: Default: 44100
filename
Type: String
Description: Download/Upload filename
upload-url
Type: String
Description: URL for uploading
show-download-button
Type: Boolean
Description: If it is true show a download button. Default: true
show-upload-button
Type: Boolean
Description: If it is true show an upload button. Default: true
before-upload
Type: Function
Description: Callback fires before uploading
successful-upload
Type: Function
Description: Callback fires after successful uploading
failed-upload
Type: Function
Description: Callback fires after failure uploading
mic-failed
Type: Function
Description: Callback fires if your microphone doesn't work
before-recording
Type: Function
Description: Callback fires after click the record button
pause-recording
Type: Function
Description: Callback fires after click the pause button
after-recording
Type: Function
Description: Callback fires after click the stop button or exceeding the time limit
select-record
Type: Function
Description: Callback fires after choise a record. Returns the record
Audio Player Props
src
Type: String
Description: Specifies the URL of the audio file
Built by
Gennady Grishkovtsov - Developer
Olga Zimina - UIX Designer