如何在HTML5画布上渲染音频波形?

时间:2012-09-02 07:42:43

标签: javascript html5 canvas

我想将音频文件(ogg和/或mp3)的波形渲染到画布元素。

我想知道是否有任何库会让这个变得简单?我正在寻找这些方面的结果:http://plucked.de/

3 个答案:

答案 0 :(得分:21)

https://github.com/katspaugh/wavesurfer.js可能是您正在寻找的内容。

答案 1 :(得分:6)

如果您不想下载文件内容,则必须在服务器上准备波形图像或数据。

前段时间BBC(是的,英国媒体公司)开源的工具集来高效地完成它。所有内容都在他们的博客上进行了描述:http://www.bbc.co.uk/rd/blog/2013/10/audio-waveforms

很快:在Linux服务器端,您必须使用audiowaveform命令行工具将声音文件(FLAC,WAV或MP3)转换为基于JSON的波形插值。接下来,您将JSON数据提供给浏览器客户端,该客户端将使用waveform-data.js在canvas元素上呈现波形。

答案 2 :(得分:2)

这是MIT许可下的另一个波形js插件,但它可能特定于SoundCloud,需要额外的工作。

http://www.waveformjs.org/

相关问题