AudioContext: createMediaStreamDestination() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

createMediaStreamDestination() は AudioContext インターフェイスのメソッドで、 WebRTC の MediaStream と関連付けられた MediaStreamAudioDestinationNode オブジェクトを生成します。この MediaStream はローカルファイルに格納されたり他のコンピューターに送信されたりする音声ストリームを表します。

MediaStream はノードが生成されたときに作成され、MediaStreamAudioDestinationNodeの stream プロパティを通じてアクセスすることができます。このストリームは navigator.getUserMedia で得られた MediaStream と同じような使い方ができます。例えば、RTCPeerConnection インターフェイスの addStream() メソッドでリモートの端末に送ることができます。

詳細は MediaStreamAudioDestinationNode のページを参照してください。

構文

js
createMediaStreamDestination()

引数

なし。

返値

MediaStreamAudioDestinationNode です。

例

次の簡単な例では、MediaStreamAudioDestinationNode と OscillatorNode と MediaRecorder (そのため現時点では、このサンプルは Firefox と Chrome でしか動作しません) を作成します。MediaRecorder は MediaStreamDestinationNode からの情報を記録するように設定されています。

ボタンをクリックするとオシレーター（振動子）が開始し、MediaRecorder も開始します。再びボタンを押して止めると、オシレーターと MediaRecorder の両方が停止します。MediaRecorder が停止すると dataavailable イベントが発火され、イベントデータが chunks配列にプッシュされます。その後、stop イベントが発火すると、新しい blob が opus タイプで作られます—そこには chunks配列のデータが書き込まれていて、その blob の URL を指す新しいウィンドウ（タブ）が開きます。

そこで opus ファイルの再生と保存ができます。

html
<!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) => {
        // それぞれのチャンク (blob) を配列に入れる
        chunks.push(evt.data);
      };

      mediaRecorder.onstop = (evt) => {
        // blob を作成し開く
        const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        document.querySelector("audio").src = URL.createObjectURL(blob);
      };
    </script>
  </body>
</html>

メモ: Github で実際に動作する例を閲覧したり、ソースコードを読むことができます。

仕様書

Specification
Web Audio API
# dom-audiocontext-createmediastreamdestination

ブラウザーの互換性

BCD tables only load in the browser

関連情報