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