Receive direct streaming audio from NodeJS server to clients

Question

I need to have real-time streaming audio from one client to a server to several listener clients.

Currently, I have a recording from a client that is running and transmitting audio through socket.io to the server. The server receives this data and must transmit audio (also via socket.io?) To clients who want to listen to this stream. This should be as real as possible (minimize delay).

I use GetUserMedia to record a microphone (browser compatibility is not important here). I want clients to use the HTML5 audio tag to listen to the stream. The data received on the server are chunks (currently packed in 700), packed in blob with type audio / wav.

This is my code to send to the server:

mediaRecorder.ondataavailable = function(e) { this.chunks.push(e.data); if (this.chunks.length >= 700) { this.sendData(this.chunks); this.chunks = []; } }; mediaRecorder.sendData = function(buffer) { blob = new Blob(buffer, { 'type' : 'audio/wav' }); socket.emit('voice', blob); } 

On the server, I can send pieces to the client just like this:

 socket.on('voice', function(blob) { socket.broadcast.emit('voice', blob); }); 

On the client, I can play like this:

 var audio = document.createElement('audio'); socket.on('voice', function(arrayBuffer) { var blob = new Blob([arrayBuffer], { 'type' : 'audio/wav' }); audio.src = window.URL.createObjectURL(blob); audio.play(); }); 

This works for the first drop of pieces that I am sending, but you are not allowed to change to audio.src to a new URL source so that this is not a working solution.

I think I need to create some kind of stream on the server that I can put in the HTML5 audio tag on the listening clients, but I don’t know how to do it. The resulting droplets with pieces should be added to this stream in real time.

What is the best way to do this? Am I doing this right from the client microphone to the server?

Answer 1

Dynamically, you can change the audio src as follows (provided you type mp3):

 <audio id="audio" controls="controls"> <source id="mp3Source" type="audio/mp3"></source> Your browser does not support the audio format. </audio> 

Call the following function whenever a socket event is received:

 function updateSource() { var audio = document.getElementById('audio'); var source = document.getElementById('mp3Source'); source.src= <blob>; audio.load(); //call this to just preload the audio without playing audio.play(); //call this to play the song right away } 

Answer 2

I'm a little late to the party here, but it looks like the web audio API will be your friend here if you haven't finished it yet. It allows you to play an audio stream directly to an output device without loading it with an audio element.

I look at what I am doing the same, and your question answered my question - how to get data from the client to the server. The advantage of the web audio API is the ability to add streams together and apply sound effects to it on the server.

MDN Web Audio API

Io events should replace the data in the audio buffer object in audio conferencing. Audio processing can occur in the context of a nodeJS web audio web before releasing it as a single stream for each client.