TimeRanges

Shows how much of the file is loaded past the playhead.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls — The lighter band on the seek line ahead of the amber played part is the buffered range.

How Riff uses it

On every time update the script reads the live element's buffered ranges, finds the one that contains the playhead, and turns its end into a 0 to 1 ratio. That ratio goes into a custom property on both seek bars, and the stylesheet scales a lighter band under the played part of the line to match.

Why

The lighter band tells the listener a seek into loaded territory will be instant.

Without it

With no matching range the function returns 0 and the band is empty.

Where

plugins/riff/assets/riff.js, line 843
```
function buffered( m, duration ) {
```
plugins/riff/assets/riff.js, line 844
```
const ranges = m.buffered;
```

Links open the source at the commit this page was published from.

Reference: TimeRanges on MDN.