Stream not clear

[niravjgandhi]

I am trying to record only audio using your api. There are one issue how to clear a stream without refreshing page. Because in my one HTML page there are 7 record buttons. and i not need to ask for share device on each and every click of button. for that i want to create a stream only once. and after stop i need to clear stream and record again. Please help me to do this.

[muaz-khan]

Try this demo: https://jsfiddle.net/6uac5yca/

Here is the code.

<style>
#recording-output {
    margin-top: 10px;
}

#get-user-media {
    display: none;
}
</style>

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

<button id="get-user-media">Click To Get UserMedia Once</button>

<button id="recorder1">Recorder1</button>
<button id="recorder2">Recorder2</button>
<button id="recorder3">Recorder3</button>

<hr>

<audio controls autoplay id="audio-player"></audio>

<div id="recording-output">
    <h2>Output</h2>
    <hr>
</div>

<script>
var mediaConstraints = {
    audio: true
};

var longLivingMediaStream;

function onMediaSuccess(stream) {
    longLivingMediaStream = stream;

    document.getElementById('audio-player').src = URL.createObjectURL(stream);
}

function onMediaError(e) {
    console.error('media error', e);
}

document.getElementById('get-user-media').onclick = function(callback) {
    this.disabled = true;

    navigator.getUserMedia(mediaConstraints, function(stream) {
        onMediaSuccess(stream);

        if(callback && typeof callback == 'function') {
            callback();
        }
    }, onMediaError);
};

var recorder1, recorder2, recorder3;

document.getElementById('recorder1').onclick = function() {
    if (!longLivingMediaStream) {
        var that = this;
        document.getElementById('get-user-media').onclick(function() {
            that.onclick();
        });
        return;
    }

    if (this.innerHTML === 'Stop') {
        this.innerHTML = 'Recorder1';
        recorder1.stop();
        return;
    }

    recorder1 = new MediaStreamRecorder(longLivingMediaStream);
    recorder1.mimeType = 'audio/wav';
    recorder1.ondataavailable = addAudioElement;
    recorder1.start(3 * 10000 * 10000 * 10000 * 10000); // to manually stop recording

    this.disabled = true;
    var that = this;
    setTimeout(function() {
        that.disabled = false;
        that.innerHTML = 'Stop';
    }, 2000);
};

document.getElementById('recorder2').onclick = function() {
    if (!longLivingMediaStream) {
        var that = this;
        document.getElementById('get-user-media').onclick(function() {
            that.onclick();
        });
        return;
    }

    if (this.innerHTML === 'Stop') {
        this.innerHTML = 'Recorder2';
        recorder2.stop();
        return;
    }

    recorder2 = new MediaStreamRecorder(longLivingMediaStream);
    recorder2.mimeType = 'audio/wav';
    recorder2.ondataavailable = addAudioElement;
    recorder2.start(3 * 10000 * 10000 * 10000 * 10000); // to manually stop recording

    this.disabled = true;
    var that = this;
    setTimeout(function() {
        that.disabled = false;
        that.innerHTML = 'Stop';
    }, 2000);
};

document.getElementById('recorder3').onclick = function() {
    if (!longLivingMediaStream) {
        var that = this;
        document.getElementById('get-user-media').onclick(function() {
            that.onclick();
        });
        return;
    }

    if (this.innerHTML === 'Stop') {
        this.innerHTML = 'Recorder3';
        recorder3.stop();
        return;
    }

    recorder3 = new MediaStreamRecorder(longLivingMediaStream);
    recorder3.mimeType = 'audio/wav';
    recorder3.ondataavailable = addAudioElement;
    recorder3.start(3 * 10000 * 10000 * 10000 * 10000); // to manually stop recording

    this.disabled = true;
    var that = this;
    setTimeout(function() {
        that.disabled = false;
        that.innerHTML = 'Stop';
    }, 2000);
};

function addAudioElement(blob) {
    var audio = document.createElement('audio');
    audio.controls = true;
    audio.src = URL.createObjectURL(blob);
    document.getElementById('recording-output').appendChild(audio);
    document.getElementById('recording-output').appendChild(document.createElement('hr'));
}
</script>

If you wanna disable echo:

<audio controls autoplay id="audio-player" muted></audio>

[niravjgandhi]

I tried the sample given by you in my application but i found one issue. After first button record and stop its work perfectly. Now what i speak in between first button stop and second button start are also being recorded. Did you try this at your side. And provide a solution if this is not occur at your side. If you required a code from my side i also submit.