MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

AudioContext.createMediaElementSource()

この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

構文

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

引数

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

戻り値

MediaElementAudioSourceNode

以下の例では、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() の定義
草案  

ブラウザの互換性

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

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: 676Masanori, moutend
 最終更新者: 676Masanori,