MediaRecorder attaches last audio with new audio each time I record

Question

I uploaded an audio and I connected it to the video output sound on recording, on first try work just perfect, but when trying to record the canvas again it plays last audio clip and attaches new audio clip, you can check what I mean in the next example.
P.S: There is something that confuses me here is that when recording more then 1 time, if the video is ended in 4s for example, the audio keeps playing in video's background !!!

var audio, canvas, button,recorder, recording = false, y = 0, aStream, cStream,chunks=[];
function setup() {
    canvas = createCanvas(320, 200);
    audio = document.querySelector('audio');
    button = document.querySelector('button')
    button.onclick = function () {
        if (!recording) {
            startRecoring();
        }
        else {
            stopRecoring();
        }
    }

    audioGet()

    cStream = document.querySelector('canvas').captureStream(60)
    cStream.addTrack(aStream.getAudioTracks()[0]);

}
function draw() {
    clear()
    fill(255, 0, 0);
    rect(0, y, 128, 64);
    y = y + 5
    if (y > 200 - 64)
        y = 0

}
function startRecoring() {
    button.innerText = "Stop recording"
    recording = true
    audio.play()

    recorder = new MediaRecorder(cStream);
    recorder.start();
    recorder.ondataavailable = saveChunks;
    recorder.onstop = exportStream;
}
function saveChunks(e) {
    e.data.size && chunks.push(e.data);
}
function stopRecoring() {
    button.innerText = "Start recording"
    recording = false
    audio.pause()
    recorder.stop()
}
function exportStream()
{
    if (chunks.length) {

        var blob = new Blob(chunks)
        var vidURL = URL.createObjectURL(blob);
        var vid = document.createElement('video');
        vid.controls = true;
        vid.src = vidURL;
        vid.onend = function () {
            URL.revokeObjectURL(vidURL);
        }
        document.body.append(vid);
    }
}
function audioGet() {
    audio.crossOrigin = 'anonymous';
    audio.src = 'https://d1490khl9dq1ow.cloudfront.net/music/mp3preview/live-the-moment_z1XWyUBO.mp3'
    audio.load()

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

    let audioCtx = new AudioContext();
    // create a stream from our AudioContext
    let dest = audioCtx.createMediaStreamDestination();
    aStream = dest.stream;
    // connect our video element's output to the stream
    let sourceNode = audioCtx.createMediaElementSource(audio);
    sourceNode.connect(dest)
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>P5</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
    <div>
      <audio crossorigin="anonymous"></audio>
      <button>Start recording</button>
    </div>
    <script src="sketch.js"></script>
  </body>
</html>

score 0 · Answer 1 · answered May 16 '19 at 22:47

0

Never mind guys the issue was I didn't clean chunks variables on each time I want to record. All I had to do is to add this line :

function startRecoring() {
    chunks = []
    //the rest of to function
}

answered May 16 '19 at 22:47

Mostafa AGUERRAM

573
1
7
17

MediaRecorder attaches last audio with new audio each time I record

1 Answers1