Playing audio from stream with HTML5

Question

I've got problem with playing audio from stream in web browser. I am streaming voice via BinaryJS as 2048-length Int16 arrays to client's browser and I am getting very noisy output. This is how I am receiving the stream:

 var 
    client,
    audioContext,
    audioBuffer,
    sourceNode,
    sampleSize = 2048,

  function main() {
    try {
        audioContext = new AudioContext();
    } catch(e) {
        alert('Web Audio API is not supported in this browser');
    }
    sourceNode = audioContext.createBufferSource();
    sourceNode.connect(audioContext.destination);

    connectClient();

    playSound();
  };

  function playSound() {

    sourceNode.start(0);    

  };

   function onError(e) {
    console.log('error' + e);
  };

  function connectClient() {
    client = new BinaryClient('ws://localhost:3000');
    client.on('open', function() {
      console.log('stream opened');

    });
    client.on('stream', function(stream, meta){
      stream.on('data', function(data){
        var integers = new Int16Array(data);
        var audioBuffer = audioContext.createBuffer(1, 2048, 4410);
        audioBuffer.getChannelData(0).set(integers);
        sourceNode.buffer = audioBuffer;
        });
      });
    };

  main();

What should I do to get clean audio?

Answer 1

I think your playback technique here is causing the noise – first of all, can you ensure that your stream event fires often enough to provide continuous data for Web Audio? If it doesn't, then the noise you hear is the pops and clicks after each bit of audio stops playing. Also, updating the data by swapping ArrayBuffers on sourceNode isn't a good idea.

I would suggest using a ScriptProcessorNode with your desired buffer size – this gives you the ability to insert raw data into the graph at audio rate, which should reduce the noise. Look at this demo to see how to set up the node, basically you just need to fill the outputBuffer with your stream data.

This will only really help if your streaming is faster than the audio rate!

Good luck,

jakub