使用MediaStreamTrack的程序音频

Question

我想编码一个视频(从画布)，并添加过程音频到它。

编码可以使用接受MediaRecorder的MediaStream来完成。

对于流，我希望使用canvas.captureStream()调用从画布中获取视频部分。

我想在流中添加一个音频轨道。但是我不想给麦克风输入，我想为那些飞行中的人生成样本，为了简单起见，让我们假设它写出了一个正弦波。

如何创建生成过程音频的MediaStreamTrack？

Answer 1

Web音频API有一个createMediaStreamDestination()方法，它将返回一个MediaStreamAudioDestinationNode对象，您可以在该对象上连接音频上下文，并允许您访问由音频上下文音频输出提供的MediaStream实例。

​

document.querySelector("button").onclick = (evt) => {
  const duration = 5;
  evt.target.remove();
  const audioContext = new AudioContext();
  const osc = audioContext.createOscillator();

  
  const destNode = audioContext.createMediaStreamDestination();
  const { stream } = destNode;
  
  osc.connect(destNode);
  osc.connect(audioContext.destination);
  osc.start(0);  
  osc.frequency.value = 80;
  osc.frequency.exponentialRampToValueAtTime(440, audioContext.currentTime+10);
  osc.stop(duration);
  
  // stream.addTrack(canvasStream.getVideoTracks()[0]);
  const recorder = new MediaRecorder(stream);
  const chunks = [];
  recorder.ondataavailable = ({data}) => chunks.push(data);
  recorder.onstop = (evt) => {
    const el = new Audio();
    const [{ type }] = chunks; // for Safari
    el.src = URL.createObjectURL(new Blob(chunks, { type }));
    el.controls = true;
    document.body.append(el);
  };
  recorder.start();
  setTimeout(() => recorder.stop(), duration * 1000);
  console.log(`Started recording, please wait ${duration}s`);
 };

<button>begin</button>

​