我正在尝试使用 JavaScript 来显示波形和音频文件，但我什至不知道如何开始。我找到了Audio Data API，但不熟悉大多数音频术语，也不知道提供了什么或如何操作它。我在 JavaScript 中找到了波形示例，但它们太复杂/我无法理解发生了什么。那么我的问题是：如何使用 JavaScript 在画布上创建歌曲的波形，其背后的过程究竟是什么？
问问题
28339 次
4 回答
8
这是我的书（HTML5 Multimedia：Develop and Design）中的一些示例代码，它们正是这样做的；音频波形。它使用Mozilla 音频数据 API。
该代码只是拍摄音频数据的快照并使用它在画布上绘制。
于 2012-02-02T11:46:32.370 回答
4
这是 BBC 研发团队的一篇文章，展示了他们是如何做到这一点的，以构建几个 JS 库等等。结果似乎都是公开可用的，而且相当不错。
而不是使用音频数据 API，你不能确定所有用户的浏览器都支持它，如果你在服务器端生成波形数据可能会更好（BBC 团队创建了一个 C++ 应用程序来做到这一点）然后在至少您正在将客户端显示方面与播放方面分离。此外，请记住整个音频文件必须先到达浏览器，然后才能计算峰值并渲染波形。我不确定流文件（例如 MP3）是否可用于在文件传入时计算峰值。但总的来说，在服务器端计算一次峰值肯定会更好，然后简单地通过 JSON 发送数据（甚至创建 + 缓存您的图形服务器端 - 有许多 PHP 图表库，或者您可以使用 GD 本地完成）。
对于在浏览器上播放，有几个不错的（非 Flash！）选项。我个人喜欢SoundManager 2，因为代码与显示完全分离，这意味着我可以自由地创建我喜欢（或客户想要）的任何 UI/显示。我发现它强大且可靠，尽管我在一个项目中遇到了一些困难，同时有多个玩家在同一页面上。他们网站上的例子不是很好（恕我直言），但有了想象力，你可以做一些很酷的事情。SM2 还为古董浏览器提供可选的 Flash 后备选项。
于 2015-09-28T09:53:55.173 回答
2
我使用网络音频 api 做到了这一点，并使用了一个名为 wavesurfer 的项目。 http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html
它的作用是绘制小矩形并使用音频缓冲区来确定每个矩形的高度。在 wavesurfer 中也可以使用空格键播放和暂停，然后单击波浪开始播放。
更新：这个 POC 网站不再存在。
要查看我所做的内容，请访问此站点：更新：此 POC 网站不再存在。这仅适用于 google chrome 浏览器和 safari，但我不确定。
如果您想了解更多信息，请告诉我。
于 2013-03-14T16:05:21.837 回答
1
还没有得到很好的支持，但是看看这个 Firefox 音频发生器。
于 2012-02-02T07:47:47.720 回答