1  window.onload = function(){
2
3    var myAudio = document.getElementById('my-audio');
4    var myCanvas = document.getElementById('my-canvas');
5    var context = myCanvas.getContext('2d');
6
7    context.fillStyle = 'lightgray';
8    context.fillRect(0, 0, myCanvas.width, myCanvas.height);
9    context.fillStyle = 'red';
10    context.strokeStyle = 'white';
11
12    var inc = myCanvas.width / myAudio.duration;
13
14    // display TimeRanges
15
16    myAudio.addEventListener('seeked', function() {
17      for (i = 0; i < myAudio.buffered.length; i++) {
18
19        var startX = myAudio.buffered.start(i) * inc;
20        var endX = myAudio.buffered.end(i) * inc;
21        var width = endX - startX;
22
23        context.fillRect(startX, 0, width, myCanvas.height);
24        context.rect(startX, 0, width, myCanvas.height);
25        context.stroke();
26      }
27    });
28  }