可視化html5音頻

Question

我真的很想創建某種均衡器/可視化工具來表示來自我的<audio>標記的音頻。到目前爲止，我已經能夠找到幾個非常奇特的可視化音頻實驗。他們大多數基於webgl，並且只能在chrome中工作。我想要達到的要比這要簡單得多，它只是一種基本的，一種顏色，二維可視化，沒有任何幻想。

這東西很相似，我wan't實現（在中間和可視化沿線兩側，非常基本的某種形象，但我喜歡它;））
http://www.youtube.com/watch?v=yLRyAz0WFnw

方式我希望它的工作是基於音頻標籤的SRC渲染/創建可視化，因此，例如

<audio id="test" 
src="http://api.soundcloud.com/tracks/78404260/stream?client_id=7a17129ba9cd5fff34f847e3539829b7"> 
</audio> 
<!-- Some example from sound cloud --> 

而且會在頁面上canvas標籤這需要從音頻標籤SRC與某些ID，在此案例「測試」。我不認爲這種簡單的東西應該要求使用WebGl，而是想使用普通的canvas，所以它在大多數瀏覽器都支持html5。我是一個javascript新手，所以我不知道從哪裏開始。我提到了我之前找到的幾個例子，但是看他們的來源根本沒有幫助。我正在尋找優雅的解決方案，沒有什麼複雜的事情發生。我明白，stackoverflow不是要求完整的代碼，所以如果你可以讓我開始，例如解釋如何與音頻互動，改變這些「均衡器棒」的大小取決於什麼是播放等..將是偉大的;））（jQuery的建議也歡迎）

Answer 1

您不應使用音頻，而應使用WebAudio Api。 Chrome，Safari，Firefox，Edge處理它，但IE不支持。
（請參閱：http://caniuse.com/audio-api）
當心webaudio以Safari（webkit）爲前綴。

如果你想要一個更遍及全球，SoundManager2可能是 （一個可能的）回答您的需要，因爲它適用於所有的瀏覽器 使用閃光燈回退：
http://www.schillmania.com/projects/soundmanager2/

隨着WebAudio，本文介紹瞭如何在一個非常簡單的方法獲得一個頻率分析 任何曲目： http://joshondesign.com/p/books/canvasdeepdive/chapter12.html

Answer 2

有一個圖書館已出現，這個名爲dancer.js的低槓桿部分（它有一些殺手級的演示）。

我的方法並不像您要求的那樣動畫，但我這樣做的方式（demo，按「播放所有歌曲」）是在歌曲上傳時預先生成波形，並使用CSS（通過設置波形爲div的波形爲background-image）。這種方法效果驚人。

Answer 3

我創建了一個跨平臺的音樂均衡器，可以同時均衡是在播放音頻文件：你可以看到教程和演示和下載源代碼從http://www.bestofjqueryplugins.com/plugins.php?name=jquery-music-equalizer