今日のHTML5は、脚本が脚本家にさえ知られていないシリーズであり、ほとんど既製の章とドラフトスケッチの章があり、将来の物語のためのメモがあります。
オーディオの視覚化、またはオーディオ情報への基本的な低レベルのアクセスは、大まかなドラフトと将来のためのメモの間のどこかにあります。
<audio>できることとできないこと
< audio > HTML5要素は、おそらく既に推測されているように、それ自体では低レベルAPIを提供しません。 オーディオストリームの再生のみを制御できます：再生の開始、一時停止、停止、現在の位置とコンポジションの合計時間の確認。実際、私はこれらが唯一の問題と困難ではないことを正直に言わなければなりません-複数のオーディオストリームを使用して何らかの種類の複雑なアプリケーションを作成し、それらを同期する必要がある場合、ほぼ確実に実装に問題が発生します。
さらに、これは仕様によって提供される機能だけでなく、特定のブラウザーでの実装にも大きく依存します-HTML5のAngry BirdsをChrome向けに最適化するRovioとGoogleが、音声に音声要素を使用するという考えを捨てたのは偶然ではありませんHTML5 代わりに、HTML5のAngry BirdsはFlashを使用します。 （ 開発者ブログの議論も参照してください。）
<audio>要素のトピックをより深く理解するために、 HTML5でオーディオを操作するための基本的なテクニックを説明するHTML5 <audio>のパワーをアンロックする記事もお勧めします。
音抽出基準
現在、 W3C Audioグループ内で、オーディオストリームにアクセスするための低レベルAPIの作成作業が既に進行中です。
開発されたAPIは、オーディオストリームへの低レベルアクセスを可能にするだけでなく、その場でオーディオを合成します。
オーディオAPIは、オーディオサンプルの読み取り、オーディオデータの書き込み、サウンドの作成、および最小のレイテンシでクライアント側のオーディオ処理と合成を実行するためのメソッドを提供します。 また、スクリプトで直接低レベルの操作を行うために、PCMオーディオストリームへのプログラムによるアクセスを追加します。
今日、MozillaとGoogleはすでに、オーディオ情報にアクセスするための独自のバージョンのAPIを提供しています。
Mozilla Audio Data APIは、読み取りおよび書き込み用のオーディオストリームへの簡単なアクセスを提供します。リアルタイムオーディオ処理アルゴリズムを実装するタスクは、スクリプト側（JavaScript）で解決する必要があります。 GoogleのWeb Audio APIであるWebkitの仕様は、基本的な処理タスクをブラウザでネイティブに実行できる高レベルのAPIを提供します。
W3Cワーキンググループは、より多くの機能を提供する2層APIを提供する一般的なアプローチに取り組んでいます。
ところで、オーディオを操作するためのクライアントAPIに加えて、グループの活動領域には、マイクやその他の音源を含むオーディオデバイスにアクセスするタスク、およびマルチチャンネルモードを含むスピーカーを操作するタスクも含まれます。
Twitter @ w3caudioでグループのニュースをフォローしてください。
しかし、これがすべての歌詞です。練習しましょう！
実用的なアプローチ：今日は何が効果的ですか？
現在実用的なアプローチは前処理です。はい、はい！ それはとてもつまらないです。 再生されたオーディオストリームと同期した視覚化の後続の生成によるオーディオ情報の前処理。
実際、情報のセマンティック抽出（歌の歌詞など）について話している場合、前処理が唯一の実用的な方法であり、原則として、この処理はペンで行われます。
一般に、オーディオファイルとレンダリングエンジンが事前にわかっている場合、前処理は良い方法であるだけでなく、唯一の合理的な方法であり、コンピューティングリソースを節約し、クライアントマシンの負荷を軽減します。
仕組みを見てみましょう。
実例：雨の中のシェル
Chell in the Rainは、曲Exile Vilifyの美しいオーディオテキストの視覚化です。 オーディオストリームと同期して、歌詞の単語が画面に表示されます。
中身は何ですか
仕組み
オーディオの初期化とイベントハンドラーをスキップして再生を制御します。
歌全体は、アニメーションの特定のフレーズまたはステージの開始に対応する断片に事前にbeatられます。 各フラグメントの先頭は配列に保存されます：
var timings = newArray(); timings[0] = 11.5; timings[1] = 17; timings[2] = 24; timings[3] = 29; timings[4] = 35.5; ...
歌詞から別々に保存されたフレーズの配列：
var lyrics = newArray(); lyrics[0] = 'Exile'; lyrics[1] = 'It takes your mind... again'; lyrics[2] = "You've got sucker's luck"; lyrics[3] ='Have you given up?'; ...
タイミングを参照し、オーディオ構成の現在の瞬間に基づいて、新しいフレーズに切り替えるトリガーがトリガーされます。
if(event.jPlayer.status.currentTime >= timings[currentTrigger] && nolyrics != true) { fireTrigger(currentTrigger); currentTrigger++; }
次に、適切なタイミングで1つまたは別のトリガーが起動され、jQueryを使用して適切なアニメーションが起動されます。
function fireTrigger(trigger) { switch (trigger) { case 0: $('#lyrics1 p').addClass('vilify').html(lyrics[0]).fadeIn(1500); break; case 1: $('#lyrics2 p').html(lyrics[1]).fadeIn(1000).delay(5000).fadeOut(1000); $('#lyrics1 p').delay(6000).fadeOut(1000); break; case 2: $('#lyrics1 p').fadeIn(1000); break; case 3: $('#lyrics2 p').fadeIn(1000).delay(4000).fadeOut(1000); $('#lyrics1 p').delay(5000).fadeOut(1000); break; case 4: $('#lyrics1 p').removeClass('vilify').html(lyrics[2]).fadeIn(1000); break; case 5: $('#lyrics2 p').html(lyrics[3]).fadeIn(1000).delay(3000).fadeOut(1000); $('#lyrics1 p').delay(4000).fadeOut(1000); break; ...
とてもシンプルで効果的です、同意してください！ このストーリー全体で最も重要なことは、オーディオストリームをHTML、CSS、およびJavaScriptの機能と簡単に組み合わせることができることです。
人生の例：音楽は楽しくなる
Music Can Be Funは、芸術と音楽が交差するミニゲームです。 何が議論されるかが明確になるように、まず少しプレイすることをお勧めします;）
この例はより複雑です-ここではCanvas機能がすでに積極的に使用されていますが、音楽コンポーネントのみに関心があるため、すべてがそれほど怖いわけではありません！
前のケースのように、ここで作曲に沿って歌のテキストが再現され、対応する時間参照がJSコードの荒野で縫われます：
var _lyrics = [ ["00:17.94", "00:22.39", "When I have once or twice"], ["00:23.93", "00:30.52", "Thought I lived my life .. for"], ["00:40.74", "00:47.38", "Oh oh I'll wake up in a thousand years"], ["00:48.40", "00:52.06", "With every ghost I'm looking through"], ["00:53.33", "00:57.80", "I was a cold, cold boy"], ["00:59.52", "01:03.00", "Hey! Oh when I lie with you"], ...
テキストに加えて、おもちゃを演奏した場合、音楽の構成とそれに対応するトランジションにも関連する特殊効果に気付かずにはいられません。 バインドはまったく同じ方法で行われます。
var _effects = [ ["00:06.00", 1], ["00:30.50", 1], ["00:42.50", 1], ["00:54.50", 2], ["00:57.00", 1], ...
（実際、青と赤のボールの出現頻度さえも時間に関係しています;）
再生の瞬間（onTimeUpdateイベント）を更新すると、特定の視覚化が適用されます。
var _onTimeUpdate = function() { var t = MusicManager.currentTime = _song.currentTime; ... for (var i = _lyricsId; i < _lyrics.length; i++) { if (MusicManager.currentTime < _lyrics[i][0]) break; if (MusicManager.currentTime < _lyrics[i][1]) { SubtitleManager.changeSubtitle(_lyrics[i][2]); } else { SubtitleManager.changeSubtitle(""); _lyricsId++; } } for (var i = _effectsId; i < _effects.length; i++) { if (MusicManager.currentTime < _effects[i][0]) break; MusicManager.isEffect1Used = false; MusicManager.isEffect2Used = !_effects[i][1] == 2; _effectsId++; } } ... }
まだシンプルで効果的です。 同じ手法は、テキスト情報だけでなく、さまざまな視覚効果にも簡単に適用できます。
後者をなんらかの方法で自動化できるかどうかはまだ理解されていないため、ペンではまったく何も行われません。 明らかに、あなたはできる-そして彼のブログのGrant Skinnerはそれを行う方法を教えてくれます;）
実例：データマイニング
ソースコード付きHTML5 / JSのミュージックビジュアライザーのブログ投稿で、 GrantはHTML5を使用してオーディオをレンダリングした経験を共有しています。
HTML5 Audioは、再生中の曲に関する低レベルのデータを抽出するAPIを提供しないという事実に直面して、Grantは小さなAIRアプリケーション （アーカイブにもサンプルが含まれています）を作成しました。これにより、テキスト形式または画像としてmp3ファイルから音声レベルに関する情報を抽出できます。
拡大すると 、楽曲に関する情報は次のようになります。
この形式のデータがあれば、たとえばCanvasを使用して簡単に抽出できます。 テキスト形式では、さらに簡単です（テキストファイル内のデータがパックされているため、例を示しません）。
このような前処理されたデータを処理するために、Grantは特別なJavaScriptライブラリ（アーカイブ内のVolumeData.js）を作成しました。
ライブラリの操作は非常に簡単です。 すべては、曲情報のダウンロードから始まります。
loadMusic("music.jpg");
ここで、loadMusic関数内で、ご想像のとおり、通常の画像がロードされます。
function loadMusic(dataImageURL) { image = new Image(); image.src = dataImageURL; playing = false; Ticker.addListener(window); }
必要なすべてのコンポーネントを読み込んだ後、画像から音声データが抽出されます。
volumeData = newVolumeData(image);
さらに、適切なタイミングで、このデータから、平均化された情報と左右のチャンネルのサウンドレベルに関する情報の両方を取得できます。
var t = audio.currentTime; var vol = volumeData.getVolume(t); var avgVol = volumeData.getAverageVolume(t-0.1,t); var volDelta = volumeData.getVolume(t-0.05); volDelta.left = vol.left-volDelta.left; volDelta.right = vol.right-volDelta.right;
視覚効果はこのデータに関連付けられています。 視覚化には、 EaselJSライブラリーが使用されます。
これが実際にどのように機能するかは、 スターフィールドとアトミックの例で確認できます。