AudioContext: createMediaStreamSource() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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 とプレーヤーコントロールを通して行うことができます。