{"id":1669,"date":"2012-10-28T04:08:26","date_gmt":"2012-10-28T09:08:26","guid":{"rendered":"http:\/\/www.phpied.com\/?p=1669"},"modified":"2012-10-28T04:20:46","modified_gmt":"2012-10-28T09:20:46","slug":"webaudio-live-input","status":"publish","type":"post","link":"https:\/\/www.phpied.com\/webaudio-live-input\/","title":{"rendered":"WebAudio: live input"},"content":{"rendered":"

Live input, aka getUserMedia<\/code>: it exists in Chrome Canary for audio too. Great times to be a web developer, right?<\/p>\n

Let's check it out.<\/p>\n

Here's the demo<\/a>, but first a prerequisite: go chrome:\/\/flags<\/a>, search for \"Web Audio Input\" and enable it. Restart Chrome Canary.<\/p>\n

With a guitar<\/h3>\n

I wanted to have a little trickier setup and capture guitar sound not just voice with a microphone.<\/p>\n

As always, it was bigger hurdle to get guitar sound to the computer, than anything else JavaScript-wise.<\/p>\n

I have a guitar amp that has a mini-USB out. This goes to the USB of the computer. Wrestle, system settings, garage band to the rescue.... eventually the computer makes sound. <\/p>\n

Capturing<\/h3>\n

I was assuming the stream you get from getuserMedia<\/code> can go directly to an HTML <audio> src<\/code>. No such luck. Works for video<\/a> but not yet for audio<\/a>.<\/p>\n

So... WebAudio API saves the day.<\/p>\n

Setting up audio context (like in the previous post), shimming getUserMedia and setting up callbacks for it:<\/p>\n

\n
  <\/span>\/\/<\/span> for logging<\/span><\/span>\r\n  <\/span>function<\/span> <\/span>fire<\/span>(<\/span>e<\/span>, <\/span>data<\/span>)<\/span> <\/span>{<\/span>    \r\n    <\/span>log<\/span>.<\/span>innerHTML<\/span> += <\/span>"<\/span>\\n<\/span>"<\/span> + <\/span>e<\/span> + <\/span>"<\/span> <\/span>"<\/span> + <\/span>(<\/span>data<\/span> || <\/span>'<\/span>'<\/span>)<\/span>;\r\n  <\/span>}<\/span>\r\n \r\n  <\/span>\/\/<\/span> globals<\/span><\/span>\r\n  <\/span>var<\/span> <\/span>audio_context<\/span>;\r\n  <\/span>var<\/span> <\/span>volume<\/span>;\r\n \r\n  <\/span>\/\/<\/span> one-off initialization<\/span><\/span>\r\n  <\/span>(<\/span>function<\/span> <\/span>init<\/span>(<\/span>g<\/span>)<\/span>{<\/span>\r\n    <\/span>try<\/span> <\/span>{<\/span>\r\n      <\/span>audio_context<\/span> = <\/span>new<\/span> <\/span>(<\/span>g<\/span>.<\/span>AudioContext<\/span> || <\/span>g<\/span>.<\/span>webkitAudioContext<\/span>)<\/span>;\r\n      <\/span>fire<\/span>(<\/span>'<\/span>Audio context OK<\/span>'<\/span>)<\/span>;\r\n      <\/span>\/\/<\/span> shim<\/span><\/span>\r\n      <\/span>navigator<\/span>.<\/span>getUserMedia<\/span> = <\/span>navigator<\/span>.<\/span>getUserMedia<\/span> || <\/span>navigator<\/span>.<\/span>webkitGetUserMedia<\/span>;\r\n      <\/span>fire<\/span>(<\/span>'<\/span>navigator.getUserMedia <\/span>'<\/span> + <\/span>(<\/span>navigator<\/span>.<\/span>getUserMedia<\/span> ? <\/span>'<\/span>OK<\/span>'<\/span> : <\/span>'<\/span>fail<\/span>'<\/span>)<\/span>)<\/span>;\r\n      <\/span>\/\/<\/span> use<\/span><\/span>\r\n      <\/span>navigator<\/span>.<\/span>getUserMedia<\/span>(<\/span>\r\n        <\/span>{<\/span>audio<\/span>:<\/span>true<\/span>}<\/span>,\r\n        <\/span>iCanHazUserMedia<\/span>, \r\n        <\/span>function<\/span>(<\/span>e<\/span>)<\/span>{<\/span>fire<\/span>(<\/span>'<\/span>No live audio input <\/span>'<\/span> + <\/span>e<\/span>)<\/span>;<\/span>}<\/span>\r\n      <\/span>)<\/span>;\r\n    <\/span>}<\/span> <\/span>catch<\/span> <\/span>(<\/span>e<\/span>)<\/span> <\/span>{<\/span>\r\n      <\/span>alert<\/span>(<\/span>'<\/span>No web audio support in this browser<\/span>'<\/span>)<\/span>;\r\n    <\/span>}<\/span>\r\n  <\/span>}<\/span>(<\/span>window<\/span>)<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
When the user loads the page, here's what they see:<\/p>\n
\"\"<\/p>\n
In my case I select the guitar amp and click \"Allow\" button.<\/p>\n
This little window informs me the page is using the audio input:<\/p>\n
\"\"<\/p>\n
Playing back<\/h3>\n
Now that the user has allowed audio access, let's play back the audio we receive, but pass it through a volume control.<\/p>\n
All this work happens in the iCanhazUserMedia()<\/code>, the success callback to getUserMedia<\/code>.<\/p>\n
\n
  <\/span>function<\/span> <\/span>iCanHazUserMedia<\/span>(<\/span>stream<\/span>)<\/span> <\/span>{<\/span>\r\n    \r\n    <\/span>fire<\/span>(<\/span>'<\/span>I haz live stream<\/span>'<\/span>)<\/span>;\r\n    \r\n    <\/span>var<\/span> <\/span>input<\/span> = <\/span>audio_context<\/span>.<\/span>createMediaStreamSource<\/span>(<\/span>stream<\/span>)<\/span>;\r\n    <\/span>volume<\/span> = <\/span>audio_context<\/span>.<\/span>createGainNode<\/span>(<\/span>)<\/span>;\r\n    <\/span>volume<\/span>.<\/span>gain<\/span>.<\/span>value<\/span> = <\/span>0.8<\/span>;\r\n    <\/span>input<\/span>.<\/span>connect<\/span>(<\/span>volume<\/span>)<\/span>;\r\n    <\/span>volume<\/span>.<\/span>connect<\/span>(<\/span>audio_context<\/span>.<\/span>destination<\/span>)<\/span>;\r\n    \r\n    <\/span>fire<\/span>(<\/span>'<\/span>input connected to destination<\/span>'<\/span>)<\/span>;\r\n  <\/span>}<\/span><\/pre>\n<\/div>\n
What we have here (ignoring fire()<\/code>):<\/p>\n
    \n
  1. setup an input stream from the user stream, this is the first node in the audio chain<\/li>\n
  2. setup a volume (Gain) node with initial volume 0.8 out of 1<\/li>\n
  3. connect input to volume to output\/speakers<\/li>\n<\/ol>\n
    And this is it!<\/p>\n
    Additionally an input type=range max=1 step=0.1<\/code> can change the volume via volume.gain.value = value;<\/code><\/p>\n
    Go play!<\/a> Isn't it amazing that you can now grab microphone or any other audio input and play around with it? All in JavaScript, all in the browser without any plugins.<\/p>\n
    Moar!<\/h3>\n
    This was a very basic exploratory\/primer example. For more:<\/p>\n