Recording Audio with HTML5 and getUserMedia in Chrome

Question

I'm looking to record audio in Chrome without using Flash or Silverlight and then store it in a database or on a server using PHP and MySQL.

The only way I've seen this done is via getUserMedia and some JS in HTML5.

For example: http://webaudiodemos.appspot.com/AudioRecorder/index.html

I got the source of github here: https://github.com/cwilso/AudioRecorder

The problem is it doesn't seem to work on my localhost. In fact, the index.html that was included is exactly the same as the hosted version. The hosted version works, but when the same thing is run on my local machine it throws an error saying it can't getUserMedia().

Has anyone implemented something similar or have any insight? Thanks a lot!

Answer 1

For each browser it uses it's own prefix, so for chrome it's webkitGetUserMedia()

see Mozilla's page here for more info on the different prefixes: https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia

Answer 2

I saw you mentioned localhost, but if you are trying to access the site via file:/// instead of actually using http://localhost (a web server) Chrome will block access to getUserMedia.

If you are trying to access it using file:/// then you need to open Chrome with the command line argument of --allow-file-access-from-files

Answer 3

The following gitHub project records audio to MP3 format directly from the browser using HTML5 and JS only.

It works both on Chrome and Firefox as of now.

https://github.com/nusofthq/Recordmp3js

For a more detailed look at the implementation you can read the blog post: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/