AudioContext: createMediaStreamDestination() 方法

基线广泛可用

此功能已经很完善，并且可以在许多设备和浏览器版本中使用。它自 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 事件触发，一个新的 blob 作为 opus 类型创建，它包含 chunks 数组中的数据，然后打开一个新的窗口（选项卡）指向从该 blob 创建的 URL。

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>createMediaStreamDestination() demo</title>
  </head>
  <body>
    <h1>createMediaStreamDestination() demo</h1>

    <p>Encoding a pure sine wave to an Opus file</p>
    <button>Make sine wave</button>
    <audio controls></audio>
    <script>
      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);
      };
    </script>
  </body>
</html>