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 ⁨2021年4月⁩.

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

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

構文

createMediaStreamSource(stream)

引数

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

返値

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

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

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

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

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 とプレーヤーコントロールを通して行うことができます。