MediaRecorder присоединяет последнее аудио с новым аудио каждый раз, когда я записываю - PullRequest
Новая
       106

MediaRecorder присоединяет последнее аудио с новым аудио каждый раз, когда я записываю

0 голосов
/ 17 мая 2019

Я загрузил аудио и подключил его к звуковому выходу видео при записи, при первой попытке работа просто идеальная, но при попытке снова записать холст он воспроизводит последний аудиоклип и присоединяет новый аудиоклип, вы можете проверить, что яв следующем примере.
PS : меня здесь смущает то, что при записи более 1 раза, если, например, видео заканчивается в 4 с,аудио продолжает играть в фоновом режиме видео! 

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>

1 Ответ

0 голосов
/ 17 мая 2019

Неважно, ребята, проблема была в том, что я не чистил переменные чанков каждый раз, когда хочу записать.Все, что мне нужно было сделать, это добавить эту строку: 

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