Q:

Web Audio to visualize and interact with waveforms

How do I write a JavaScript program to display a waveform from an audio file? I want to use Web Audio and Canvas.
I tried this code:
(new window.AudioContext).decodeAudioData(audioFile, function (data) {
   var channel = data.getChannelData(0);
   for (var i = 0; i < channel; i++) {
       canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40);
   }
});

But the result is far from what I want (namely, the image is not smooth since I'm drawing with rectangles). I want it to look smooth like this image:

Any hints on how to implement the waveform?

A:

Rolled out my own library after all: wavesurfer.js.
It draws a waveform from PCM data and seeks regions of the audio by clicking on it.

A:

You may be interested in AudioJedit. This is an open source project hosted at GitHub. It have small server-side node.js script for loading audio files, but all interaction with audio implemented in client-side JavaScript. I think this is similar to what you are looking for.

