AudioContext: createMediaStreamSource() メソッド

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.

createMediaStreamSource() は AudioContext インターフェイスのメソッドで、指定のメディアストリームから（言い換えると navigator.getUserMedia インスタンスから） MediaStreamAudioSourceNode オブジェクトを生成します。ここからの音声は再生や編集ができます。

メディアストリームの音声ソースノードの詳細はMediaStreamAudioSourceNodeのページを参照してください。

構文

js
createMediaStreamSource(stream)

引数

stream

操作のために音声グラフに加えたい MediaStream オブジェクト。

返値

指定したソースストリームから取得したメディアを持つ音声ノードを表す新しい MediaStreamAudioSourceNode オブジェクトです。

例

この例では、メディア（音声＋映像）ストリームを navigator.getUserMedia から獲得し、それを <video> 要素に渡し、映像は再生しますが音声は再生しないようにします。音声は MediaStreamAudioSourceNode に渡します。次に、音声をローパスフィルター BiquadFilterNode （低音を強めるように働きます）に渡し、そして AudioDestinationNode に渡します。

<video> 要素の下のスライダーはローパスフィルターの増幅量を操作します—スライダーで値を大きくすると、より低音が強くなります。

メモ: この例の実行とソースの閲覧もできます。

js
const pre = document.querySelector("pre");
const video = document.querySelector("video");
const myScript = document.querySelector("script");
const range = document.querySelector("input");

// getUserMediaのブロック - ストリームを得る
// MediaStreamAudioSourceNodeに渡す
// 映像はvideo要素に出力する

if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) => {
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
        video.muted = true;
      };

      // MediaStreamAudioSourceNode を生成し、
      // それに HTMLMediaElement を渡す
      const audioCtx = new AudioContext();
      const source = audioCtx.createMediaStreamSource(stream);

      // 二次フィルターを生成する
      const biquadFilter = audioCtx.createBiquadFilter();
      biquadFilter.type = "lowshelf";
      biquadFilter.frequency.value = 1000;
      biquadFilter.gain.value = range.value;

      // AudioBufferSourceNode を gainNode に、
      // そして gainNode を destination に接続する
      // これでマウスを動かすことで音楽のボリュームを調整することができる
      source.connect(biquadFilter);
      biquadFilter.connect(audioCtx.destination);

      // マウスが動いたとき新しい座標を得る
      // そして増幅量を更新する

      range.oninput = () => {
        biquadFilter.gain.value = range.value;
      };
    })
    .catch((err) => {
      console.log(`The following gUM error occurred: ${err}`);
    });
} else {
  console.log("getUserMedia not supported on your browser!");
}

// pre 要素にスクリプトを書き出す

pre.innerHTML = myScript.innerHTML;

メモ: createMediaStreamSource() を呼び出した結果、メディアストリームからの音声再生は AudioContext の処理グラフに再ルーティングされます。そのため、ストリームの再生/一時停止は、メディア要素 API とプレーヤーコントロールを通して行うことができます。

仕様書

Specification
Web Audio API
# dom-audiocontext-createmediastreamsource

ブラウザーの互換性

BCD tables only load in the browser

関連情報