Skip to main content


This class is the core of the library. It is an animation loop+event emitter which imitates an HTMLMediaElement being played (although it does not fully implement that interface).

You will typically not instantiate this class directly. The Playback is attached to the Player and can be accessed like so:

import {usePlayer} from "ractive-player";
function Component() {
const {playback} = usePlayer();
// do stuff with playback



audioContext: AudioContext;


audioNode: GainNode;


The current playback time in milliseconds.

Warning: the HTMLMediaElement interface measures this property in seconds.

currentTime: number;


The length of the playback in milliseconds.

Warning: the HTMLMediaElement interface measures this property in seconds.

duration: number;


An EventEmitter that your code can subscribe to. Emits the following events:

bufferupdateFired when a progress event on an Audio or Video element occurs.
cuechangeUsed for captions.
pauseFired when playback is paused.
playFired when playback begins or resumes playing.
seekFired when playback is seeked (sought?).
seekedFired when a seeking operation has completed.
seekingFired when a seeking operation starts.
stopFired when playback has stopped because the end of the ractive was reached.
ratechangeFired when playback rate is changed.
timeupdateFired when the time indicated by the currentTime property has been updated.
volumechangeFired when the volume has changed.

On the various seek events: If the user uses the scrubber bar to seek the video to a new position, the seeking event will be fired when they start moving the scrubber, and the seek and seeked events will be fired once they release it. If the seek() method is called, only the seek event will be fired.

hub: StrictEventEmitter<EventEmitter, {
"bufferupdate": void;
"cuechange": void;
"pause": void;
"play": void;
"seek": number;
"seeked": void;
"seeking": void;
"stop": void;
"ratechange": void;
"timeupdate": number;
"volumechange": void;


Whether the playback is paused.

paused: boolean;


The rate at which the playback is being played.

playbackRate: number;


Whether the playback is in the process of seeking to a new position.

seeking: boolean;



Pause playback.

pause(): void;


Resume playback.

play(): void;


Seek playback to a specific time.

seek(t: number | string): void;