index.html

<h1>Audio visualization</h1>
<script>
  var numRows = 16, bars = [];
  for (var i = 0; i < numRows * 2; i++) {
    var bar = document.createElement('meter');
    bar.min = -1;
    document.body.appendChild(bar);
 
    // Add a newline after each pair of bars.
    if (i % 2) document.body.appendChild(document.createElement('br'));
 
    bars.push(bar);
  }
 
  require(['$api/audio', '$api/models'], function(audio, models) {
    var analyzer = audio.RealtimeAnalyzer.forPlayer(models.player);
 
    analyzer.addEventListener('audio', function(evt) {
      console.log(evt);
      // There will be 256 samples, but we want to only display every [step]
      // samples because we have fewer than 256 rows.
      var step = 256 / numRows;
      for (var i = 0; i < numRows; i++) {
        bars[i * 2].value = evt.audio.wave.left[step * i];
        bars[i * 2 + 1].value = evt.audio.wave.right[step * i];
      }
    });
  });
</script>