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

関連情報