Custom MediaStream

Question

I'm receive raw float32 audio through websockets and would like to playback this in the browser. From my understanding I would need to to use MediaStream API for this. However, I cannot find a way to create a MediaStream which I can append data buffers to.

What is the proper way to achieve this?

I'm trying something like this:

    var context = new AudioContext();      context.sampleRate = 48000;      var stream = null; // ????      var source = context.createMediaStreamSource(stream);     source.connect(context.destination);     source.start(0);      socket.onmessage = function (event) {         stream.appendBuffer(new Float32Array(event.data)); // ????     }; 

Answer 1

You should use the AudioBuffers to read sound from the buffers from the websocket and play it.

var context = new AudioContext(); var sampleRate = 48000; var startAt = 0;  socket.onmessage = function (event) {     var floats = new Float32Array(event.data);     var source = context.createBufferSource();     var buffer = context.createBuffer(1, floats.length, sampleRate);     buffer.getChannelData(0).set(floats);     source.buffer = buffer;     source.connect(context.destination);     startAt = Math.max(context.currentTime, startAt);     source.start(startAt);     startAt += buffer.duration; }; 

This plays the music from a websocket.

To convert an AudioBuffer into a MediaStream, use AudioContext.createMediaStreamDestination(). Connect the BufferSource to it to make the custom MediaStream based on the buffer's data.

var data = getSound(); // Float32Array; var sampleRate = 48000; var context = new AudioContext();  var streamDestination = context.createMediaStreamDestination(); var buffer = context.createBuffer(1, data.length, sampleRate); var source = context.createBufferSource();  buffer.getChannelData(0).set(data); source.buffer = buffer; source.connect(streamDestination); source.loop = true; source.start();  var stream = streamDestination.stream; 

This reads audio from the data array and converts it into a MediaStream.