Javascript 如何在 HTML5 画布上渲染音频波形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12234222/
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
How to render audio waveform on HTML5 canvas?
提问by nak
I want to render a waveform for an audio file (ogg and/or mp3) to a canvas element.
我想将音频文件（ogg 和/或 mp3）的波形渲染到画布元素。
I was wondering if there were any libraries that would make this simple? I am looking for a result along these lines: http://plucked.de/
我想知道是否有任何图书馆可以使这变得简单？我正在寻找这些方面的结果：http: //plucked.de/
回答by nak
https://github.com/katspaugh/wavesurfer.jsmay be what you're looking for.
回答by gertas
If you don't want to download content of the file then waveform image or data must be prepared on server.
如果您不想下载文件内容，则必须在服务器上准备波形图像或数据。
Some time ago BBC (yes, UK media company) open-sourced set of tools to do it efficiently. All is described on their blog: http://www.bbc.co.uk/rd/blog/2013/10/audio-waveforms
前段时间 BBC（是的，英国媒体公司）开源了一套工具来有效地做到这一点。所有在他们的博客上都有描述：http: //www.bbc.co.uk/rd/blog/2013/10/audio-waveforms
Shortly: on Linux server-side you have to convert sound file (FLAC, WAV or MP3) to JSON-based waveform interpolation with audiowaveformcommand-line tool. Next you serve the JSON data to browser client which will render waveform on canvas element with waveform-data.js.
很快：在 Linux 服务器端，您必须使用audiowaveform命令行工具将声音文件（FLAC、WAV 或 MP3）转换为基于 JSON 的波形插值。接下来，您将 JSON 数据提供给浏览器客户端，浏览器客户端将使用波形数据.js在画布元素上呈现波形。
回答by Why
Here's another waveform js plugin, under the MIT license, but it might be specific to SoundCloud and need additional work.
这是另一个波形 js 插件，在 MIT 许可下，但它可能特定于 SoundCloud，需要额外的工作。
