HTML5 Audio Recording + uploading MP3 files

[John Robin Dove]

Hi,
HTML5 Web Audio is now available in a number of browsers. I have recycled some code provided by a generous javascript developer and have incorporated online recording into my projects. Here are two example apps. The first uses HTML and Javascript only: http://www.mediacours.com/MP3/recorder.html the second uses HTML, Javascript + a Toolbook/Powerpac DHTML: http://www.mediacours.com/recorder/index.html Both apps enable voice recordings to be saved as MP3 files and uploaded to a server and/or downloaded to the user's computer. You can download a zip with the TB 9.01 file etc. from here: http://www.mediacours.com/tb_examples/recorder1.zip

I have tested the apps in the latest versions of Google Chrome and Mozilla Firefox. They do NOT work in Internet Explorer but I have been able to use the alternative WAMI recording system with Toolbook/Powerpac DHTML on Internet Explorer. This is not as satisfactory as HTML5 Web Audio for the following reasons:

- authorizing the use of the user's microphone is slightly more complicated
- only wav files can be uploaded and they are much bigger than MP3s
- I have not been able to include pause and resume functions
- files have to be uploaded to the server before they can be played (but this may be due to my incompetence - I guess there's a way round this)

But if anyone is interested I can provide WAMI examples too.

JR Dove

UPDATE The examples in the links above now only work on Firefox. I have now made a new example here https://www.mediacours.com/recorder2 using code from here https://github.com/addpipe/simple-web-audio-recorder-demo

[John Robin Dove]

UPDATE 2
For several frustrating weeks I have been trying to make my recording system function again in Firefox and Chrome. Firefox has never been a problem. Originally it worked well in both. It took me a long time to realize that this is yet another Chrome security problem. Chrome would only work if I added a reload button [javascript: location.reload(true)]. So I wrongly assumed that something was being left behind in local storage or somewhere. In fact the problem was that Chrome refuses to accept an authorization to use a microphone if this is done immediately after the page loads. It has to be done when the user clicks on the 'Record' button. But while this works for Chrome I couldn't get it to work for Firefox. I ended up making a clunky system that detects the browser and selects the timing of the authorization accordingly. This is down to my incompetence because the the three format version, which I have not modified, does this successfully.

My original version http://www.mediacours.com/recorder/ suits me best because it makes a wav and an mp3 file almost simultaneously. I play the wav back but if the user wishes to keep the recording I upload the mp3 version.

The three format version http://www.mediacours.com/recorder2/ is impressive but slightly slower. It does not include pause and resume functions and I have not been able to add these. So for my project I shall continue with the wav/mp3 version.

Both recorders function correctly on Firefox and Chrome, on a PC and on an Android tablet. Using Edge the results are poor with significantly more background noise. I wonder why?

If anyone would like the javascript code and tbk used please contact me at [email protected]. And if you are using other browsers or another os, please let me know the results.

[Clifton]

This sounds very impressive!
 

[John Robin Dove]

Thanks Clifton! I should point out that the most impressive part was not my work!