我想使用JavaScript来展示音频文件的波形，但我甚至不知道如何入手。我找到了Audio Data API，但我对大多数音频术语不熟悉，也不知道提供了什么或如何操作它。我找到了一些JavaScript中的波形示例，但它们过于复杂/我无法理解其中的内容。那么我的问题是：如何使用JavaScript在画布上创建歌曲的波形，并且背后的过程是什么？
JavaScript中从音频中可视化波形
13
- Alex
5
根据此文，您无法这样做，不过这是相对古老的信息，因为事情可能已经发生了变化：http://mrdoob.com/blog/post/677。 - Andrew M
一个波形没有什么特别的，它的值大多在-127到+127之间。用JS编写这样一个函数不应该太复杂。你知道Open Office Calc中打印二维图表的函数吗？ - Micromega
1我知道如果你使用音频数据API（目前仅在FF4+中可用），这是可能的，我只想知道它是如何以及为什么工作的，并希望有一个更简单的实现。这里有一个演示：http://videos-origin.mozilla.org/serv/blizzard/audio-slideshow/#slide4 - Alex
啊，原来这是一个全新的API。 - Andrew M
https://dev59.com/9E7Sa4cB1Zd3GeqP4pbk#41443535 - gman
4个回答
8
- Ian Devlin
4
这篇文章来自BBC的R&D团队，展示了他们如何使用JS库等方法生成波形图。所有结果都是公开可用的，而且相当不错。
与其使用音频数据API（无法确保所有用户的浏览器都支持），还不如在服务器端生成波形数据（BBC团队创建了一个C ++应用程序来完成此项工作），这样至少就将客户端显示方面与播放方面分离开来。另外，请记住，在计算峰值和渲染波形之前，整个音频文件必须先到达浏览器。我不确定流式传输文件（例如MP3）是否可以在文件到达时用于计算峰值。但总的来说，最好在服务器端计算峰值，然后通过JSON发送数据（甚至可以在服务器端创建+缓存图形 - 有许多PHP图表库，或者您可以使用GD本地创建）。
对于在浏览器上播放，有几个非常好的（非Flash！）选项。个人而言，我喜欢SoundManager 2，因为其代码完全与显示分离，这意味着我可以自由地创建任何UI /显示（或客户端想要的）。我发现它很强大、可靠，尽管在一个项目中有多个播放器时一开始遇到了些困难。他们网站上的示例不太好（依我看），但您可以发挥想象力做出一些很酷的东西。SM2还有一个可选的Flash回退选项，适用于老式浏览器。
- Coder
2
我使用Web Audio API和一个名为Wavesurfer的项目，就像这篇文章所描述的那样。它绘制了小矩形，并使用音频缓冲区确定每个矩形的高度。在Wavesurfer中还可以使用空格键播放和暂停，并单击波形图开始播放。请注意，此POC网站已不再存在。如果您想查看我制作的内容，请访问此网站。该网站仅适用于Google Chrome浏览器，可能也适用于Safari，但我不确定。如果需要更多信息，请告诉我。
- Silver
1
目前支持不太好，但可以看看这个 Firefox 音调生成器。
- tnt-rox
1
很遗憾，FF和Chrome不一样。但我认为，得益于Chrome和Safari(?)支持Web音频API，这将会更加流行。我希望FF也能够采纳它。 - Silver
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接