Search code examples
html5-audiolive-streamingpcmmedia-source

How to live-stream raw PCM through HTML5 audio element


I have a .NET web application where I am receiving in my C# controller real-time audio from another application in the form of raw PCM bytes. I would like to stream this audio real-time through the HTML5 audio element. It's no problem adding wav header to the raw PCM bytes, and stream the data through the audio element as audio/wav.

The problem, as similarly stated in another post, is that the buffering amount tends to be way too much for what is supposed to be "real-time" streaming. The audio doesn't begin playing until about 25 seconds worth of data is read (which takes about 5-6 seconds).

I've looked into using MSE (Media Source Extensions) to be able to manually handle the buffering amount. But it does not seem to support wav format currently (source).

Changing the data to a more supported format like mp3 by encoding the data real-time within C# has had its own caveats (i.e. padding 0-bytes), so I would like to avoid this if possible.

Is there a viable way around this until MSE adds support for pcm/wav?


Solution

  • You can use the ScriptProcessorNode in the Web Audio API to play arbitrary PCM samples at very low latency. Then, you can manage the buffering however you want.

    Just convert your samples to 32-bit floating point at ±1.0.