AudioContext.createMediaElementSource()

AudioContextインターフェースのcreateMediaElementSource()メソッドは、新しくMediaElementAudioSourceNode (en-US) オブジェクトを作成するために使用されます。HTML内に存在する<audio> または <video> を指定すると、そのオーディオを再生し、操作することができます。

media element audio source nodesについての詳細は、 MediaElementAudioSourceNode (en-US) を参照して下さい。

構文

var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);

引数

myMediaElement
プロセッシング・グラフで操作するための HTMLMediaElement オブジェクトです。

戻り値

MediaElementAudioSourceNode (en-US)

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

注記:  この例のデモと、ソースを見ることができます。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');

pre.innerHTML = myScript.innerHTML;

// MediaElementAudioSourceNodeを作成
// HTMLMediaElementをそこへ接続
var source = audioCtx.createMediaElementSource(myAudio);

// gain nodeを作成
var gainNode = audioCtx.createGain();

// マウスポインタのY座標と
// 画面の高さを保持するための変数を作成
var CurY;
var HEIGHT = window.innerHeight;

// マウスが動いたら新しいY座標を取得し、
// ゲインの値を設定する
document.onmousemove = updatePage;

function updatePage(e) {
    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

    gainNode.gain.value = CurY/HEIGHT;
}


// AudioBufferSourceNodeをgainNodeへ接続
// gainNodeをdestinationへ接続
// これで音楽の再生と、マウスカーソルで音量を調節できるようになる
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

注記: createMediaElementSource()を呼んだ結果として HTMLMediaElement から再生される音声はAudioContextのプロセッシング・グラフへ再度ルーティングされます。従って、createMediaElementSource()を呼んだ後も音声の再生/一時停止はmedia element API及びプレーヤーの再生/一時停止ボタンから操作できます。

仕様

仕様 状態 コメント
Web Audio API
createMediaElementSource() の定義
草案  

ブラウザの互換性

BCD tables only load in the browser

関連情報