0

我上传了一个音频并将其连接到录制时的视频输出声音，第一次尝试工作非常完美，但是当尝试再次录制画布时，它会播放最后一个音频剪辑并附加新的音频剪辑，你可以检查我的意思下一个例子。
PS：这里让我感到困惑的是，当录制超过 1 次时，如果视频以 4s 结束，例如，音频会在视频的背景中继续播放！！！ 

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>

4

1 回答 1

0

没关系，伙计们，问题是我每次想要记录时都没有清理块变量。我所要做的就是添加这一行：

function startRecoring() {
    chunks = []
    //the rest of to function
}
于 2019-05-16T22:47:50.943 回答