AudioContext: createMediaElementSource() メソッド
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.
createMediaElementSource()
は AudioContext
インターフェイスのメソッドで、新しい MediaElementAudioSourceNode
オブジェクトを作成するために使用されます。 HTML 内に存在する<audio>
または <video>
を指定すると、その音声を再生し、操作することができます。
メディア要素の音声ソースノードについての詳細は、 MediaElementAudioSourceNode
を参照して下さい。
構文
createMediaElementSource(myMediaElement)
引数
myMediaElement
-
音声処理グラフに与えて操作したい
HTMLMediaElement
オブジェクトです。
返値
例
以下の例では、 createMediaElementSource()
を使用して <audio>
から音源を作成します。再生される音源は GainNode
を介し AudioDestinationNode
に渡されます。マウスポインターが動くと updatePage()
関数が呼ばれ、マウスポインターの Y 座標の値をウィンドウの高さで割った比率を元に現在のゲインを計算します。また、マウスポインターを上下に動かすことで、再生している音楽の音量を上げ下げできます。
const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");
// MediaElementAudioSourceNodeを作成
// HTMLMediaElementをそこへ接続
const source = audioCtx.createMediaElementSource(myAudio);
// ゲインノードを作成
const gainNode = audioCtx.createGain();
// マウスポインターの Y 座標と
// 画面の高さを保持するための変数を作成
let curY;
const HEIGHT = window.innerHeight;
// マウスが動いたら新しいY座標を取得し、
// ゲインの値を設定する
document.onmousemove = updatePage;
function updatePage(e) {
curY = e.pageY;
gainNode.gain.value = curY / HEIGHT;
}
// AudioBufferSourceNode を gainNode へ接続
// gainNode を destination へ接続
// これで音楽の再生と、マウスカーソルで音量を調節できるようになる
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
メモ: createMediaElementSource()
を呼び出した結果、 HTMLMediaElement
からの音声再生は AudioContext の処理グラフに再ルーティングされます。そのため、メディアの再生/一時停止は、メディア要素 API とプレーヤコントロールを通して行うことができます。
仕様書
Specification |
---|
Web Audio API # dom-audiocontext-createmediaelementsource |
ブラウザーの互換性
BCD tables only load in the browser