How to render audio waveform on HTML5 canvas? [closed]

不羁岁月 提交于 2019-12-31 10:37:08

问题


I want to render a waveform for an audio file (ogg and/or mp3) to a canvas element.

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/


回答1:


https://github.com/katspaugh/wavesurfer.js may be what you're looking for.




回答2:


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

Shortly: on Linux server-side you have to convert sound file (FLAC, WAV or MP3) to JSON-based waveform interpolation with audiowaveform command-line tool. Next you serve the JSON data to browser client which will render waveform on canvas element with waveform-data.js.




回答3:


Here's another waveform js plugin, under the MIT license, but it might be specific to SoundCloud and need additional work.

http://www.waveformjs.org/



来源:https://stackoverflow.com/questions/12234222/how-to-render-audio-waveform-on-html5-canvas

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!