Live audio via socket.io 1.0 Live audio via socket.io 1.0 node.js node.js

Live audio via socket.io 1.0


This example shows you how to use the MediaRecorder to upload audio and then forward it using socket.io. This code will only broadcast after you're called mediaRecorder.stop(). You can choose to broadcast inside of ondataavailable. If you do that, you might want to pass a timeslice to mediaRecorder.start(), so that it doesn't trigger ondataavailable so often.

This solution isn't truly live, but I think it will help people who come back and find this question.

Client Code

var constraints = { audio: true };navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {    var mediaRecorder = new MediaRecorder(mediaStream);    mediaRecorder.onstart = function(e) {        this.chunks = [];    };    mediaRecorder.ondataavailable = function(e) {        this.chunks.push(e.data);    };    mediaRecorder.onstop = function(e) {        var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });        socket.emit('radio', blob);    };    // Start recording    mediaRecorder.start();    // Stop recording after 5 seconds and broadcast it to server    setTimeout(function() {        mediaRecorder.stop()    }, 5000);});// When the client receives a voice message it will play the soundsocket.on('voice', function(arrayBuffer) {    var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });    var audio = document.createElement('audio');    audio.src = window.URL.createObjectURL(blob);    audio.play();});

Server Code

socket.on('radio', function(blob) {    // can choose to broadcast it to whoever you want    socket.broadcast.emit('voice', blob);});


In the Client Code you can write setInterval() instead of setTimeout() and then recursively call mediaRecorder.start() so that every 5 seconds the blob will be emitted continuously.

setInterval(function() {        mediaRecorder.stop()        mediaRecorder.start()    }, 5000);

Client Code

var constraints = { audio: true };navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {var mediaRecorder = new MediaRecorder(mediaStream);mediaRecorder.onstart = function(e) {    this.chunks = [];};mediaRecorder.ondataavailable = function(e) {    this.chunks.push(e.data);};mediaRecorder.onstop = function(e) {    var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });    socket.emit('radio', blob);};// Start recordingmediaRecorder.start();// Stop recording after 5 seconds and broadcast it to serversetInterval(function() {    mediaRecorder.stop()    mediaRecorder.start()  }, 5000);});// When the client receives a voice message it will play the soundsocket.on('voice', function(arrayBuffer) {  var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });  var audio = document.createElement('audio');  audio.src = window.URL.createObjectURL(blob);  audio.play();});

Server Code

socket.on('voice', function(blob) {    // can choose to broadcast it to whoever you want    socket.broadcast.emit('voice', blob);});