AudioContext: createMediaStreamDestination() 方法

Baseline 已广泛支持

此特性已得到良好支持，可在多种设备和浏览器版本上使用。自 2021 年 4 月起，所有浏览器均已支持此特性。

AudioContext 接口的 createMediaStreamDestination() 方法用于创建一个新的 MediaStreamAudioDestinationNode 对象，该对象与一个 WebRTC MediaStream 相关联，该流代表一个音频流，可以存储在本地文件或发送到另一台计算机。

该 MediaStream 在创建节点时生成，可通过 MediaStreamAudioDestinationNode 的 stream 属性访问。此流可以与通过 navigator.getUserMedia 获取的 MediaStream 以类似的方式使用——例如，可以使用 RTCPeerConnection 的 addStream() 方法将其发送到远程对等端。

有关媒体流目标节点的更多详细信息，请查看 MediaStreamAudioDestinationNode 参考页面。

示例

在以下简单示例中，我们创建了一个 MediaStreamAudioDestinationNode，一个 OscillatorNode 和一个 MediaRecorder（因此该示例目前仅在 Firefox 和 Chrome 中有效）。MediaRecorder 设置为从 MediaStreamDestinationNode 记录信息。

单击按钮时，振荡器开始，MediaRecorder 也开始。单击停止按钮时，振荡器和 MediaRecorder 都停止。停止 MediaRecorder 会触发 dataavailable 事件，事件数据被推入 chunks 数组。之后，触发 stop 事件，创建一个类型为 opus 的新 blob——其中包含 chunks 数组中的数据，然后打开一个指向由 blob 创建的 URL 的新窗口（选项卡）。

从这里，您可以播放和保存 opus 文件。

html

<button>Make sine wave</button> <audio controls></audio>

const b = document.querySelector("button");
let clicked = false;
const chunks = [];
const ac = new AudioContext();
const osc = ac.createOscillator();
const dest = ac.createMediaStreamDestination();
const mediaRecorder = new MediaRecorder(dest.stream);
osc.connect(dest);

b.addEventListener("click", (e) => {
  if (!clicked) {
    mediaRecorder.start();
    osc.start(0);
    e.target.textContent = "Stop recording";
    clicked = true;
  } else {
    mediaRecorder.stop();
    osc.stop(0);
    e.target.disabled = true;
  }
});

mediaRecorder.ondataavailable = (evt) => {
  // Push each chunk (blobs) in an array
  chunks.push(evt.data);
};

mediaRecorder.onstop = (evt) => {
  // Make blob out of our blobs, and open it.
  const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  document.querySelector("audio").src = URL.createObjectURL(blob);
};

注意： 您可以在 GitHub 上实时查看此示例，或研究源代码。