Live audio via socket.io 1.0

Question

As from socket.io website

Binary streaming

Starting in 1.0, it\'s possible to send any blob back and forth: image, audio, video.

<

Answer 1

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 recording
mediaRecorder.start();

// Stop recording after 5 seconds and broadcast it to server
setInterval(function() {
    mediaRecorder.stop()
    mediaRecorder.start()
  }, 5000);
});

// When the client receives a voice message it will play the sound
socket.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);
});

Answer 2

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 sound
socket.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);
});