JavaScript中的波形可视化来自音频

Question

我正在尝试使用JavaScript来显示波形和音频文件，但我甚至不知道如何开始。我找到了Audio Data API，但我不熟悉大多数音频术语，并且不太了解提供的内容或如何操作它。我在JavaScript中找到了波形的例子，但它们太复杂了/我无法理解发生了什么。然后我的问题是：如何使用JavaScript在画布上创建歌曲的波形，以及它背后的过程究竟是什么？

Answer 1

以下是我的书中的一些示例代码（HTML5 Multimedia: Develop and Design)完全相同; Audio Waveform。它使用Mozilla Audio Data API。

代码只是获取音频数据的快照，并使用它在画布上绘制。

Answer 2

我通过网络音频api做到了这一点，我使用了一个名为wavesurfer的项目。 http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html

它的作用是，它绘制微小的矩形并使用音频缓冲区来确定每个矩形的高度。 waveurfer也可以使用空格键进行播放和暂停，然后点击波形开始播放。

更新：此POC网站已不存在。

要查看我制作的内容，请访问此网站： 更新：此POC网站不再存在。 这仅适用于谷歌浏览器浏览器，也可能是狩猎，但我不确定。

如果您想了解更多信息，请与我们联系。

Answer 3

Here's an article from the BBC's R&D team展示了他们如何做到这一点来构建一些JS库以及更多。结果似乎都是公开的，而且相当不错。

而不是使用您无法确定所有用户浏览器都支持的音频数据API，如果您生成波形数据服务器端（BBC团队创建了一个C ++应用程序来执行此操作）可能会更好然后至少你将客户端显示方面与播放方面分离。另外，请记住，在计算峰值并渲染波形之前，整个音频文件必须到达浏览器。我不确定流文件（例如MP3）是否可用于在文件进入时计算峰值。但总的来说，一旦计算峰值，服务器端，然后只需通过JSON发送数据肯定会更好（甚至创建+缓存您的图形服务器端 - 有许多PHP图表库，或者您可以do it natively with GD）。

要在浏览器上播放，有几个好的（非Flash！）选项。我个人喜欢SoundManager 2因为代码与显示完全分离，这意味着我可以自由地创建我喜欢的任何UI /显示（或客户想要的）。我发现它强大而可靠，尽管我在同一页面上有多个玩家的一个项目上遇到了一些初步困难。他们网站上的例子不是很好（imho），但想象力，你可以做一些很酷的事情。 SM2还为古董浏览器提供了可选的Flash后备选项。

Answer 4

尚未得到很好的支持，但请查看this Firefox tone generator。