WebRTC との MediaStream の統合の一環として、Web Audio API は最近、createMediaElementSource()
という隠れた gem を導入しました。基本的には、HTML5 <audio>
要素を API への入力ソースとしてフックできます。わかりやすく説明すると、HTML5 オーディオの可視化、リアルタイムのサウンド ミューテーション、フィルタリングなどを行うことができます。
通常、Web Audio API は XHR2 やファイル入力などを介して曲を読み込むことで機能しますが、何もしなくてもこのフックによって HTML5 <audio>
と Web Audio API の可視化、フィルタ、処理能力を組み合わせることができます。
<audio>
との統合は、かなり長い音声アセットをストリーミングする場合に最適です。ファイルの長さが 2 時間であるとします。全体をデコードしたくはありません。また、再生/一時停止/シーク用の高レベルのメディア プレーヤー API(および UI)を構築し、さらに別の処理/分析を適用したい場合にも役立ちます。
画面のサンプルを次に示します。
// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
// Our <audio> element will be the audio source.
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
// ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);
コードに記載されているように、window.onload
の後にソースのセットアップを行う必要があるバグがあります。
次の論理的ステップでは、crbub.com/112367 を修正します。子犬の準備ができたら、WebRTC(具体的には navigator.getUserMedia()
API)を接続して音声入力(マイク、ミキサー、ギターなど)を <audio>
タグに接続し、Web Audio API を使用して可視化できます。メガブーム!