0

我在 vanilla 客户端 JavaScript 中制作了一个小绘图动画器，人们可以在画布上绘图，将帧添加到数组中，然后为它们设置动画。然后我决定我希望人们能够在他们的视频中添加音频。经过很多不同的网站和教程（因为没有什么是我想要的，所以我不得不即兴创作），我最终得到了这个：

function animate() {
  vids.push(frames)
  let num = 0;
  ctx.clearRect(0,0,canvas.width,canvas.height);
  videoRecorder.start();
  let interval = window.setInterval(()=>{
    if (num < frames.length){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.putImageData(frames[num],0,0)
    }
    num ++;
    if (num > frames.length) {
      window.clearInterval(interval)
      videoRecorder.stop();
      let btn = document.createElement('button');
      btn.textContent = "Record audio for this animation";
      btn.addEventListener('click',async(e) =>{
        navigator.mediaDevices.getUserMedia({ audio: true }).then(audioStream=>{
          videoStream.addTrack(audioStream.getAudioTracks()[0]);
          btn.remove();
          animate();
        })
      })
      document.getElementById('video').append(btn);
    }
  },1000/framerate)
}

当它起作用时我真的很兴奋，因为正如我所说，我找不到任何人在没有图书馆的情况下完全做到这一点。所以当然，因为我想玩我的新玩具，而且只是为了更加确定它确实有效，所以我又做了一次。我的浏览器告诉我我正在录制，就像第一个视频一样，但随后生成的视频就像我实现音频之前的视频一样静音。我重新加载了页面，它又可以工作了，但只工作了一次。我想知道是不是我不小心切换了是否添加了曲目，所以我又试了几次。第三次或第四次也没有用，只有一次。这段代码中是否有一些不能多次工作的东西？

4

0 回答 0