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

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/

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

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.


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Using async and await with export const

Similar Posts