可视化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