grishkovelli/vue-audio-recorder

A simple audio recorder for VueJS applications

vue-audio-recorder

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

Live demo

Features

• 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

Installation

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

Usage

    import AudioRecorder from 'vue-audio-recorder'

    Vue.use(AudioRecorder)

    methods: {
      callback (data) {
        console.debug(data)
      }
    }

  <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 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

TODO

• Clear record list
• Responsive design

Authors

Gennady Grishkovtsov - Developer

Olga Zimina - UIX Designer

vue-audio-recorder's Issues

Recorder invisible

Hi,
I've loaded Vue into a wordpress plugin, but can't see any recorder appearing, although no error, and recorder loaded as described in your example.

Vue.prototype.$http = axios

Vue.use(VueAudioRecorder);

var vm = new Vue({
  el: document.querySelector('#mount'),
  components: {VueAudioRecorder},
  methods: {
    callback (msg) {
      console.debug('Event: ', msg)
    }
  }
})

Can you please advise why the recorder is not showing up ?
Please locate #mount in this page
Thank you very much

Record volume to low

Hey,
The record volume to low.
Is there a build in solution to set the volume as hight by default?

Audio messed up when recorded using a bluetooth earpiece as input

The code works well when using the default laptop microphone with 44100 sampling rate. However, the same done with a bluetooth earpiece is completely messed up and cannot be used.

Is there something I can do to get this working or is it a major fix?

Error Post Of Undefined

Hi,

I am getting error as :

Uncaught TypeError: Cannot read property 'post' of undefined

Below is the code:

<audio-recorder
                upload-url="/api/upload/audio"
                :attempts="1"
                :headers="headers"
                :time="1"
                :start-record="callback"
                :stop-record="callback"
                :start-upload="mystartfunction"
                :successful-upload="mysuccessfunction"
                :failed-upload="myfailfunction"/>

Please suggest

Record in Wave Format

Hi,

As per the ToDo's in the README, you still need to have Wave conversion. Can you tell me what needs to be done on this, I can try and take a look, it's a feature I need.

Kind Regards,
Fox

Responsive design

Hello,

Is it possible to make the design responsive?

https://imgur.com/a/jV5htWM

Thanks.

手机端如何使用

如题，电脑端可以，用手机访问不行，是否有解决的办法

Question : get the audio raw buffer for processing

I want to use audio recording together with speech to text apis, is it possible to get the raw audio buffer recorded to pass it to an external api directly without using the upload-url ?

Make uploading a callback function

With the addition of wav the uploading component is now incorrect with .mp3 for the filename.
It'd bring much more flexibility to make uploading just a callback function or similar to allow support for like direct to s3 uploading etc.

Tests

Hello,
Do you have any plans to add tests?
Thanks.

successful-upload gets called multiple times

Great work on this project!

One issue I've run into is that the successful-upload method gets called multiple times when I upload more than once. I can see this because in my callback I'm showing a message using $noty, and the noty will appear one more time than the previous upload for each upload.

Any suggestions would be appreciated.

Any way to use with custom HTTP client?

I like to use a custom Axios instance with appropriate Auth headers, etc. It would be nice to use that (via callback, etc) rather than have to provide a url.

remove the recorded file after uploading is successful

hi !

i'm uploading the recorded file manually with :after-recording event, but I want to delete it after the uploading is successfull.

how can i do that ?

Cannot read property 'getTracks' of undefined

Audio file size

Thanks for creating this package, looks great!

I noticed the file sizes of the recorded audio is quite large. Is it possible to compress the WAV files on the fly or somehow reduce the recorded file size?

Live demo does not work

https://jsfiddle.net/grishkovelli/rb1anxyj/ does not work on Chrome, Firefox and Safari 11.1.2 (13605.3.8), on mac.

On chrome: "35:15 Uncaught TypeError: console.debug is not a function" in the status.

Recording using the bluetooth earpiece is very messy compared to the one with the default laptop microphone

The code works well when using the default laptop microphone with 44100 sampling rate. However, the same done with a bluetooth earpiece is completely messed up and cannot be used.

Is there something I can do to get this working or is it a major fix?

Got Uncaught (in promise) DOMException

First I want to thank you for your great work. I got an error when I try to set the same callback function like the demo then I found there's the same error in the live demo. The error message is as follow:
Live Demo:

My project:

Upload to server doesn't work

There is an issue with upload, "this.record" doesn't exist in uploader.vue component.

Upload Multiple Recorded Files

I want to upload multiple files which i have recorded at once not one by one ?

Push to NPM

There hasn't been an npm publish since December 2018. There have been a number of fixes/tweaks since then that would be great to get incorporated :)

format prop is described on README but it's not published

as you can see, "format" prop to tell component to generate other format (like wav) is documented on this project's README but it's not published (until this last version - 3.0.1).
I guess should publish new version with this feature or remove it from README 🙏

Recorded volume is far too low

Recordings are extremely low volume.

Is there any way to adjust the gain?

How to save data to user's device?

I just wanted a library easy to use and now I love this library.
But can anyone tell me how to save recorded files to user's device.
Maybe computer, phone or other thing. It should create a folder named something I gave.
And then save all the things in that folder. And read everything from that folder.
For windows maybe in documents folder on mobile in the storage and on the others pcs too.

Version 3.0.1 sounds slow motion

There's a really weird bug that slows down the recordings by a lot. Using anything bellow 3.0.1 fixes the issue, so it must be something pushed recently. I can provide more info if needed.

Some doubts

It's that possible to use props to doesn't show the audio player?
How can I clear the record list after successful upload?
Another point, it's possible to get the actual value of the player on a pause-recording event, just like after-recording do?
Tks

strange low frequency sound when recording mp3 with sampleRate=16000

Just got strange low frequency sound when recording mp3 with sampleRate=16000, while sound recorded with 44100 sample rate is normal.

bug：change samplerate the player time error

Upload recorded file by myself

Hi there!

Is there a way to upload recorded file by myself calling axios and appending recorded file?

Prevent changes if not microphone access allowed

Hi, your component is amazing, but when user does not grant access to microphone, the record button keep in recording state, it should go back to initial state until user allows it, this issue is related to #20 too, because it will start waiting for tracks.

Thanks.

permission

Safari on iphone does not respond to clicking the recording, does it need to get permission

When pausing and starting again, the final track is only the last one.

When pausing the recording and then resuming, the final uploaded track is just the last one.

Excellent plugin! How run in mobile?

Is it possible to work on the mobile?

Removing recordings before uploading.

Perhaps I've missed something, but it would be nice to be able to remove a recording in the list before uploading without having to close the dialog and restart. For example, if I have 3 recordings, and I botch the 4th recording, I don't want to have to start over, or upload all 4 with the bad one, before recording a 5th. 🤔

_onChangeVolume

while val==0 something error maybe happen
_onChangeVolume (val) {
if (val) {
this.player.volume = val
}
}

select first voice by defult

hi thanks for awesome package
how i can select first voice after stop recording?

undefined $on property

Hello! The library works well, thanks!
But I got an error message saying,

Error in mounted hook: "TypeError: Cannot read property '$on' of undefined"

I think the error occurred because this.$eventBus in recorder's mounted hook is undefined.
Do you know how to fix it? Thanks!

Wavesurfer.js integration

Hey thank you for this amazing component really like the design and simplicity of it.
I would like to be able to listen to the audio Context so that i can attach a Wavesurfer.js to get some visiualization of the audio being recorded or selected.
is there any possible way that can be easily done?
thanks.

How to achieve the same result as demo

Hi, the demo looks great. with the audio player within the same box of the recorder. It also allows you to play the file when you click the recording. Is it possible to upload the source code or have a better documentation?

Is it possible to make the header 'content-type' optional?

Hi,

Great module, thanks a lot!

I have a feature request: is it possible to make headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary} optional.

The API I use doesn't accept that, I configed 'Content-Type': 'application/octet-stream', but I see uploader.vue adds the above header hard coded.

-- Thanks in advance, Joris

Please show how to create the URL for upload

I am trying to upload recorded file using

<audio-recorder v-if="showRecorder"
      upload-url="some url"

with some url being linked to a php callback like :

admin_url( 'admin-ajax.php' )."?action=my_action

The callback is called on server side, and audio file can be retrieve.

Nevertheless, how to add more data in upload URL call ?

https://github.com/grishkovelli/vue-audio-recorder/blob/master/src/components/uploader.vue

When pausing and starting again, the final track is only the last clip

I see this was supposed to be addressed in #17 but I've just installed the npm package, but I am still running into this problem. The jsfiddle provided in the demo also seems to have this issue: https://jsfiddle.net/grishkovelli/rb1anxyj/.

I get an error thrown here: https://github.com/grishkovelli/vue-audio-recorder/blob/master/src/lib/recorder.js#L52

Won't render in Quasar

I tried testing this in Quasar and get the following error:
vue.runtime.esm.js?5593:619 [Vue warn]: Failed to mount component: template or render function not defined.

Imported correctly, registered component, added header to data, and add stub method for callbacks

Change Key Name

Hello,

thanks for this amazing plugin.
I want to change the 'audio' key name with a custom one, for example, 'file'.

I could not find any prop for it, is there any possibilities to do it?

Lost early recording when pause & start

The early recording stream lost when recording is a pause and start it again.

Add upload button under the player

Can you add a save or upload button under the player for better UX instead of clicking on the recording and save using that small save button?

UX Logic

To make this awesome package even more usefull... would be possible to make it a single audio recorder like a whatsapp audio recorder for example... release to send

Property or method "headers" is not defined on the instance but referenced during render.

Can you help me ?
<audio-recorder v-if="showRecorder"
upload-url=""
filename="ninja"
format="mp3"
:attempts="1"
:headers="headers"
:after-recording="afterRecording"
:bit-rate="192"/>

Events doesn't work

Hello, the widget is looking ace, thanks!

However, my passed functions to event props are not working.

Even on demo here https://jsfiddle.net/L8v5yqc6/

Chrome on macOS.

wav recording in not avaiable with npm latest version

Check #14

Wav support has been added but not available with npm current version, what version does implement this ?