Stream MP3 Live

[ghost]

How to stream mp3 by RTCMulticonnection system ? Is possible ?

[muaz-khan]

Its similar like #215. Here is a quick simple demo broadcasting mp3 using RTCMultiConnection. I tested only in chrome, it may fail if Firefox is receiver.

<script src="//www.rtcmulticonnection.org/latest.js"></script>
<script src="//www.rtcmulticonnection.org/firebase.js"></script>

<input type="file">
<button id="openNewSessionButton" disabled>Open New Room</button><br />
<script>
var connection = new RTCMultiConnection();
connection.session = {
    audio: true,
    oneway: true
};
connection.onstream = function (e) {
    document.body.appendChild(e.mediaElement);
};

// connect to signaling gateway
connection.connect();

// open new session
document.getElementById('openNewSessionButton').onclick = function () {
    this.disabled = true;
    connection.open();
};

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var context = new AudioContext();
var gainNode = context.createGain();
gainNode.connect(context.destination);

// don't play for self
gainNode.gain.value = 0;

document.querySelector('input[type=file]').onchange = function () {
    this.disabled = true;

    var reader = new FileReader();
    reader.onload = (function (e) {
        // Import callback function that provides PCM audio data decoded as an audio buffer
        context.decodeAudioData(e.target.result, function (buffer) {
            // Create the sound source
            var soundSource = context.createBufferSource();

            soundSource.buffer = buffer;
            soundSource.start(0, 0 / 1000);
            soundSource.connect(gainNode);

            var destination = context.createMediaStreamDestination();
            soundSource.connect(destination);

            connection.attachStreams.push(destination.stream);
            connection.dontAttachStream = true;

            document.getElementById('openNewSessionButton').disabled = false;
        });
    });

    reader.readAsArrayBuffer(this.files[0]);
};
</script>
<style>input, button[disabled] { background: none;border: 1px solid rgb(226, 223, 223);color: rgb(219, 217, 217); }</style>

Demo: https://www.webrtc-experiment.com/RTCMultiConnection/stream-mp3-live.html

[blakelapierre]

Do you know if there is a way to stream it without having to decode the file on the sender's side, or to send it in a compressed form?

[ghost]

@muaz-khan Sorry for trouble, but how do I finish when playing a mp3 playing another in sequence? Example: When you finish the first mp3 play the second ...

I tried this but it still fails:

reader.onloadend = (function() {
reader.readAsArrayBuffer(this.files[1]);
});

[ghost]

and this, but it fails:

readFile(this.files[1]);

function readFile(file){
    var reader = new FileReader();
    reader.onload = (function (e) {
    // Import callback function that provides PCM audio data decoded as an audio buffer
        context.decodeAudioData(e.target.result, function (buffer) {
         // Create the sound source
        var soundSource = context.createBufferSource();

        soundSource.buffer = buffer;
        soundSource.start(0, 0 / 1000);
        soundSource.connect(gainNode);

        var destination = context.createMediaStreamDestination();
        soundSource.connect(destination);

        connection.attachStreams.push(destination.stream);
        connection.dontAttachStream = true;

        $("#openNewSessionButton").removeAttr('disabled');

        var current2 = soundSource.buffer.duration;
        var n = Math.floor(current2);
        var b = n * 1000;

        var timer = setTimeout(function(e) {

        readFile(this.files[0]);

        }, b);

     });
    });

    reader.readAsArrayBuffer(file);

};