Skip to content
A simple audio recorder for VueJS applications
Branch: master
Clone or download
Latest commit 94fc582 May 2, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Add WAV support May 2, 2019
dist fix final recording broken by pause button Feb 22, 2019
src Add WAV support May 2, 2019
.babelrc Add existing code Jul 26, 2018
.editorconfig Add existing code Jul 26, 2018
.gitignore Remove package-lock.json Aug 5, 2018
LICENSE Initial commit Jul 3, 2018 Add WAV support May 2, 2019
package.json Update version to 3.0.1 Dec 18, 2018
screenshot.png Update version to 3.0.0 Dec 16, 2018
webpack.config.js Update package.json & webpack Oct 5, 2018 Add devtool Dec 18, 2018


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
  • MP3/WAV support

Tested in (desktop)

  • Chrome
  • Firefox
  • Safari


npm i vue-audio-recorder --save

AudioRecorder props

Prop Type Description
attempts Number Number of recording attempts
headers Object HTTP headers
time Number Time limit for the record (minutes)
bit-rate Number Default: 128 (only for MP3)
sample-rate Number Default: 44100
filename String Download/Upload filename
format String WAV/MP3. Default: mp3
upload-url String URL for uploading
show-download-button Boolean If it is true show a download button. Default: true
show-upload-button Boolean If it is true show an upload button. Default: true
before-upload Function Callback fires before uploading
successful-upload Function Callback fires after successful uploading
failed-upload Function Callback fires after failure uploading
mic-failed Function Callback fires if your microphone doesn't work
before-recording Function Callback fires after click the record button
pause-recording Function Callback fires after pause recording
after-recording Function Callback fires after click the stop button or exceeding the time limit
select-record Function Callback fires after choise a record. Returns the record

AudioPlayer props

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


    import AudioRecorder from 'vue-audio-recorder'

    methods: {
      callback (data) {
  <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


  • Clear record list
  • Responsive design


Gennady Grishkovtsov - Developer

Olga Zimina - UIX Designer

You can’t perform that action at this time.