Search code examples
audio-streaming

Stream raw audio data from server to client


I am working on an audio simulator application for the browser. It is supposed to play a WAV file(or any other raw audio binary format) to the user, but the user is capable of changing certain parameters of the signal in real time and hear the change in the already playing audio file.

The algorithm that changes the sound is proprietary and already has a working solution as a desktop app in Java, but I will have to set this up online. I am looking for a solution where most of this would be done server-side and have the client only send the parameters.

My goal is not to open for example '/something.wav' on server and play it, but to extract the audio data (which I already have) and somehow send that raw audio data to the client to play it. Is this possible and if so what is the best way to achieve it?


Solution

  • On the client, the easiest thing to do is a simple HTML5 audio tag:

    <audio src="https://your-audio-server/some-id" preload="none" controls></audio>
    

    The preload="none" prevents the audio from being buffered early. (This is live, so you don't want to be buffering data from the past for seconds or minutes until the user hits play!)

    Most browsers support WAV file playback. Therefore, all you need to do is send a WAV stream live. Your server should take this PCM input, send the appropriate headers, and then start sending PCM data. The client will buffer this for a couple seconds and then begin playback.

    That is, your server will mux to a live WAV stream and stream that output in realtime to the client. The client doesn't know or care whether it's receiving a file or a live stream.