AudioContext
インターフェースのcreateMediaElementSource()メソッドは、新しくMediaElementAudioSourceNode
オブジェクトを作成するために使用されます。HTML内に存在する<audio>
または <video>
を指定すると、そのオーディオを再生し、操作することができます。
media element audio source nodesについての詳細は、 MediaElementAudioSourceNode
を参照して下さい。
構文
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);
引数
myMediaElement
- プロセッシング・グラフで操作するための
HTMLMediaElement
オブジェクトです。
戻り値
例
以下の例では、createMediaElementSource()を使用して <audio>
から音源を作成します。 再生される音源は GainNode
を介し 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() の定義 |
草案 |
ブラウザの互換性
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。
この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。
手助けしていただける場合は、こちらから!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 10.0webkit | 25.0 (25.0) | 未サポート | 15.0webkit 22 |
6.0webkit |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | 26.0 | 1.2 | ? | ? | ? | 33.0 |