title: Web Audio to visualize and interact with waveforms
body: <p>How do I write a JavaScript program to display a waveform from an audio file? I want to use Web Audio and Canvas.</p>
  
  <p>I tried this code:</p>
  
  <pre><code>(new window.AudioContext).decodeAudioData(audioFile, function (data) {
     var channel = data.getChannelData(0);
     for (var i = 0; i &lt; channel; i++) {
         canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40);
     }
  });
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/n1I3H.png" alt="Waveform example"></p>
  
  <p>Any hints on how to implement the waveform?</p>