Custom MediaStream

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);

    socket.onmessage = function (event) {
        stream.appendBuffer(new Float32Array(; // ????

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(;
    var source = context.createBufferSource();
    var buffer = context.createBuffer(1, floats.length, sampleRate);
    source.buffer = buffer;
    startAt = Math.max(context.currentTime, 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();

source.buffer = buffer;
source.loop = true;

var stream =;

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

Regarding decoding, audioContext from the window object should do the job.

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

and then

audioCtx.decodeAudioData(audioData, function(buffer) {

directly on the binary array.

Regarding communication, I’d rather use XMLHttpRequest (a low level function and old) and using the response directly.

Read More:   How to add a tooltip to an svg graphic?

This is a pretty good function made by MDM guys (I updated the url of the ogg file so you can test it directly) :

function getData() {
  source = audioCtx.createBufferSource();
  request = new XMLHttpRequest();'GET', '', true);
  request.onload = function() {
    var audioData = request.response;
    audioCtx.decodeAudioData(audioData, function(buffer) {
        myBuffer = buffer;
        songLength = buffer.duration;
        source.buffer = myBuffer;
        source.playbackRate.value = playbackControl.value;
        source.loop = true;
        loopstartControl.setAttribute('max', Math.floor(songLength));
        loopendControl.setAttribute('max', Math.floor(songLength));
      function(e){"Error with decoding audio data" + e.error});

the full source code is here :

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts