6 ms·

How to record audio in Chrome with native HTML5 APIs

93 points by rokgregoric 14y ago

lenart 14y ago
Great article/tutorial. Bookmarked. P.S. Good luck with DubJoy ;)
zidar 14y 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 14y 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.
  - mihar 14y ago
    It works better as in "is supported on more platforms". But here we were solving the Chrome problem specifically.
  - zidar 14y 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.
    - dbaupp 14y ago
      If X lacks flash, then flash definitely doesn't work in X.
- base698 14y 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.
wslh 14y ago
Wow, I was recording audio in Chrome hooking Windows APIs.
- pav3l 14y ago
  You can do that?
  - wslh 14y ago
    Yes. To every Windows application: http://www.nektra.com/products/audio-recorder-api/ http://www.nektra.com/products/audio-recorder-api/
kevincennis 14y 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.
- rokgregoric 14y ago
  Great idea for a new blog post. :)
  - kevincennis 14y 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.
    - rokgregoric 14y ago
      Very cool .. I am also a guitar fan .. did you see this site: http://www.soundslice.com http://www.soundslice.com .. they've done an amazing job.
      - kevincennis 14y ago
        Yeah, agreed. Super impressive. On that same token, you should check out http://getinstinct.com/ http://getinstinct.com/ if you haven't seen it. Those guys are doing some really cool stuff.
        rokgregoric 14y ago
        Crazy .. Love it!
    - bti 14y ago
      Looking forward to it. I'm sure that every guitar-playing programmer has been closely following all the new web audio APIs.
hayksaakian 14y ago
Its frustrating how much is the progress of web development is held to the whims of the chrome team.
- untog 14y 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.
  - tadruj 14y 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 http://code.google.com/p/chromium/issues/detail?id=157613
    - deleted 14y ago
      [deleted]
    - modeless 14y ago
      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.
    - base698 14y ago
      I had the same problem so we implemented the solution above with recorder.js It isn't in production yet, but it works quite nice.
  - rokgregoric 14y 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+.
  - Gmo 14y ago
    Hum, Mozilla is doing it.
avolcano 14y 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 https://github.com/thomasboyt/web-audio-recording-demo [2] http://www.youtube.com/watch?v=344OpaQCAQI http://www.youtube.com/watch?v=344OpaQCAQI [3] https://github.com/Dinahmoe/tuna https://github.com/Dinahmoe/tuna
jtheory 14y 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...).
- kevincennis 14y ago
  Chrome does prompt the user when a site requests webcam or audio (microphone/line-in) input.
- mihar 14y 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.
  - kevincennis 14y ago
    The need to go to chrome://flags has nothing to do with privacy.
    - rokgregoric 14y ago
      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.
cdoxsey 14y 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."
- rokgregoric 14y 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 :(

93 points by rokgregoric 14y ago

Great article/tutorial. Bookmarked. P.S. Good luck with DubJoy ;)

zidar 14y 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 14y 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.
- mihar 14y ago
  It works better as in "is supported on more platforms". But here we were solving the Chrome problem specifically.
- zidar 14y 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.
  - dbaupp 14y ago
    If X lacks flash, then flash definitely doesn't work in X.
base698 14y 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.

wslh 14y ago

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

pav3l 14y ago
You can do that?
- wslh 14y ago
  Yes. To every Windows application: http://www.nektra.com/products/audio-recorder-api/ http://www.nektra.com/products/audio-recorder-api/

kevincennis 14y 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.

rokgregoric 14y ago
Great idea for a new blog post. :)
- kevincennis 14y 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.
  - rokgregoric 14y ago
    Very cool .. I am also a guitar fan .. did you see this site: http://www.soundslice.com http://www.soundslice.com .. they've done an amazing job.
    - kevincennis 14y ago
      Yeah, agreed. Super impressive. On that same token, you should check out http://getinstinct.com/ http://getinstinct.com/ if you haven't seen it. Those guys are doing some really cool stuff.
      - rokgregoric 14y ago
        Crazy .. Love it!
  - bti 14y ago
    Looking forward to it. I'm sure that every guitar-playing programmer has been closely following all the new web audio APIs.

hayksaakian 14y ago

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

untog 14y 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.
- tadruj 14y 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 http://code.google.com/p/chromium/issues/detail?id=157613
  - deleted 14y ago
    [deleted]
  - modeless 14y ago
    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.
  - base698 14y ago
    I had the same problem so we implemented the solution above with recorder.js It isn't in production yet, but it works quite nice.
- rokgregoric 14y 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+.
- Gmo 14y ago
  Hum, Mozilla is doing it.

avolcano 14y 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 https://github.com/thomasboyt/web-audio-recording-demo [2] http://www.youtube.com/watch?v=344OpaQCAQI http://www.youtube.com/watch?v=344OpaQCAQI [3] https://github.com/Dinahmoe/tuna https://github.com/Dinahmoe/tuna

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

kevincennis 14y ago
Chrome does prompt the user when a site requests webcam or audio (microphone/line-in) input.
mihar 14y 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.
- kevincennis 14y ago
  The need to go to chrome://flags has nothing to do with privacy.
  - rokgregoric 14y ago
    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.

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

rokgregoric 14y 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 :(