webAudioを可視化し、オーディオとキャンバスを実装

二日前に時間がタイトなので、wavesufer.jsを直接使用需要のオーディオ波形図を表示するために会った、この2日間の時間は、私がどのようにオーディオの可視化のためのwebAudioを使用することを検討しました。

プロセスは、一般に、アレイは、次に表示されたキャンバスを用いて可視化され、ソース・データは、スペクトルアレイを解析する解析されています。

音楽はこのプロセスを繰り返し、絶えず演奏を使用すると、音楽は常に非常にクールな、暴行とスペクトルのアニメーションを得ることができます！

騒ぎ、次のコード。

1.準備

まず、さまざまなオブジェクトを取得します。

VAR AudioContext = AudioContext || webkitAudioContext;
VaRのオーディオ=のdocument.getElementById（" SND " ）;
VaRのキャンバス=のdocument.getElementById（" キャンバス" ）;
VaRの CTX = canvas.getContext（" 2D "）。

多くの方法がありますオーディオソースをロードし、地元の音楽ファイルをロードすることができ、あなたはAJAXを使用することができ、ここでのポイントは、オーディオタグを使用して簡単です。

2.オーディオおよびパーサの作成

した ATX = 新）（オーディオコンテキスト。
たソース= atx.createMediaElementSource（オーディオ）
た atx.createAnalyser）が（=分析します。

3.接続

順次に接続されている：ソース==>パーサ==>最終出力

source.connect（検光子）; 
analyser.connect（atx.destination）。

直接音を再生することができ、種々の効果に接続された中間ノードは、実装がここでビジュアルオーディオゲインの様々な、達成することができる（スピーカなど）最終的な出力源に接続され、それはパーサを必要とします。

4.可視化

ここでは、その電力値は32から32,768 2の範囲内で非ゼロでなければならない、fftSizeパーサのプロパティを言及する必要があり、デフォルト値は2048です。

高い値、より詳細なグラフィック。

= 2048 analyser.fftSize ;
 関数描画（）{
     VAR CWIDTH = canvas.width、
        cHeight = canvas.height、
         // frequencyBinCount半分fftSizeの値固定 
        audioArray = 新しい新しいUint8Array（analyser.frequencyBinCountを）;
     // 周波数解析データ、 audioArrayアレイ
    analyser.getByteFrequencyData（audioArray）;
     // 充填ヒストグラム 
    ctx.clearRect（0,0 、CWIDTH、cHeight）
     用（VARの I = 0; I <audioArray.length; I ++ ）{ 
        CTX .fillRect（I * 3、cHeight-audioArray [I]、2。、cHeight）; 
    }
    // 刷新
    requestAnimationFrameの（引き分け）。
} 
）（描きます。
audio.play（）;

ここでは、オーディオの可視化は、完全に実際には、非常に簡単です。

PS：2-4のステップボタンの最高の場所をクリックしてイベント上記の内容は、これが最新のセキュリティポリシーを持つために、Googleのブラウザです。

PS2：ブラウザのセキュリティ上の理由のうちのも言うまでもないHTTPまたはHTTPSサーバー上に置かれるべきオーディオビジュアル・ニーズ、...

最後に、（私の友人よりもはるかに良い）オーディオ・ビジュアルについて説明MDNを添付：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

余談：

少し間違っていると感じ、私はwavesuferのデフォルトの静的効果の似たようなものを実現することになっていた、結果はさわやかの動的な効果を持つ音楽プレーヤーとなり、クールはクールですが、オリジナルのアイデアから静的を修正する時間をずらし仕上がりA。

webAudioを可視化し、オーディオとキャンバスを実装

おすすめ