buffering_seeking_time_ranges
window.onload = function(){
var myAudio = document.getElementById('my-audio');
var myCanvas = document.getElementById('my-canvas');
var context = myCanvas.getContext('2d');
context.fillStyle = 'lightgray';
context.fillRect(0, 0, myCanvas.width, myCanvas.height);
context.fillStyle = 'red';
context.strokeStyle = 'white';
var inc = myCanvas.width / myAudio.duration;
// display TimeRanges
myAudio.addEventListener('seeked', function() {
for (i = 0; i < myAudio.buffered.length; i++) {
var startX = myAudio.buffered.start(i) * inc;
var endX = myAudio.buffered.end(i) * inc;
var width = endX - startX;
context.fillRect(startX, 0, width, myCanvas.height);
context.rect(startX, 0, width, myCanvas.height);
context.stroke();
}
});
}
Bibhu