Breaking News: Grepper is joining You.com. Read the official announcement!

buffering_seeking_time_ranges

Bibhu answered on August 7, 2021 Popularity 1/10 Helpfulness 1/10

answer buffering_seeking_time_ranges

buffering_seeking_time_ranges

Comment

  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();
      }
    });
  }

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: developer.mozilla.org

Tags: javascript

Link to this answer
Share Copy Link