来自音频的 JavaScript 波形可视化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6170169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Waveform visualization in JavaScript from audio
提问by Alex
I'm trying to use JavaScript to display the waveform for and audio file, but I don't even know how to get started. I found the Audio Data API, but am unfamiliar with most audio terms and don't really know what is provided or how to manipulate it. I found examples of waveforms in JavaScript, but they are too complicated/I can't comprehend what is going on. Then my question is: how can you use JavaScript to create a waveform of a song on canvas, and what exactly is the process behind it?
我正在尝试使用 JavaScript 来显示音频文件的波形，但我什至不知道如何开始。我找到了Audio Data API，但不熟悉大多数音频术语，也不知道提供了什么或如何操作它。我在 JavaScript 中找到了波形示例，但它们太复杂了/我无法理解发生了什么。那么我的问题是：如何使用 JavaScript 在画布上创建歌曲的波形，其背后的过程究竟是什么？
回答by Ian Devlin
Here's some sample code from my book (HTML5 Multimedia: Develop and Design)that does exactly that; Audio Waveform. It uses the Mozilla Audio Data API.
这是我的书（HTML5 多媒体：开发和设计）中的一些示例代码，正是这样做的；音频波形。它使用Mozilla 音频数据 API。
The code simply takes snapshots of the audio data and uses it to draw on the canvas.
该代码只是获取音频数据的快照并使用它在画布上进行绘制。
回答by Silver
I did just that with the web audio api and I used a project called wavesurfer. http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html
我使用网络音频 api 做到了这一点，并使用了一个名为 wavesurfer 的项目。 http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html
What it does is, it draws tiny rectangles and uses an audio buffer to determine the height of each rectangle. Also possible in wavesurfer is playing and pausing using space bar and clicking on the wave to start playing at that point.
它的作用是绘制小矩形并使用音频缓冲区来确定每个矩形的高度。在 wavesurfer 中也可以使用空格键播放和暂停，然后单击 wave 开始播放。
Update: This POC website no longer exists.
更新：此 POC 网站不再存在。
To check out what I made go to this site: Update: This POC website no longer exists. This only works in a google chrome browser and maybe safari but I'm not sure about that.
要查看我所做的内容，请访问此站点：更新：此 POC 网站不再存在。这仅适用于 google chrome 浏览器和 safari，但我不确定。
Let me know if you want more info.
如果您需要更多信息，请告诉我。
回答by Coder
Here's an article from the BBC's R&D teamshowing how they did exactly that to build a couple of JS libraries and more besides. The results all seem to be openly available and rather good.
这是 BBC 研发团队的一篇文章，展示了他们是如何做到这一点的，以构建几个 JS 库以及更多其他库。结果似乎都是公开可用的，而且相当不错。
Rather than use the Audio Data API, which you cannot be sure is supported by all your users' browsers, it might be better if you generate your waveform data server-side (the BBC team created a C++ app to do that) and then at least you are decoupling the client-side display aspect from the playback aspect. Also, bear in mind that the entire audio file has to reach the browser before you can calculate peaks and render a waveform. I am not sure if streaming files (eg MP3) can be used to calculate peaks as the file is coming in. But overall it is surely better to calculate your peaks once, server-side, then simply send the data via JSON (or even create + cache your graphics server-side - there are numerous PHP chart libraries or you can do it natively with GD).
与其使用无法确定所有用户的浏览器都支持的音频数据 API，不如在服务器端生成波形数据（BBC 团队为此创建了一个 C++ 应用程序），然后在至少您将客户端显示方面与播放方面分离。另外，请记住，在计算峰值和渲染波形之前，整个音频文件必须到达浏览器。我不确定流文件（例如 MP3）是否可用于在文件传入时计算峰值。但总的来说，在服务器端计算一次峰值肯定会更好，然后只需通过 JSON 发送数据（甚至创建 + 缓存您的图形服务器端 - 有许多 PHP 图表库，或者您可以使用 GD 本地完成）。
For playback on the browser, there are several good (non-Flash!) options. Personally I like SoundManager 2as the code is completely decoupled from display, meaning that I am free to create whatever UI / display that I like (or that the client wants). I have found it robust and reliable although I had some initial difficulty on one project with multiple players on the same page. The examples on their site are not great (imho) but with imagination you can do some cool things. SM2 also has an optional Flash fallback option for antique browsers.
对于在浏览器上播放，有几个不错的（非 Flash！）选项。我个人喜欢SoundManager 2，因为代码与显示完全分离，这意味着我可以自由地创建我喜欢（或客户想要）的任何 UI/显示。我发现它强大且可靠，尽管我在一个项目中有多个玩家在同一页面上遇到了一些最初的困难。他们网站上的例子不是很好（恕我直言），但是通过想象力你可以做一些很酷的事情。SM2 还为古董浏览器提供了一个可选的 Flash 后备选项。
回答by tnt-rox
Not well supported yet but take a look at this Firefox tone generator.
还没有得到很好的支持，但看看这个 Firefox 音调生成器。
