HTML5 オーディオと Web Audio API は BFF

WebRTC とのMediaStream 統合の一環として、Web Audio API に最近、createMediaElementSource() という秘密の機能が追加されました。基本的に、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 を使用して可視化できます。メガブーム！