Waveform visualization in JavaScript from audio

javascript html audio canvas html5-audio
Alex picture Alex · May 29, 2011 · Viewed 26.9k times · Source

I'm trying to use JavaScript to display the waveform for and audio file, but I don't even know how to get started. I found the Audio Data API, but am unfamiliar with most audio terms and don't really know what is provided or how to manipulate it. I found examples of waveforms in JavaScript, but they are too complicated/I can't comprehend what is going on. Then my question is: how can you use JavaScript to create a waveform of a song on canvas, and what exactly is the process behind it?

Answer

Ian Devlin picture Ian Devlin · Feb 2, 2012

Here's some sample code from my book (HTML5 Multimedia: Develop and Design) that does exactly that; Audio Waveform. It uses the Mozilla Audio Data API.

The code simply takes snapshots of the audio data and uses it to draw on the canvas.

Related questions

Create a waveform of the full track with Web Audio API

Realtime moving Waveform I'm currently playing with Web Audio API and made a spectrum using canvas. function animate(){ var a=new Uint8Array(analyser.frequencyBinCount), y=new Uint8Array(analyser.frequencyBinCount),b,c,d; analyser.getByteTimeDomainData(y); analyser.getByteFrequencyData(a); …

Read More
How to prevent "The play() request was interrupted by a call to pause()" error?

I made a website where if the user clicks, it plays a sound. To prevent the sound from overlapping, I had to add the code: n.pause(); n.currentTime = 0; n.play(); But that causes the error: The play() request was …

Read More
HTML 5 video or audio playlist

Can I use a <video> or <audio> tag to play a playlist, and to control them? My goal is to know when a video/song has finished to play and take the next and change its …

Read More