How to record audio in Chrome with native HTML5 APIs

http://codeartists.com/post/36746402258/how-to-record-audio-in-chrome-with-native-html5-apis

by rokgregoric • 14 years ago

93 35 14 years ago

codeartists.com

lenart• 14 years ago

Great article/tutorial. Bookmarked.

P.S. Good luck with DubJoy ;)

zidar2• 14 years ago

Flahs, an evil old thing everyone seem to want to avoid. But the fact is, it usually works better than other alternatives.

Seeing many html5+js+css > Flash posts, and it's so nice when everyone is pointing out how awesome it is, until you try to do something useful like dubjoy. Where it turned out for you guys that flash is the only logical way to do it. I hope alternatives will get better soon, until then, we're stuck.

gcp• 14 years ago

But the fact is, it usually works better than other alternatives.

They switched to HTML5 because Flash no longer worked in Chrome, it's explained in the article. That said, this "HTML5" solution looks very much like a WebKit-only solution instead, so meh.

mihar2• 14 years ago

It works better as in "is supported on more platforms". But here we were solving the Chrome problem specifically.

zidar2• 14 years ago

No, they switched because chrome no longer has flash. Not because it didn't work. My point was, chrome solution for replacing flash doesn't work as good as flash.

base6983• 14 years ago

This was true a year ago, but after the introduction of getUserMedia it's so close you can taste it. We've setup our app so as soon as all these features are stable we can have a non-Flash version with local storage, playback, and recording. Right now it's abstracted out into store and recorder classes that have a flash version and a Chrome version depending on what features are present.

wslh2• 14 years ago

Wow, I was recording audio in Chrome hooking Windows APIs.

pav3l• 14 years ago

You can do that?

wslh2• 14 years ago

Yes. To every Windows application: http://www.nektra.com/products/audio-recorder-api/

kevincennis5• 14 years ago

It's a shame that the article doesn't really go into any detail about the Recorder.js library, because that's really the most interesting part of this whole thing.

The use of a Web Worker for background processing plus all of the typed array stuff for creating a RIFF blob out of PCM data is actually pretty cool, and something that most JS developers probably haven't been exposed to much.

rokgregoric7• 14 years ago

Great idea for a new blog post. :)

kevincennis5• 14 years ago

I'm actually working on a project right now for an in-browser guitar amp simulator and the ability to record whatever you've played. Planning on doing a pretty in-depth writeup when it's done.

base6983• 14 years ago

Didn't you write the Recorder.js? I was able to implement it with ease for what we're doing. It has a few too many quirks to use in production but it's mostly there. Have you encountered a crash when unplugging the headphones?

hayksaakian• 14 years ago

Its frustrating how much is the progress of web development is held to the whims of the chrome team.

untog• 14 years ago

Really? Personally I'm not frustrated that the majority of innovation in the web seems to fall to the Chrome team because no-one else is doing it.

rokgregoric7• 14 years ago

Chrome is a super browser .. we all agree .. it's just not acceptable for a bug like mentioned in the article to go through canary, beta and into stable version .. and stay there for 3 week+.

tadruj• 14 years ago

This Chrome bug is affecting all the businesses that rely on voice recording. Still waiting for a fix, while users are going away from real-time web chat services.

http://code.google.com/p/chromium/issues/detail?id=157613

Gmo• 14 years ago

Hum, Mozilla is doing it.

avolcano• 14 years ago

Good article. I was actually working on my own demo[1] for recorder.js, though it's a bit out of date now. It's a tiny but impressive little library.

Worth noting that, besides exporting to a WAV and adding the object URL to an <audio> tag, recorder.js will also (using the getBuffer method) let you use the buffers directly as an actual Web Audio API source. This lets you do further processing during playback on the recorded audio.

I'm hoping by the time that I finish my silly little app (a loop box that you can add effects to, Reggie Watts[2]-style, using recorder.js and the wonderful effects library Tuna[3]), web audio recording in Chrome will be enabled out of the box on stable.

[1] https://github.com/thomasboyt/web-audio-recording-demo

[2] http://www.youtube.com/watch?v=344OpaQCAQI

[3] https://github.com/Dinahmoe/tuna

jtheory• 14 years ago

What's the security model for browser-native audio recording?

That's a worrying security hole, if you can record without getting any permission from the user -- sites could eavesdrop on visitors and upload the audio to who-knows-where (knowingly or not, via an XSS hole...).

I believe Flash needs to prompt you to access your microphone and webcam; browsers should too (even more so, because someone who has disabled all plugins may feel safer...).

kevincennis5• 14 years ago

Chrome does prompt the user when a site requests webcam or audio (microphone/line-in) input.

mihar2• 14 years ago

It's one thing to prompt the user when you start recording and another to need to go to chrome://flags.

Permissions for privacy invading features should IMO have a unified interface like they have in the OS like Mountain Lion.

kevincennis5• 14 years ago

The need to go to chrome://flags has nothing to do with privacy.

cdoxsey• 14 years ago

The takeaway here is its not possible to record audio in chrome (in osx at least) without asking users to either enable Web Audio Input in their settings or disable the PPAPI flash plugin.

It's sad when you end up having to put messages like this in your app:

"Custom voicemails are not currently supported in Chrome on OSX. Please use another browser to record your custom voicemail."

rokgregoric7• 14 years ago

Agreed ... and even more disappointing is when you have to say to your users to use Safari when 2 weeks ago you said to them to switch to Chrome :(

How to record audio in Chrome with native HTML5 APIs

Related Stories