4

我真的很想创建某种均衡器/可视化器来表示来自我的<audio>标签的音频。到目前为止，我已经能够找到几个非常奇特的实验来可视化音频。它们中的大多数基于 webgl，并且仅在 chrome 中工作。我不想实现的比这简单得多，它只是一个基本的、一种颜色的 2d 可视化器，没有什么花哨的。

这与我不想实现的非常相似（中间的某种图像和侧面的可视化，非常基本，但我喜欢它；））
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 -->

页面上会有一个画布标签，它从具有特定 id 的音频标签中获取 src，在本例中为“test”。我不认为这么简单的事情应该需要使用 WebGl，而是希望使用普通画布，因此它适用于大多数支持 html5 的浏览器。我是一个javascript新手，所以我不知道从哪里开始。我提到了我之前找到的几个例子，但是查看它们的来源并没有帮助。我正在寻找没有任何复杂情况的优雅解决方案。我知道stackoverflow不是为了要求完整的代码，所以如果你能让我开始，例如解释如何与音频交互，根据正在播放的内容改变那些“均衡器棒”的大小等等......会很棒;） ) （也欢迎 jQuery 建议）

4

3 回答 3

4

您不应使用音频，而应使用 WebAudio Api。
Chrome、Safari、Firefox、Edge 处理它，但 IE 不处理。
（见这里：http ://caniuse.com/audio-api ）
当心 webaudio 在 Safari (webkit) 上带有前缀。

如果您想要更多的全球影响力，SoundManager2 可能（一个可能的）满足您的需求，因为它适用于所有具有 Flash 后备功能的浏览器：
http ://www.schillmania.com/projects/soundmanager2/

使用 WebAudio，本文解释了如何以一种非常简单的方式从任何轨道中获得频率分析：http: //joshondesign.com/p/books/canvasdeepdive/chapter12.html

于 2013-03-19T22:23:15.060 回答
1

已经出现了一个库，它可以做这部分的低级部分，称为dancer.js（它有一些杀手级的演示）。

我的方法不像您要求的那样动画，但我这样做的方式（演示，按“播放所有歌曲”）是在上传歌曲时预先生成波形，并使用 CSS（通过设置background-image波形div的. 这种方法出奇地好。

于 2013-03-19T21:09:00.627 回答
0

我创建了一个跨平台音乐均衡器，您可以在均衡开启时播放音频文件：您可以查看教程和演示并从http://www.bestofjqueryplugins.com/plugins.php?name=下载源代码jquery-音乐均衡器

于 2013-07-13T17:54:20.700 回答