2
votes

I'm sending an encoded live audio stream (mp3 or ogg) over websockets and i want to play it with the web audio api. I read and tried several things but nothing worked so far...

I always tried to do it with the decodeAudioData Method. But this method can not handle an continuous stream. So my last approach was this:

  ws.onmessage = function (evt) {

        context.decodeAudioData(evt.data, function (decodedData) {
            source = context.createBufferSource();
            source.buffer = decodedData;
            source.start(startTime);
            source.connect(context.destination);

            startTime += decodedData.duration;
        }, 
        function(e) {
            var test = e;
        }
        );

    };

This works at least with mp3s but not very well. between the received chunks there is a very small break. so there is no fluid playback of the stream. I don't know what's the reason for that... maybe the decodedData.duration property is not accuracte enough or there is some kind of delay anywhere.

Anyway it's not working at all with ogg files. I can hear the first received chunk but the rest is ignored. Maybe this has something to do with missing headers?

Is there any other method in the web audio api to play an encoded live stream then decodeAudioData? I could not find anything...

Thanks for your help!

1

1 Answers

3
votes

Don't do this over web sockets if you can help it. Let the browser do its job and play this over HTTP. Otherwise you must reinvent everything.

If you insist on reinventing everything for some reason, you must:

  • Buffer incoming data
  • Decode that data
  • Buffer decoded data
  • Play back your decoded PCM buffers with a script node
  • Handle the times when you have buffer underruns/overruns (likely by playing back silence or dropping PCM samples)

How you do each of these items depends on your specific needs and implementation, so I would recommend splitting up the question if you get stuck on any of that.