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 上即時檢視此示例，或研究原始碼。