Was thinking of writing this and submitting a PR, but I wanted to see if anyone else thought it might be useful first.

Here's one use case that comes to mind:

I've created an OfflineAudioContext, rendered my mix (or whatever it is), and now I have a full AudioBuffer that I just want to export to WAV, so there's no need to attach a ScriptProcessorNode and "record" it in chunks. Obviously I can sort of do this myself by creating my own Web Worker and just passing it a sampleRate and two Float32Arrays - but it might be nice to have a static method on Recorder that will do it for me.

What do you think? Should I write it?

Oh, and thanks so much for writing this library. It served as a fantastic learning resource when I needed to do WAV export in my own app.

Seems that this library is broken for now.

26.0.1410.65, Mac 10.7, chrome://flags audio input enabled

Looking at the exported file in a text editor shows what looks like a header section and then all zeroes.

Speech API works fine so I know it's not an issue with my microphone or input setup.

When running the examples on Mac and Linux everything is fine but on windows I just get a silent recording.
Anyone have this problem too?
Tested on latest chrome
Thanks.

Hi,

I'm currently working on a project, where I use Recordjs for chunking a live WebRTC record into several WAVs. I like to chunk the record because I'm sending it to a webserver using websockets to distribute the livestream from there.

My problem is that there are gaps between the chunks, so the stream is very fragmentary.

The way I'm recording it is similar to this tutorial I found.

In short, I'm sending every 2 seconds a newly created WAV what looks like this:

setInterval(function() {
   rec.exportWAV(function(blob) {
      rec.clear();
      ws.send(blob);
   });
}, 2000);

Actually I'm generating Base64 encoded URLs for sending it to the sever via websockets.

Am I doing something wrong or will there always be gaps between the wav's, or is there a better aproach for sending it to the server ?
Or maybe someone can help me with finding the lines where this gaps come from?

Hello, Could you please add an example on how to prevent the download of the WAV file in order to use it in another way like, uploading it to a server? I'm using Rails with paperclip, it would be great to have a way to upload the output as a paperclip attachment or something like that. Is there any way to do this? as far as I've seen it is only possible to download the WAV file as soon as it its generated, but I can't figure out how to use it in another way, some advice?

Chrome crashes when calling exportWAV() after recording about 8 seconds.

You can have a try on clawlab.org :

• Sign up (no mail confirmation so you can create an account with a fake mail)
• Create a new project
• Click the "library" and upload file
• create tracks and drag sound in it.
• click the "record" button, then the "download" button

Where is stored the file being recorded?
I'm trying to make a radio and need the file in real time, your system supports it?

.. is it possible to work with different sample rates or formats other than WAV?

Currently about 30 seconds of audio gets well over 5Mb.

Other than this, is works great.. Lots of ideas coming. Thanks.

My requirement is I want hear the recorded voice back. I can do this using getBufferCallback()
but when I move to another page which is Editing in my case I lose this object. I can store it on server but it is little time taking and so I was wondering if I could store this file in browser cache.

The last line of code is throwing this error. Not sure what I'm doing wrong as I'm following the instructions here line by line:

http://www.smartjava.org/content/record-audio-using-webrtc-chrome-and-speech-recognition-websockets

    $('#stream').click(function() {
       try
        {
          navigator.webkitGetUserMedia({audio:true}, callback);
        } 
        catch(exception) 
        {
          alert(exception);
        }           
    });

function callback(stream) {
            console.log(stream);
    var context = new webkitAudioContext();
            var mediaStreamSource = context.createMediaStreamSource(stream);
            console.log(mediaStreamSource);

           var rec = new Recorder(mediaStreamSource);
          //Have tried ^this line both as 'var rec = ' and 'rec = ' like the instructions suggest

I'm using Chrome M27 beta. Using the included sample page, it works fine on Mac. When I try the same thing, in the same version on Linux, I audio files of the proper length but with just silence. I do not have access to Windows to try.

Hello,

Would it be possible to add FLAC support ? (Maybe with https://github.com/audiocogs/flac.js.)

Regards,

I do this experiment in Google Chrome Canary 25，Why can not I hear the sound？
Code does not prompt error.

First, thanks to everyone Reply.

I do not have change the code.
I do it on Windows XP ,not using a web server.

Maybe I can try to experiment in the server.

Then how to ensure that the sampling rate of the input and output device.

I'm trying to put Recorderjs into my application. I noticed however, Recorderjs sends 44khz stereo 16bit wave, which is boatload of data. In my voice application, a typical requirement would be 16khz mono 16bit.

I've been digging deeper. It appears webkitAudioContext constructor do not accept arguments. And because sample rate cannot be changed once AudioContext is created, I'm stuck with the default format.

It looks like the problem to address this is to use the OfflineAudioContext, which accepts 3 argument of format when constructed. However, even though this function is internally available, it's not exposed to the Web Audio API for Javascript yet.

I'm wondering if anyone has any insight on this. Is there any way to change wave format at the moment?

Is it possible to connect more than one source to the recording node? What I would like to do is have to sources playing simultaneously and record those two sounds with a single record node. Is this possible?

When I used the Recordjs to record music,it works well.
But while I tried to record voice from microphone,I could only got an empty file.
I found that the data from the onaudioprocess event where zero.
I worked with WinXP + IIS + Chrome 27.0 dev.Could you give me some suggestions.
Thanks a lot!

I am currently making use of your fantastic RecorderJS library in a GWT application I'm building for my university project. The library works brilliantly as expected and I'm using it to capture audio and send this audio to the server so that it can be retrieved by other clients.

I currently have an issue with trying to retrieve the audio and send it to the server using RPC which is being caused by the callback that getBuffer requires. What I'm trying to do is retrieve the buffers and then send these to the server however as it requires a callback and GWT runs on a single thread i'm unable to wait for the callback to complete i.e. the code to send the buffers to the server is being executed before the getBuffers callback is executed.

I was wondering whether there is an alternative method i can use to getBuffers, that doesn't require a callback and just returns the buffers object. I could then send this to the server and when another client wants to play that audio it could just retrieve the buffers from the server and call the code in the getBuffersCallback function.

I've had a look at the javascript code and tried to re-write it myself however really have no idea of how to make the recorderWorker return the buffers without needing a callback i.e. i just need a function that will return the buffers as soon as they are available. Can anyone please help?

How do you detect that a sound clip has finished playing?

tested for firefox nightly build

diff --git a/example_simple_exportwav.html b/example_simple_exportwav.html
index f2ab89d..889f74a 100644
--- a/example_simple_exportwav.html
+++ b/example_simple_exportwav.html
@@ -85,7 +85,7 @@
     try {
       // webkit shim
       window.AudioContext = window.AudioContext || window.webkitAudioContext;
-      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
+      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
       window.URL = window.URL || window.webkitURL;

       audio_context = new AudioContext;

I keep getting this error when starting a new recorder instance.

recorder = new Recorder(outputGain);

Hi,

Thanks for your great work.
I noticed that the AudioContext on my machine always has a sampleRate of 48000.
However when I use Silverlight to record on the same machine. I have around 23 supported formats that I can easily choose from (e.g. 1-2 channels, 8000/44100/48000 etc.)

Is there anyway to record using a different sample rate?

Thanks.

I hear lot of noise as soon as i initialize the audio context ..

  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
  window.URL = window.URL || window.webkitURL;
  audio_context = new AudioContext;

any means by which this noise can be stopped.

Hi,
Will this Recorder.js work on Mac OSX, firefox as well as chrome?

From readme:

    var rec = new Recorder(source [, config])

Creates a recorder instance.

source - The node whose output you wish to capture
config - (optional) A configuration object (see config section below)

Since you don't show this in the example, what is source supposed to be if I'm trying to pass something into config to tell recorder where the worker path is?

I have used this code, and found that the exported file after stop recording is of size 1KB, and it can't be played using windows 7 media player. Any update will'be highly appreciated. Thanks:Sushil

getBuffer() returns a channel-interleaved Float32Array buffer. This is great for saving WAV files (which are interleaved), but not great for Web Audio - specifically, you cannot (as README.MD says) play the buffer back by "creating a new source buffer and setting this as its channel data (i.e. newSource.buffer.getChannelData(0).set(recordedBuffer))." This plays back a blended left-and-right track in mono, at apparent half speed. In order to play this back properly, you'd have to de-interleave the tracks.

I'm thinking through a solution, but you should either maintain the buffers as separate L/R buffers during recording and only interleave when saving, or de-interleave when getBuffer is called and return a Web Audio buffer (or array of Float32Arrays, one per channel). I'll probably code up the first way and submit a pull request.

Or, at the very least, change the README. :)

Is it any way to send as post form to a php to save it in a server the recording?

It's really great you have found out how to use the HTML5 audion API. Many others did not - much like me.

All I can find over the internet are questions and unexplained source code.

Hello,

I tried to export to an other format than wav.
I thought, if I would use an other mime type for the Blob the browser
convert the data, if the file type is known and supported.
But nothing happen. Its always a wav file. I tested the created
file with an ogg tool.
I know that the filename in the example always ends to wav.
Is there any way to export the recorded audio as ogg without
implementing an encoding function?

Hi,

Thanks for this great plugin.
How is it possible to pause the recording and then resume it, without displaying the browser's "allow microphone" alert on resume?
Just trying to create a "pause" button for the recorder.

Thanks.

I'm drawing an updating waveform pulled from recorder's buffer. exportWav seems to work fine when the waveform isn't being drawn, but throws errors when both are required simultaneously. Am I making a big oversight or is this not possible?
I'm new to this but exploring recorder.js has been an educational adventure in browser workers and the .wav format so thanks for all the learnin'!
Martin

    <div class="recButton" id="recBtn">
    RECORD
    </div>

I hear myself while testing Recorderjs. How can i turn it off?

Its not working in Firefox and its working fine in chrome.Can u give me some suggestion for firefox?

Some of our users are experiencing issues where they sound lower than normal. The strange thing is that this is not replicable on our end, and most of our users are finding it okay. I'm not even sure where to begin to look, and I was hoping you guys had some ideas. Thanks.

I am using recorder.js to upload user's audio files on our server. Its working properly in chrome and firefox..

http://216.245.194.124/recorduploadsample.com/

In the above sample start, stop and Play functionality are there which is working in chrome and firefox both browsers

But now I want to add "Pause" functionality in this means user should be able to pause while recording and again start after some time...On server only one file should uploaded that having all the content means before and after pause..All should be in one file and that should uploaded on server.

Can anyone help me?

Thanks in Advance

in your opinion is there any chance that the audio could be live streamed back to the server in a raw format, maybe looping on start(), stop() and exportWave and using socket - websocket??

Hello!

Good example, but how I can disable loopback? Now I hear own voice always.

Hey Matt,

It would probably make sense to make this asynchronous, because the rendering can take a while if you've recorded a longer piece, and it's probably not desirable for the UI to become locked for that time.

One way of doing this is by making a Web Worker per each recorder, and the onaudioprocess would feed the buffers to that worker (this also means less memory used by the main thread) and operations like clear would just be sent to the worker to release its buffers, etc., where as render would take a callback that would be triggered once the worker has completed crunching the data. Ideally the worker would return the created data: URL, because converting to base64 can take a while as well.

I'm using Recorder.js with Meteor for client-side audio recording, and it works wonderfully in development. However, when I run in production, the web worker associated with Recorder throws a syntax error:

unexpected token '<'.

I think it has something to do with concatenation of Javascript files in production mode, because the file has already been minified (works in development after minifying). A look at the development console shows,

Resource interpreted as Script but transferred with MIME type text/html: "http://myapp:3000/client/compatibility/recorderWorker.min.js".

I know this probably has to do with Meteor's router rather than your library, which has been a great help by the way, but any help would be really appreciated.

I am using recorder.js to upload user's audio files on our server. This is working in chrome and firefox both..But our audio file will be around 1 minute and for 1 minute audio file its generating approx 8 MB file which is too large to upload on server..

I have tried to update recorderWorker.js file:

Updated interleave method as

function interleave(inputL, inputR)
{
var result = new Float32Array(inputL.length);
for (var i = 0; i < inputL.length; ++i)
result[i] = 0.5 * (inputL[i] + inputR[i]);
return result;
}

and set channel-count as

/* channel count */
view.setUint16(22, 1, true);

By this above code my file was created in just half size ie of 4 MB. when I play this file in chrome it is working but when I try this file in firefox and windows media player..This is not working..In firefox its giving failed to load and in windows media player giving "Windows Media Player encountered a problem while playing the file." message.

I have created 2 samples:

http://216.245.194.124/recorduploadsample.com/
http://216.245.194.124/recorduploadsample2.com/

First sample will work in both chrome and firefox and after record anything we can play the recorded sound..(This is original code with large file size)

Second sample is working only in chrome not in firefox (Updated above code to reduce the file size)

I need to reduce the file size by changing resolution of the audio file and that should work in chrome, firefox both...Can anyone suggest the solution for this?

Thanks in Advance

Its working in chrome but not working in firefox . Can u suggest me other solutions with example?

Is anyone else having issues? I'm testing on the Firefox and Android Web Browsers with Flash 11.1. I know what you might be thinking, Flash is dead for Android, but until WebRTC features drop on the mobile versions of FireFox and Chrome then there isn't any other option :P.

Hi,

I am using the recorder.js for recording the audio. This gives me output as 44.1khz, 2-channel wav file.But my requirement is 16khz sinlgle channel WAV file . Could you please guide me on how to achieve this with the help of recorder.js.

Thanks in advance.

Regards,
Mohan Savant

Hi,
the output wav file is created, no error in the console, the wav sound seems to be "muted", the audio is being played but no sound in output. Basically the wav is 44100Hz, 16 bit, but the output is 0.

The log were

Audio context set up.
navigator.getUserMedia available.
Media stream created.
Input connected to audio context destination.
Recorder initialised.
Recording...
Stopped recording.

Chrome is 27.0.1453.93
MacOS is 10.8.3

Hi,

Can you choose a license for this code?

Thanks for sharing.

It seems like forceDownload is not currently working on Safari and Firefox but works fine on Chrome.

How can I address this issue?

recorder.exportWAV(function(blob){
        Recorder.forceDownload(blob);
        recorder.clear();
});

Hello,

First of all, your plugin is very cool!

Now onto the topic: at work I came across a case where I needed to record audio using 1 channel only. Since Web Audio API allows for any number of channels, I think making the number of channels configurable would be a useful feature.

how to export file to server automatically after recorded?can u tel me with demo?

I'm wondering why the local audio is audible. As noted in the text on the sample page, if you don't mute it, you get a screeching feedback loop. Is that intentional? If so, do you know of the proper way to mute it in code (not requiring the user to do it).

I found that on my Mac, I can simply comment out these lines from the .html file. I'm not sure if this is the proper method to use though.

    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');