Riff / Built on the open web / Interface

requestAnimationFrame

Moves the seek line and the filament every frame, not four times a second.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls — The seek line and elapsed time advance every frame.

How Riff uses it

Two frame loops run while music plays. One repaints the seek line and times every frame and stops when the element pauses or the page hides. The other advances the filament's heat model with the frame timestamp and reads the analyser. Opening Now Playing also waits one frame before adding its class, so the slide-up transition actually runs.

Why

timeupdate fires about four times a second and reads as a line that skips.

Where

plugins/riff/assets/riff.js, line 412
```
function follow() {
```

plugins/riff/assets/riff.js, line 640

meterRaf = requestAnimationFrame( tick );

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

Reference: requestAnimationFrame on MDN.