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

Eric Bidelman 氏

メディアソース要素のデモ
デモ

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 を使用して可視化できます。メガブーム!