title: I have an audio data stream from ffmpeg, how can I play it in a browser?
body: <p>I've been able to successfully stream live audio from my mic to my node server.  I would now like to stream that to all connected clients.  I have been trying to do it with web sockets.</p>
  
  <p>I'm streaming the audio with this command</p>
  
  <pre><code>ffmpeg -f alsa -i hw:0 -acodec mp2 -f mp3 -r 30 http://localhost:8086
  </code></pre>
  
  <p>Node gets the buffer array and I write it to all connected clients like so with the 'ws' package</p>
  
  <pre><code>// HTTP Server to accept incomming MP3 Stream (audio)
  var audioServer = require('http').createServer( function(request, response) {
  
         audioSocket.broadcast(data, {binary:true});
  
  }).listen(8086);
  
  var audioSocket = new (require('ws').Server)({port: 8088});
  audioSocket.broadcast = function(data, opts) {
  
      for( var i in this.clients ) {
          this.clients[i].send(data);
      }
  };
  </code></pre>
  
  <p>Any idea of how I can play this data on a browser?  I tried following this <a href="https://stackoverflow.com/questions/10365335/decodeaudiodata-returning-a-null-error?answertab=active#tab-top">topic</a> but the decodeAudioData() method fails.</p>
  
  <p>My client side code</p>
  
  <pre><code>node={};
  var audio = new WebSocket('ws://localhost:8088/');
  audio.binaryType = "arraybuffer";
  var context = new webkitAudioContext();
  
  audio.onmessage = function(data){
      node.buf=data.data;
      node.sync=0;
      node.retry=0;
      decode(node);
  }
  
  function syncStream(node){ // should be done by api itself. and hopefully will.
      var buf8 = new Uint8Array(node.buf); 
      buf8.indexOf = Array.prototype.indexOf;
      var i=node.sync, b=buf8;
      while(1) {
          node.retry++;
          i=b.indexOf(0xFF,i); if(i==-1 || (b[i+1] &amp; 0xE0 == 0xE0 )) break;
          i++;
      }
      if(i!=-1) {
          var tmp=node.buf.slice(i); //carefull there it returns copy
          delete(node.buf); node.buf=null;
          node.buf=tmp;
          node.sync=i;
          return true;
      }
      return false;
  }
  
  function decode(node) {
      context.decodeAudioData(node.buf,
      function(decoded){
          node.source  = context.createBufferSource();
          node.source.connect(context.destination);
          node.source.buffer=decoded; 
          node.source.noteOn(context.currentTime);
          console.log('IT WORKED!  DECODED', decoded);
      },
      function(){ // only on error attempt to sync on frame boundary
          //console.log('error');
          if(syncStream(node)) decode(node);
      });
  }
  </code></pre>