

How to record audio in Chrome with native HTML5 APIs - rokgregoric
http://codeartists.com/post/36746402258/how-to-record-audio-in-chrome-with-native-html5-apis

======
kevincennis
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.

~~~
rokgregoric
Great idea for a new blog post. :)

~~~
kevincennis
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.

~~~
rokgregoric
Very cool .. I am also a guitar fan .. did you see this site:
<http://www.soundslice.com> .. they've done an amazing job.

~~~
kevincennis
Yeah, agreed. Super impressive. On that same token, you should check out
<http://getinstinct.com/> if you haven't seen it. Those guys are doing some
really cool stuff.

~~~
rokgregoric
Crazy .. Love it!

------
cdoxsey
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."

~~~
rokgregoric
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 :(

------
avolcano
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>

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

~~~
pav3l
You can do that?

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

------
jtheory
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...).

~~~
mihar
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.

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

~~~
rokgregoric
You need to go to chrome://flags to enable Web Audio Input. The request for
the microphone has nothing to do with that .. it's working with or without Web
Audio Input.

------
zidar
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
_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.

~~~
zidar
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.

~~~
dbaupp
If _X_ lacks flash, then flash definitely doesn't work in _X_.

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

~~~
untog
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.

~~~
tadruj
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>

~~~
modeless
It's open source. If you're a startup at the cutting edge of web tech you can
and should be contributing to the platform you run on.

------
lenart
Great article/tutorial. Bookmarked.

P.S. Good luck with DubJoy ;)

