WebAudio: live input

October 28th, 2012. Tagged: JavaScript, Music, WebAudio

Live input, aka getUserMedia: it exists in Chrome Canary for audio too. Great times to be a web developer, right?

Let's check it out.

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

With a guitar

I wanted to have a little trickier setup and capture guitar sound not just voice with a microphone.

As always, it was bigger hurdle to get guitar sound to the computer, than anything else JavaScript-wise.

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.

Capturing

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

So... WebAudio API saves the day.

Setting up audio context (like in the previous post), shimming getUserMedia and setting up callbacks for it:

  // for logging
  function fire(e, data) {    
    log.innerHTML += "\n" + e + " " + (data || '');
  }
 
  // globals
  var audio_context;
  var volume;
 
  // one-off initialization
  (function init(g){
    try {
      audio_context = new (g.AudioContext || g.webkitAudioContext);
      fire('Audio context OK');
      // shim
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      fire('navigator.getUserMedia ' + (navigator.getUserMedia ? 'OK' : 'fail'));
      // use
      navigator.getUserMedia(
        {audio:true},
        iCanHazUserMedia, 
        function(e){fire('No live audio input ' + e);}
      );
    } catch (e) {
      alert('No web audio support in this browser');
    }
  }(window));

When the user loads the page, here's what they see:

In my case I select the guitar amp and click "Allow" button.

This little window informs me the page is using the audio input:

Playing back

Now that the user has allowed audio access, let's play back the audio we receive, but pass it through a volume control.

All this work happens in the iCanhazUserMedia(), the success callback to getUserMedia.

  function iCanHazUserMedia(stream) {
    
    fire('I haz live stream');
    
    var input = audio_context.createMediaStreamSource(stream);
    volume = audio_context.createGainNode();
    volume.gain.value = 0.8;
    input.connect(volume);
    volume.connect(audio_context.destination);
    
    fire('input connected to destination');
  }

What we have here (ignoring fire()):

  1. setup an input stream from the user stream, this is the first node in the audio chain
  2. setup a volume (Gain) node with initial volume 0.8 out of 1
  3. connect input to volume to output/speakers

And this is it!

Additionally an input type=range max=1 step=0.1 can change the volume via volume.gain.value = value;

Go play! 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.

Moar!

This was a very basic exploratory/primer example. For more:

Tell your friends about this post: Facebook, Twitter, Google+

19 Responses

  1. We want a video!

    Related: Did you see Stuart’s performance from JSConf EU? https://www.youtube.com/watch?v=PN8Eg1K9xjE

  2. Haven;t yet started watching the 2012 vids, will do, thanks for posting them! :)

    Video?… not sure how to record screenshot and sound the browser makes (not input from microphone and such)

  3. Put up a camera showing you play guitar and take the audio from the audio-out of the computer running the browser.

  4. good idea, I also have this iShowU thing, seems it will do the job

    That video of Stuart is awesome!

  5. a video would be nice, and maybe a link to Chrome Canary along with any predictions on when all the browsers will come around.

  6. I’m not positive the place you’re getting your info, however great topic. I needs to spend some time studying much more or working out more. Thank you for excellent information I was on the lookout for this info for my mission.

  7. Hi, i feel that i noticed you visited my blog so i came to return the desire?.I am trying to in finding things to improve my site!I guess its good enough to make use of some of your ideas!!

  8. It’s a fantastic along with practical item of facts. I’m just pleased you distributed this useful facts along with us. Make sure you be us up to date this way. Thanks for expressing.

  9. Very good blog site! Do you have any tips and tips for aspiring writers? I’m wanting to begin my own blog soon but I’m a little lost on everything. Would you recommend beginning with a free platform like WordPress or opt for a paid option? There are numerous options out there that I’m entirely overwhelmed. Any ideas? Many thanks!

  10. setup an input stream from the user stream, this is the first node in the audio chain
    setup a volume (Gain) node with initial volume 0.8 out of 1
    connect input to volume to output/speakers

  11. Simply desire to say your article is as astounding. The clarity in your publish is simply nice and i could suppose you are a professional on this subject. Well along with your permission let me to grasp your feed to stay up to date with imminent post. Thank you a million and please keep up the enjoyable work.

  12. ¿Quieres que tu web sea economica y rentable?¿Quieres que te encuentren en Google?¿Quieres Crear una Red Social?. En DUGAGE es posiblediseño web, redes sociales, posicionamiento, aplicaciones web, diseño web sevilla, creacion redes sociales, posicionamiento web, seo, posicionamiento web sevilla, paginas web sevilla, aplicaciones web sevilla

  13. ¿Quieres que tu web sea economica y rentable?¿Quieres que te encuentren en Google?¿Quieres Crear una Red Social?. En DUGAGE es posible
    diseño web, redes sociales, posicionamiento, aplicaciones web, diseño web sevilla, creacion redes sociales, posicionamiento web, seo, posicionamiento web sevilla, paginas web sevilla, aplicaciones web sevilla

  14. Pobe instalaciones se caracteriza por su enorme versatilidad en el sector del montaje industrial, enfocados principalmente a la fabricación/reparación/modificación de instalaciones de tuberías para fluidos. Así como el mantenimiento de equipos y su instrumentación
    proyectos e instalaciones industriales, instalaciones de gases especiales, instalaciones tecnicas de gases, instalaciones tecnicas, mantenimiento industriales, montaje reparacion y mantenimiento industriales

  15. Parafarmacia Online 24 horas
    belleza,parafarmacia,cremas,24horas,salud,cosmetica,nutricion

  16. Psicoelva. Centro de Psicologia en Huelva. Teléfono: 633 38 58 93″
    psicologos en huelva, consulta de psicologia, centro de psicologia en huelva, terapia en huelva, terapia de pareja en huelva, psicologo infantil en huelva

  17. Consultor Independiente especializado en el Sector del Vending. Gratuito.
    vending, vending café, maquinas de café, maquinas expendedoras de café, maquinas de café para oficinas, expendedoras de café, café en oficinas, maquinas de cafés para salas de esperas.

  18. Hi, I am trying to make this thing work but whenever I use my built in laptop mic it gives this high frequency sound. Why so?

  19. Nice work.. You are doing great.

Leave a Reply