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 を参照して下さい。

構文

js
createMediaElementSource(myMediaElement)

引数

myMediaElement

音声処理グラフに与えて操作したい HTMLMediaElement オブジェクトです。

返値

MediaElementAudioSourceNode です。

例

以下の例では、 createMediaElementSource() を使用して <audio> から音源を作成します。再生される音源は GainNode を介し AudioDestinationNode に渡されます。マウスポインターが動くと updatePage() 関数が呼ばれ、マウスポインターの Y 座標の値をウィンドウの高さで割った比率を元に現在のゲインを計算します。また、マウスポインターを上下に動かすことで、再生している音楽の音量を上げ下げできます。

メモ: ライブで実行する例と、ソースを見ることができます。

js
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

関連情報