We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

puf • 8 years ago

hello there!
First of all, thx a lot for this code! It works fine :) but I would like to know how to upload the "blob" on server side ? I'm a bit confused, should I use a post method ? I heard about node-formidable for node.js, but I also read some stuff concerning binary.js or some way to stream the data to the server but it's a bit obscure for me right now. For you what would be the best way to do that ?
It might be a dumb question but i'm quite new with web developping and particulary node.js
thx in advance!!

Thibault Imbert • 7 years ago

10 months later, I just posted a solution for this: http://typedarray.org/from-...

Sorry for the crazy delay obviously :)

Anshu • 8 years ago

how to get audio recorded file in our file system????

djazz • 8 years ago

Yay! It finally works! I have tried this several times but I have never got it to work (I'm using Ubuntu).
Have a colorful demo! http://djazz.mine.nu/apps/v...

It let's you see the audio with a spectrum. It mutes your speakers to prevent loopback, but you can use the volume slider to listen to the mic input (use headphones!).
- djazz

Harish Dubey • 8 years ago

How can I reduce the file size? A 16 sec file is over an mb. I tried to reduce the sampling rate and drop one channel data but then the playbacks at slower speed. Any suggestions?

RelativeCausality • 7 years ago

I know your comment was posted over a year ago, but I wanted to leave this explanation in case someone else stumbles across this like I did via a Google search. Hopefully I can save someone else from having to stay up all night to figure this this out.

With the way the demo code is written, the slow playback speed you’re encountering is expected behavior. The reason for this is that the sampleRate variable is effectively being used to store the playback speed in the WAV file. It does *not* control the number of audio bytes being stored in the wav file.

The number of bytes being recorded is determined by the sample rate of the audio context. See https://developer.mozilla.o... for more information.

As far as I know, the sample-rate is a read-only property of the audio context. If the sample rate value being stored in the WAV file’s header is below the sampling rate of the audio context, it will result in slower playback. If it’s above the sampling rate of the audio context, it will result in accelerated playback. In fact, the sampling rate being used by the demo of 44100 is completely incorrect. At the time of writing this both FireFox and Chrome appear to record at 48000 Hz. Consequently, setting the variable to 44100 Hz will result in reduced playback speed.

The important take-away is this: the sampleRate variable should be set to the sampling rate of the browser's audio context. In this way, the payback speed will match the recording speed and the file will sound normal.

In order to reduce the file size, you must reduce the number of bytes being stored in the file. You can accomplish this in one of three ways. First, you can have a mono file (single channel) instead of a stereo file (two channel). See http://stackoverflow.com/a/... for an example on how to do this. This will effectively cut the file size in half, with the exception of the 44-byte file header.

Second, you can down-sample the recording from the audio context's sample rate to a reduced one. (See http://stackoverflow.com/a/... for an example). Audacity’s documentation has a list of common sampling rates at http://wiki.audacityteam.or....

The third option is to combine the two above methods for an even smaller file.

Regardless of which option you choose, you will need to update any values in file header that are dependent on the values that you are changing. See the "pcm data" section of http://www-mmsp.ece.mcgill.... for how to calculate the various values and http://stackoverflow.com/a/... for a nice visual map of the header.

For example, if you chose to go to a mono-format and down-sample the recording, you would need to update the NumChannels, SampleRate, ByteRate, BlockAlign, and ChunkSize. In the code provided here, SampleRate, ByteRate, and ChunkSize are dynamically calculated. ChunkSize is calculated based on the length of the interleaved data, which is fine, but the ByteRate calculation is expecting two channels of audio (sampleRate * 2 channels * 2 bytes per sample = sampleRate * 4). The byte rate of a mono file would need to be sampleRate * 2 instead of sampleRate * 4 since you only have 1 channel.

Ideally, you should dynamically calculate any header value that is based on the sample rate or number of audio channels instead of hard-coding them. That way, if you ever feel the need to change them later, the header will be written correctly.

Thibault Imbert • 7 years ago

Hi RelativeCausality,

Thanks for bringing this up. Funny because on a current project I am working on I actually experienced the slow playback problem and actually updated the code here a few days ago in the article but not on the live demo. If you look at the snippets I posted in the article you will see that I query the audio context sample rate and use it for the WAV packaging. I came across that bug on a Chromebook where the sample rate is indeed 48k whereas my MacBook Air returns 44k.

For the file size reduction Harish, I might cover this in a future article. Steps from RelativeCausality are good ways to achieve this.

Thibault Imbert • 7 years ago

Btw, I also updated the live demo here for the sample rate issue.

RelativeCausality • 7 years ago


BTW, I forgot to mention that if someone down-samples the recording they will need to make sure that the reduced sampling rate is stored in the WAV file instead of the original sampling rate.

allannaranjo • 8 years ago

Hi Harish, were you able to reduce the file size, I'm having exactly the same results when reduced the sample rate to 22050.

Jonathan L • 3 years ago

Where is a simple open source library that does all this? It seems like a wav packager should be available as an npm package

Naveen Kumar Dubey • 3 years ago

I want a node program that covert text to mp3 plz help

Mickael fraga • 4 years ago

I have a code here that looks more like the error on the mobile "Android" ... could help me to verify ... it seems that it is high latency that the android owns, but I can not solve it, it keeps the voice failing


TMc • 6 years ago

I've been looking over this code for a while, but I still don't understand this line while encoding into a WAV:

var buffer = new ArrayBuffer(44 + interleaved.length * 2);
What is the "* 2" for? Doesn't this just double the length of the WAV file? If the data is already 'interleaved', then won't the length of the 'interleaved' data be the correct length anyway? Shouldn't it just be:

var buffer = new ArrayBuffer(44 + interleaved.length);

Felix Beaulieu • 6 years ago

I think it's because of the size of a sample.

Samples are 16 bits (2 bytes) long in a standard .wav file.

Thanks for this post. Can you help to show how this can be use over socket.io i.e, from Microphone -> Socket.io (nodejs server) -> socket.io (another peer(s)) ->audio element.


Shiob Mohammed A • 6 years ago

Hi, thanks for the article its really knowledgeable, I have one doubt, can we set, sample rate(16000) and audio channel to mono, without breaking up audio?

Neeraj Sharma • 6 years ago

Hi Thibault, My code is not working even i wrote the way the code is written. First of all, i tried to hear the audio blob and couldn't get any voice then on converting it into base64 data, i discovered that blob was empty If you want me i can give you my code.

goodbedford • 6 years ago

Thanks for the article, very superb. I also commend you for updating the article and the comments.

James Kleeh • 7 years ago

I've found the code fails to record if you switch tabs for more than ~2 seconds in Chrome (possibly FF as well). The fix I came up with revolves around connecting and disconnecting the recorder to and from the destination. This also prevents having onaudioprocess to run continually. Do you have this code on Github so I can contribute the change?

Nitin Surana • 7 years ago

getUserMedia (with webkit prefixed) not working on Mobile Safari 7 on iOS 7, any solution/polyfill ?

ziyue • 7 years ago

Thank you, one of my applications need a microphone volume, without the need to download the wav file. Ask how real-time detecting and obtaining the microphone volume?

Thibault Imbert • 7 years ago

FYI. I updated the Web Audio code so that it works with the latest implementations.

masud • 7 years ago

when do the recording on mac browser it works good and play back fine but pc(windows) records and plays back in a deeper voice. can any one help me with this please?
Many thanks

Vlad Titov • 8 years ago

Thanks Thibaul such a great post.

How it is compare to AS3? in terms of speed.

manipulating byte arrays from script is it faster?

kryptogoloc • 8 years ago

This looks suspiciously like you have purloined the code from recorder.js and removed it from its web worker home.

Thibault Imbert • 8 years ago


I actually pointed out in the article clearly that part of the code comes from Matt's example here: http://webaudiodemos.appspo... (Matt being the author of Recorder.js)

The intent was also to explain how this whole thing works, when there is almost no resource on the web that actually explains that from A to Z.

kryptogoloc • 8 years ago

My sincere apologies.

Thibault Imbert • 8 years ago

No worries!

olegk • 8 years ago

You have errors in your code samples. You never define leftChannel or rightChannel, yet you try to push data into them

Thibault Imbert • 8 years ago

Hi olegk,

You should check the code source on the demo link, you will see the complete code. The snippets I posted here in the blog post are just samples from the code I wanted to highlight. In other words, the code is incomplete here in the post.

Rick Carlino • 8 years ago

Thanks for the great article Thibault. This is one of the most useful WebRTC related posts for what I was trying to do.

I started packaging your snippet into a more modular version in coffeescript with a simplified API. https://github.com/rickcarl...

Thibault Imbert • 8 years ago

Hi Rick, happy to hear it was useful. I wrote this because I also did not find much on the web about it.

Very cool wrapper you wrote, love it. Thanks for the heads up!

Sharun • 8 years ago

Very helpful write up. Thanks a lot.
Why does the "live audio" indicator in the chrome tab(near the favicon) continue to blink after recording has stopped? Anyone know what the right way to release the audio nodes is?

Thibault Imbert • 8 years ago

Good catch, I am not releasing the nodes in this example. I will have a look when I have some time.

Check the lifetime section on the spec: https://dvcs.w3.org/hg/audi...

Post it here if you find any solution. Thanks!

Harsh Shah • 3 years ago

Hi Thibault, how can I modify the above code to get an mp4 file?

Daniele Baldo • 8 years ago

Thank you,

great post.

i have implemented a java server based on nanoHTTP and java Websocket server

Do you think is it possible to save the channel data or clone the samples directly to the server using websockets?for a live broadcasting to the server.

Thibault Imbert • 8 years ago

Hi Daniele,

Yes, sounds totally doable. Not sure about the latency though, but give it a try!

Erin Mongkey • 8 years ago

Thank you for your excellent code. That is correct code that I was find. But it is run on the only chrome. Is there any method that can voice record on any web browser such as mobile? Thank you.

Mathew Porter • 8 years ago

Brilliant, the demo works brilliantly in chrome, great post and run through.

Chris Matthieu • 8 years ago

Interesting post indeed. I've tried running the live demo on both the latest version of Chrome and Firefox on Mac and the recorded audio file plays but it's silent - nothing recorded. Is it possible the Chrome and Firefox updates may have broken your demo?

Thibault Imbert • 8 years ago

Hi Chris,

Weird. I just tried in Chrome 28.0.1500.71 and it worked. Which version of Chrome are you using? On Firefox, are you using the Nightly builds? Web Audio is partially implemented and they are still working on a bug (for createMediaStreamSource - https://bugzilla.mozilla.or..., so it is expected if it does not work in Firefox for now. Hopefully it will soon.

Let me know.

Chris Matthieu • 8 years ago

Yep, I'm running Chrome 28.0.1500.71 also with no luck; however, I was able to get the demo to run on Chrome Canary. Thanks.

Thibault Imbert • 8 years ago

Ah good. Thanks for the feedback on the issues, this is helpful.

priy • 7 years ago

help me the same in case of video

TomOlivier • 8 years ago

Thanks for the post, really interesting!

Thibault Imbert • 8 years ago

Happy you liked it!

priy • 7 years ago

its not recording its silent and not working please help me

Anshu • 8 years ago

After debugging, I had few questions :-

1) getusermedia() is nt working. So, how i can do audio recording for IE version??
2) In Mozilla, i got recordingLength = 0 due to which i didn't get any output.wav file for audio recording??
3) what does it means left channel and right channel.. If i do audio recording via mobile headphone in google chrome, i got nthing audio voice record in the file?
Can u please review these question and waiting for positive feedback from ur side..

Anshu • 8 years ago

This getusermedia() functionality works on IE???