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?