A simple audio recorder for VueJS applications
Switch branches/tags
Nothing to show
Clone or download



Audio recorder for Vue.js. It allows to create, play, download and store records on a server.

Live demo


  • Beautiful clean UI
  • Download/upload/play record
  • Time limit
  • Records limit
  • A lot of callbacks
  • Individual an audio player

Tested in (desktop)

  • Chrome
  • Firefox
  • Safari


npm i vue-audio-recorder --save

AudioRecorder props

Prop Type Description
attempts Number Number of recording attempts
compact Boolean Hide the download and upload buttons
headers Object HTTP headers
time Number Time limit for the record (minutes)
upload-url String URL for uploading
start-record Function Fires after click the record button
stop-record Function Fires after click the stop button or exceeding the time limit
start-upload Function Fires after start uploading
attempts-limit Function Fires after exceeding the attempts
failed-upload Function Fires after a failure uploading
mic-failed Function Fires if your microphone doesn't work
successful-upload Function Fires after a successful uploading
successful-upload-msg String Displays the message after a successful uploading
failed-upload-msg String Displays the message after a failure uploading

AudioPlayer props

Prop Type Description
src String Specifies the URL of the audio file


    import AudioRecorder from 'vue-audio-recorder'

  <audio-player src="/demo/example.mp3"/>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build


Gennady Grishkovtsov - Developer

Olga Zimina - UIX Designer