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のページを参照してください。
構文
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 とプレーヤーコントロールを通して行うことができます。
仕様書
| Specification |
|---|
| Web Audio API # dom-audiocontext-createmediastreamsource |