A compact player: play and pause, the position, a seek bar and the length.
Base UI
"use client";
import { createSource } from "@audio-ui/react";The scrubber is a Timeline: its bar is the ruler, with a playhead for the fill and one for the thumb.
import { Timeline } from "@audio-ui/react";
<Timeline.Root>
<Timeline.Ruler>
<Timeline.Playhead /> {/* the fill */}
<Timeline.Playhead /> {/* the thumb */}
</Timeline.Ruler>
</Timeline.Root>import { createSource } from "@audio-ui/react";
import { Scrubber } from "@/components/audio/elements/scrubber";
const position = createSource(0); // seconds; set it from your player's clock
<Scrubber
duration={215}
onPlayingChange={(playing) => (playing ? player.play() : player.pause())}
onSeek={(seconds) => player.seek(seconds)}
playing={isPlaying}
source={position}
/>;The bar holds a native <input type="range">: the arrow keys move it by a second, Page Up and Page Down by ten, Home and End go to the ends. It announces the position as a clock, such as "1:15".
Props · 6