Update with fixes 15.10.2015
The known issues with the longer recordings length and the audio loopback have been fixed. All fixes have been committed to the master branch in GitHub. The live demo has been updated as well to the latest version. Thanks to all who commented bringing up the issues and to all who contributed. Special thanks to kehers, Nicholas, Wellington Soares, Muhammad Tahir, SimZal and Alex Zhukov.
With the continuous advancements of HTML 5, audio/video capture using only the browser has reached a turning point where it is possible to record but only on specific browsers.
In this article we will be focusing on audio capture and more specifically on capturing audio from the microphone and encoding it to MP3 using only JavaScript and HTML.
The Name of the Game is getUserMedia()
Using the getUserMedia() API, you can capture raw audio input from the microphone.
We will get to the how soon, but first off you will have to remember that this API is still in development and is not supported by all browsers and there is no standardized version yet. The best support can be found in Chrome, followed by Firefox. For a more detailed look on the history and development of the API you can check the html5rocks article. Also for a thorough reference guide you should check the Mozilla Developer Network article.
The Recorder.js Library and libmp3lame.js Library
The starting point for the whole process of recording mp3 is represented by Matt Diamond’s Recorder.js, a plugin developed in JavaScript for recording/exporting the output of Web Audio API nodes. This library is under MIT license.
Recorder.js implements the capture audio functionality and saves it in wav format using getUserMedia. The problem with wav is that the sound data is not compressed, therefore they take up a lot of space on the disk, just 1 minute of recording can take as much as 10 Megabytes.
The solution to this? Well let’s convert the wav file to mp3. Simply saving the wav file to disk and then converting it server side will not do. We will convert the recording, to mp3, in real time, in the browser.
So how do we do that? An mp3 JavaScript library exists that can do that. It has been ported directly from the most used mp3 encoder, LAME Mp3 Encoder. LAME is a high quality MPEG Audio Layer III (MP3) encoder licensed under the LGPL.
The library’s name is libmp3lame.js and a minified ready to use version can be downloaded from GitHub. The library is licensed under the LAME license terms.
So it looks like we got all the tools we need. Let’s take a look in detail on what we need to do next.
Putting It All Together
1. Making Recorder.js work on Firefox
I started off by modifying the Recorder.js project to my needs. The library in it’s default state works only in Chrome, so i modified that, so that it can capture audio in Firefox as well by changing the window.onload function from index.html like so:
window.onload = function init() { try { // webkit shim window.AudioContext = window.AudioContext || window.webkitAudioContext; navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); window.URL = window.URL || window.webkitURL; audio_context = new AudioContext; __log('Audio context set up.'); __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!')); } catch (e) { alert('No web audio support in this browser!'); } navigator.getUserMedia({audio: true}, startUserMedia, function(e) { __log('No live audio input: ' + e); }); };
2. Changing Recorder.js to Record Mono Wav Files
The recorder.js (i’m talking here about the main javascript file and not the name of the library), expects by default an in input from two data channels, because the initial implementation produced stereo wav files. For our purpose we will need to change that to mono recording, otherwise abnormal mp3 recordings will be produced with low pitched sounds. Also there is no specific need that the recording should be stereo in the first place, by default a normal microphone records in mono.
The first change that has to be made for a mono recording is to the onaudioprocess event function:
this.node.onaudioprocess = function(e){ if (!recording) return; worker.postMessage({ command: 'record', buffer: [ e.inputBuffer.getChannelData(0), //e.inputBuffer.getChannelData(1) ] }); }
I’ve just commented out the inputBuffer capturing for the second channel.
Next in the actual javascript worker (recorderWorker.js), I’ve made several modifications.
First in the record function, we must only capture the inputBuffer for the first channel, because the seconds won’t exist after our previous modification
function record(inputBuffer){ recBuffersL.push(inputBuffer[0]); //recBuffersR.push(inputBuffer[1]); recLength += inputBuffer[0].length; }
The second change comes to the exportWav method. Continuing the trend, we only need to process one audio channel.
function exportWAV(type){ var bufferL = mergeBuffers(recBuffersL, recLength); //var bufferR = mergeBuffers(recBuffersR, recLength); //var interleaved = interleave(bufferL, bufferR); //var dataview = encodeWAV(interleaved); var dataview = encodeWAV(bufferL); var audioBlob = new Blob([dataview], { type: type }); this.postMessage(audioBlob); }
And finally changes were made to the function that does all the encoding in order for the wav file to be produced (bit by bit). Here several lines have been replaced from stereo to their mono counterparts, exactly which ones are marked in the commented text in the source code:
function encodeWAV(samples){ var buffer = new ArrayBuffer(44 + samples.length * 2); var view = new DataView(buffer); /* RIFF identifier */ writeString(view, 0, 'RIFF'); /* file length */ view.setUint32(4, 32 + samples.length * 2, true); /* RIFF type */ writeString(view, 8, 'WAVE'); /* format chunk identifier */ writeString(view, 12, 'fmt '); /* format chunk length */ view.setUint32(16, 16, true); /* sample format (raw) */ view.setUint16(20, 1, true); /* channel count */ //view.setUint16(22, 2, true); /*STEREO*/ view.setUint16(22, 1, true); /*MONO*/ /* sample rate */ view.setUint32(24, sampleRate, true); /* byte rate (sample rate * block align) */ //view.setUint32(28, sampleRate * 4, true); /*STEREO*/ view.setUint32(28, sampleRate * 2, true); /*MONO*/ /* block align (channel count * bytes per sample) */ //view.setUint16(32, 4, true); /*STEREO*/ view.setUint16(32, 2, true); /*MONO*/ /* bits per sample */ view.setUint16(34, 16, true); /* data chunk identifier */ writeString(view, 36, 'data'); /* data chunk length */ view.setUint32(40, samples.length * 2, true); floatTo16BitPCM(view, 44, samples); return view; }
With these changes the Recorder.js library will now produce mono wav files, exactly what we need.
3. Integrating libmp3lame.js With Recorder.js
For my project i used the compiled minified version of libmp3lame.js available in the github project.
The mono wav files produced in step 2 will be returned in blob format. From here we can start doing the real-time conversion from wav to mp3. This process starts in the worker.onmessage event handler function. Using a FileReader, i’ve read the blob as an array buffer: fileReader.readAsArrayBuffer(blob).
worker.onmessage = function(e){ var blob = e.data; //console.log("the blob " + blob + " " + blob.size + " " + blob.type); var arrayBuffer; var fileReader = new FileReader(); fileReader.onload = function(){ arrayBuffer = this.result; var buffer = new Uint8Array(arrayBuffer), data = parseWav(buffer); console.log(data); console.log("Converting to Mp3"); log.innerHTML += "n" + "Converting to Mp3"; encoderWorker.postMessage({ cmd: 'init', config:{ mode : 3, channels:1, samplerate: data.sampleRate, bitrate: data.bitsPerSample }}); encoderWorker.postMessage({ cmd: 'encode', buf: Uint8ArrayToFloat32Array(data.samples) }); encoderWorker.postMessage({ cmd: 'finish'}); encoderWorker.onmessage = function(e) { if (e.data.cmd == 'data') { console.log("Done converting to Mp3"); log.innerHTML += "n" + "Done converting to Mp3"; /*var audio = new Audio(); audio.src = 'data:audio/mp3;base64,'+encode64(e.data.buf); audio.play();*/ //console.log ("The Mp3 data " + e.data.buf); var mp3Blob = new Blob([new Uint8Array(e.data.buf)], {type: 'audio/mp3'}); uploadAudio(mp3Blob); var url = 'data:audio/mp3;base64,'+encode64(e.data.buf); var li = document.createElement('li'); var au = document.createElement('audio'); var hf = document.createElement('a'); au.controls = true; au.src = url; hf.href = url; hf.download = 'audio_recording_' + new Date().getTime() + '.mp3'; hf.innerHTML = hf.download; li.appendChild(au); li.appendChild(hf); recordingslist.appendChild(li); } }; }; fileReader.readAsArrayBuffer(blob); currCallback(blob); }
Next, the buffer is parsed by the parseWav function and the encoding process begins using encoderWorker. This worker is initialized by mp3Worker.js which is the javascript file that imports the minified version of libmp3lame.js. Here is where it all comes together, the final product of this worker being a Uint8Array of mp3 data.
Once the encoding is done a new blob object is created from the Uint8Array ready to be downloaded and listened to through a standard HTML audio control. The mp3 is also automatically saved to disk with the help of AJAX and a PHP data writing script.
4. Done
That’s it. We’ve achieved what we’ve set out for. We’ve created mp3 audio recordings directly from a browser using nothing more than JS and HTML.
A live demo is available here ( Chrome and Firefox only ).
Known issues
The resulting mp3 recording will be longer by aproximetely 50%. So a 5 seconds recording will have a 10 seconds duration, with the last 5 seconds being empty. This may be caused by a buffer problem.
I just tested this. I hear nothing from 50% length of mp3 file. It seem the script extends 50% record time.
That’s a known issue. It is now specified in the article. The source code is available on GitHub. Any contributors are welcome 🙂
Good job ~ thank you!!
I’m using ASP.NET and I have convert your upload.php to c# code
string audioData=HttpContext.Current.Request.Form[“data”];
string fileName =HttpUtility.UrlDecode(HttpContext.Current.Request.Form[“fname”]);
audioData=audioData.Substring(audioData.IndexOf(‘,’)+1);
System.IO.FileStream stream = new FileStream(Server.MapPath(“~/” + fileName), FileMode.CreateNew);
System.IO.BinaryWriter writer = new BinaryWriter(stream);
writer.Write(Convert.FromBase64String(audioData), 0, Convert.FromBase64String(audioData).Length);
writer.Close();
The libmp3lame.min.js file you provide is different from the one at the github project page. I tried to replace it and noticed the two are quite different and not compatible. I wanted to use the un-minified version for testing and debugging (such as to fix the buffer issue), but you don’t provide it.
That is a custom compiled version. A un-minified version can be found on the gitHub project page.
Any solutions with the extra 50% issue? I wish I could help you fix it ..but it’s over my head 🙂
I suspect is has something to do with the way libmp3lame.js encodes the WAV files and somehow along the way the buffer gets doubled, but I haven’t found any solution for this as of now.
I’d recommend you add a disclaimer to your License that using an MP3 encoder like this in certain countries in commercial software can lead you to being sued out your ass. MP3 tech is not free.
libmp3lame mentions this on their site.
http://lame.sourceforge.net/about.php
>> Using the LAME encoding engine (or other mp3 encoding technology) in your software may require a patent license in some countries.
http://www.mp3-tech.org/patents.html
Nice job! I use the scripts but there is a limitation on recording time ( about 120 seconds)…i tried to compile the original lame encoder with emscripten and create a new version of libmp3lame.js with larger TOTAL_MEMORY parameter, but didn’t manage…any suggestions?
I have tested your demo, but it can only record audio for seconds or few mins. However I should record audio for long time period at least for 20 mins, how can I do it?
You will need to recompile libmp3lame.js with a larger buffer size using emscripten (https://github.com/kripken/emscripten). I’m not sure how fast the encoding will be though.
Feel free to fork my project on github and give it a try.
I ‘ve tried to compile libmp3lame.js (https://github.com/akrennmair/libmp3lame-js) with emscripten on Ubuntu 14.04 and Debian 7.5.0, but both compilation tries resulted error when compiled /lame-3.99.5/libmp3lame/vector/xmm_quantize_sub.c (https://gist.github.com/acidhax/9282695). Can you provide info about your compilation?
Any Solution for this known problem ????
I am not sure this is right way, I saw a encode64 function where i made len/2. 50% silence was gone. If this is wrong any suggestion?
Hi, when I use your script as I believe people mentioned before the file get doubled sized, 10 seconds become 20 seconds, do you have a solution for this?
Regards,
Allan
A possible fix for the 50% audio problem.
Look for the following in libmp3lame.js (near the bottom)
var nread = Module.ccall('lame_encode_buffer_ieee_float', 'number', [ 'number', 'number', 'number', 'number', 'number', 'number' ], [ handle, inbuf_l, inbuf_r, channel_l.length, outbuf, BUFSIZE ]);
Change to
var nread = Module.ccall('lame_encode_buffer_ieee_float', 'number', [ 'number', 'number', 'number', 'number', 'number', 'number' ], [ handle, inbuf_l, inbuf_r, channel_l.length/2, outbuf, BUFSIZE ]);
*P.S.: Your comment system is not working properly
Hi, can you please tell me how did you convert the upload.php file. I dont need the code i just need to know what to do in order to accomplish that…
Hi Ncholas, did you try this yourself? If i’m trying this I get some errors. Where did you download the libmp3lame.js file from?
Thanks!
I found it! Thanks for this answer. For other people who want to solve the small problem: search for ccall(“lame_encode_buffer_ieee_float”,”number”,”number number number number number number”.split(” “),
[a,c,g,b.length,f,1024E3])
and change it to:
ccall(“lame_encode_buffer_ieee_float”,”number”,”number number number number number number”.split(” “),
[a,c,g,b.length/2,f,1024E3]
Thanks for this great tutorial.
I have a problem which I can’t figure out, when I try to encode I get an error in the console:
Uncaught RangeError: Invalid array buffer length
I researched a bit and I think it has something to do with the function Uint8ArrayToFloat32Array returning NaN values.
Does someone know what is the reason and how to solve it?
Thanks!
Hi,
I fixed the problem, the ‘adapted’ code and a new different approach (I dont wait the wav ‘finish’ to start encoding) is on:
https://github.com/welll/record-encode-audio-from-browser
The code is an adaptation from:
– https://github.com/nusofthq/Recordmp3js
– https://github.com/akrennmair/speech-to-server
– https://github.com/remusnegrota/Recorderjs
Just to explain how ‘hard’ was to figure out how to fix.
I started analysing the code from original implementation
cat ../lame-3.99.5_c/frontend/lame_main.c | grep encoder_loop
…..
static int lame_encoder_loop(lame_global_flags * gf, FILE * outf, int nogap, char *inPath, char *outPath)
encoder_progress_begin..
lame_encode_buffer_int…
fflush(outf)..
….
However, it was just a ‘way’ to encode a mp3 file. So, I tried too understand the compiled code from front-end (simple program to generate the executable liblame):
I just needed to change two lines on Makefile
+EMCC_OPTS:=-O1 -s LINKABLE=0 -s ASM_JS=1 -s ASSERTIONS=1
+$(EMCONFIGURE) ./configure CFLAGS=”-include xmmintrin.h” &&
function _lame_encoder_loop($gf,$outf,$nogap,$inPath,$outPath) {
_encoder_progress_begin($6,$7,$8);
$55 = (_lame_encode_buffer_int(($52|0),($Buffer|0),($53|0),($54|0),
$73 = (_lame_encode_flush(($71|0),($mp3buffer|0),147456)|0);
But, this did not help either. So, with lucky I found another C++ implementation, and after scan the file
get_audio.c (method get_audio_common)
lame_set_num_channels(m_lameParams,
m_pConfig->GetIntegerValue(CONFIG_AUDIO_CHANNELS));
lame_set_in_samplerate(m_lameParams,
m_pConfig->GetIntegerValue(CONFIG_AUDIO_SAMPLE_RATE));
lame_set_brate(m_lameParams,
m_pConfig->GetIntegerValue(CONFIG_AUDIO_BIT_RATE) / 1000);
lame_set_mode(m_lameParams,
(m_pConfig->GetIntegerValue(CONFIG_AUDIO_CHANNELS) == 1 ? MONO : STEREO));
lame_set_quality(m_lameParams,2);
lame_init_params(m_lameParams)
http://svn.gnumonks.org/trunk/21c3-video/cutting_tagging/tools/mpeg4ip-1.2/server/mp4live/audio_lame.cpp
So, I identify what exactly was necessary to call the encoder using a real code as base.
And definitely, I won’t get it without the source code from @akrennmair and @nusofthq
https://github.com/akrennmair/speech-to-server
https://github.com/nusofthq/Recordmp3js
hey, thanks for the tutorial. It is working great except one error in my case:
HTTP – DEBUG – “POST /upload.php HTTP/1.1” – 404 Not Found (Client: 192.168.1.2 )
Can you please suggest me what may be the issue?
Thank you so much 🙂
Its working!
Its working for mozilla but not for chrome.
It works on https
If you upload it on https supported host it will work fine.
string audioData=HttpContext.Current.Request.Form[“data”];
audioData=audioData.Substring(audioData.IndexOf(‘,’)+1);
how do u pass the data from js function…i m getting error in this line
this may happen due to missing html elements
Why is the speaker continuously outputting the mic input? is there anyway to stop it. I do not want to use it like that in my application
I haven’t had yet time to integrate it into the main branch but there is a fork that fixes most of the issues including this one, here: https://github.com/roparz/Recordmp3js
Thanks Remus, it works great and is really neat. Can you tell me where it stores the mp3 file tus created. I cannot find any recordings directory on my system.
It should store them in the recordings folder located inside the project folder
I was expecting the same, but the upload.php isn’t able to create the recordings folder or create the new file in a folder that I created. Let me try to find out the issue. Thanks for your help so far.
It was a context related permissions issue. Got solved using the following for the upload parent directory: chcon -R -t httpd_sys_content_rw_t /var/www/html/testproject
your clue, it’s not working , dude
Temporary Solution:
Just save half of the stream:
In C# : writer.Write(base64EncodedBytes, 0, base64EncodedBytes.Length / 2);
@Remus, is it possible to further reduce the .mp3 file size ? What suggestions would you have if I’m storing a few hundred thousand over recordings.
You could reduce the sample rate, and overall quality in order to compress the filesize.
Also right now the version from my github has several issues that have been fixed by others in their forks. Most notable one is that the recording is double in size than the actual sound.So you are left with a half empty mp3.
This fork may help you: https://github.com/roparz/Recordmp3js
Fantastic modification Wellington Soares! Thank you for sharing this. All of my freed up server space thanks you as well. 🙂
It’s very helpful. I was finding the solution from 3 days!
Thanks a lot.
Hi Remus, may be a silly question. But I have downloaded the whole package and recording seems to be working, but it is not converting into the MP3 format? It works on your demo but not on my file? Is there any other dependencies to go with it other then what I see on the interface?
Off the top of my head, make sure the webserver has user privileges to write files.
You can also check the javascript console in the browser see if any errors are thrown.
Hi there. Thanks for the Matt Diamond MP3 upgrade
I’m actuallly using the original WAV version of Matt Diamond. I’m considering to implement the importWAV part to be able to reload a WAV file in the recorder. That would allow to modify an existing WAV by:
* inserting a new record at any position in the exiting WAV samples
* delete a part of the record in the existing WAV samples
I ‘m about to try to implement the opposite functions of Matt Diamond’s audiorecorder_worker.js : mergeBuffers, interleave, floatTo16BitPCM, encodeWAV
If you have any tips or advices, then I would be very grateful
There’s a library written in pure javascript (no emscripten) lamejs https://github.com/zhuker/lamejs
It will encode mp3s faster
Thanks for the info :). At the time of writing of this blogpost the library did not exist.
for double time here is the trick
in the file “libmp3lame.min.js” search for this
ccall(“lame_encode_buffer_ieee_float”,”number”,”number number number number number number”.split(” “),
[a,c,g,b.length,f,1024E3])
and change it to:
ccall(“lame_encode_buffer_ieee_float”,”number”,”number number number number number number”.split(” “),
[a,c,g,b.length/2,f,1024E3]
just the change of “length/2”
For my part, as a novice programmer, I managed to cut the second silent half of the recording by modifying the recordmp3.js file:
in the code:
….
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
Becomes
for (var i = 0; i < len/2; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
watch for the len/2.
Voilà ! Thanks to you all, it works !
I implemented this code, pretty much as it is. but I still have 3 problems:
1) I followed the suggestions of previous commenters with no success, the files generated still have a >50% silence at the end.
2) encoding time in some laptops I tested is around 10+ seconds for 30-45 second recordings. that is very slow.
3) the encoded file is not playable on Firefox. putting it through FFMPEG will show that it’s malformed and remuxing it doesn’t help. any ideas?
and it seems that the 50% silence problem is only happening in Firefox.
That problem is in both browsern and its a really problem if you try to concat something and you have a big pause between that versions…
This is good… but it doesn’t encode the MP3 on the fly… it records a wave file in memory and then converts it to MP3.
Is there anything similar that will compress the data as it’s created?
I’ve found that very helpful Blog and here are all that programs described that i had with that libs and sources.
I’have build another version with the lamejs version witch is very fast and much better then the original version of the lame version.
https://github.com/rehoehle/
I’have put my code to Github and i hope that could help some people to find a better solution. It’s possible that there are some bugs in my version. Buts its working.
Great work! Thanks for the recent update, too!
does not work on Chrome-47 or 48 yet – probably because of the ssl-certification issue with media.
I worked on an AngularJS plugin using some of the concepts from this blog post, you can see the the plugin in action here :
http://logbon72.github.io/angular-recorder/
My plugin uses Lamejs (https://github.com/zhuker/lamejs), which encodes MP3 a lot faster than libmp3lame.js
I also created a full example using these concepts to record directly to MP3 using realtime conversion. You can see the example in my fork of lamejs:
https://github.com/logbon72/lamejs/tree/master/worker-example
Great work.
Yet there is a issue in Firefox : once you allow FF to use the mic via the doorhanger, there is a mic icon that appears on top of screen. This icon disappears after a few seconds and it means that the mic is no longer allowed. So the record is empty.
Do you have any workaround ?
Do you think it may be related to this FF bug ? https://bugzilla.mozilla.org/show_bug.cgi?id=934512
It works on android? I tested and crashed… =/
Guys, I have issue with repeatedly voice recording in FireFox 42.0 for http://audior.ec/recordmp3js/
Steps to reproduce (only FF, Chrome OK for me):
1. Click “Record”
2. Say a few words…
3. Click “Stop”
4. Click “Record” again
5. Say a few words again…
6. After playing for second record I hear the silence 🙁
I guess that it’s related with problem of access to microphone in FF. Maybe someone heard about solving the problem via some workaround?
Hi Remus, after update Chrome to Version 47.0. It cannot working. Please fix its.
Works perfect in chrome, but firefox drops the microphone access after a few seconds. Occasionally it lasts for a minute or so, but eventually it drops and the page needs to refresh before you can regain access. You can see this behaviour in your demo as well.
http://flashphoner.com/getusermedia-no-longer-works-on-insecure-origins/
getUserMedia() now is not working over http protocol you need https ” getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.”
As of now, the Navigator.getUserMedia() object is deprecated. Any intentions to either make use of MediaDevices.getUserMedia()?
I volunteer for a nonprofit. We’re trying to develop some aids for immigrants/refugees to learn English. Recording their pronunciation would be helpful to them. I’m using older version of Chrome (portable) which gets around needing https. I would like them to be able to clear recordings without having to reload the page. I’m definitely not a programmer and I’ve tried a number of “fixes” and failed. Do you have the time to offer a solution?
Thanks.
I think I found my own answer. I added another button called “Clear” which triggers:
function ClearRecordList() {
while (recordingslist.hasChildNodes())
recordingslist.removeChild(recordingslist.lastChild);
}
ref: https://siongui.github.io/2012/09/26/javascript-remove-all-children-of-dom-element/
Reply to myself :
To fix the garbage collector bug in FF (mic icon that disappears), see :
https://github.com/nusofthq/Recordmp3js/pull/22
The DEMO does not appear to be working
Audio context set up.
navigator.getUserMedia available.
No live audio input: [object NavigatorUserMediaError]
getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
Hi!
The demo page should be on https since Chrome doesn’t allow to use media from http anymore.
ps, the demo has stopped working in latest chrome. Chrome now forces this JS API to be used over https
Works great on Firefox but not at all in Chrome, can someone post a update or fix?
This is a great work. By the way, is there anyone having a echoing sound issue? It seems that I can hear what it being recorded and this gets into the actual input, ending up making echoing. How do I prevent this thing from occurring? (:
Do somebody tested in iPhones?, I have tested in android and run perfect, but only in the default browser of android, I need to test in iOS
I have a slider on my html webpage. A child is supposed to read what comes on each slide.
I want what the child says to get recorded (audio only).
Now in file:///C:/Users/Sony/Downloads/Recorderjs-Recorder.js-For-Mp3/index.html
there is a button to record and then to stop.
Now where does the audio file get saved. I need to see where it is and if recording happens.
Please guide me. Thanks in anticipation.
Hi !
I would like know that how can i stop saving of recorded file with given callbacks from flash buttons click events?
Thanks
Hi i have tried to make it work on Safari browser but failed… can you please let me know why it is not working on safari.. is there anyway to make it working on safari…
I uploaded my server with an SSL sertificate(HTTPS), working but?!!!
Home chrome version: 53.0.2785.116 m , NOT WORKING
libmp3lame.min.js:1446 Uncaught RangeError: Invalid array buffer length
encode_flush @ libmp3lame.min.js:1446
self.onmessage @ mp3Worker.js:35
My office chrome version: 54.0.2840.34 beta-m, WORKING
Any ideas?
Am i force my user to use this beta 😀
Same error on Mozilla 50.0a2 (2016-09-19) Developer Edition
RangeError: invalid array length
libmp3lame.min.js:1446
For me (Ubuntu 16.10) it works at Firefox, but not at Chrome or Chromium?
Hi,
I’v tested your code. It works successfully.But,It’s not real-time.I mean,we need to wait the buffer converted to mp3 file after we export wav file. I recorded a 2min sound , and find that the convert time could be 5min. Any good idea to solve this problem?? Thx
There is a new fork of lame.js that is way faster then the one in this code.
https://github.com/zhuker/lamejs
On my tests it encodes 10 sec of WAV into MP# in about 4 sec. Not sure if it is a drop-in replacement for this one.
In my experience the biggest problem with this is the conversion to mp3 locks up the browser (at least for me.) I thought the point of web workers was this sort of heavy lifting was kept away from the main stack. The LAME script is enormous so I guess it’s to do with that. I did some profiling and, according to Firefox, it’s garbage collection which is grinding everything to a halt for a few seconds. Any thoughts?
Audio comment
2016. 05. My Test -> http://family-team.emszinet.hu/proghutest/2016/majus/maj_teszt.php#g
2017 05. 09. Firefox error message:
“uncaught exception: out of memory”
Localhost Chrome -> Works well
I do not know what the cause of the message is…
The same problem: “uncaught exception: out of memory” (in Firefox only).
I tried the version on github and it works great on Chrome. But on Firefox I am getting an “out of memory” exception. Happens even on very short recordings (2 sec). It seems like it is in the lame.js code. Any solutions?