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

nak*_*nak 16 javascript html5 canvas

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

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

nak*_*nak 22

https://github.com/katspaugh/wavesurfer.js可能正是您要找的.

  • @AinTohvri我不知道,如果你找到任何东西请分享 (2认同)

ger*_*tas 6

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

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

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