Media player
ProAn audio player with a living playlist and complete playback controls.
Live block · sample data
- A small audio collection such as a podcast, sample pack, or playlist.
- Pages that need a full player with seek, skip, volume, and a track list.
- Use now-playing for a compact now playing widget.
- Use transcript-studio when the audio needs a synced transcript.
- Use voice-recorder for recording audio.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this for an audio collection where people need clear transport, progress, and volume controls. Replace the sample local loops with your media.
example.tsx
import { MediaPlayerBlock } from "@/components/arc/blocks/media-player/media-player"; export function Listen() { return <MediaPlayerBlock />;}MediaPlayerBlock
An audio player with cover art, a three-track playlist, seek bar, skip, and volume with mute. Takes no props; the tracks are short loops synthesized in the browser as WAV blobs, and covers come from lib/media photos.
No props.
- Arrow keys
- Adjust seek position and volume on the focused range inputs.
- Uses a native audio element with range inputs for seek and volume.
- Transport and playlist buttons have labels such as "Play <title>" and "Next track"; the current track has aria-current.
- Seek and volume ranges carry aria-valuetext such as "0:12 of 0:24" and "70%". The mute button's label switches between Mute and Unmute audio.
- The selection rail glides to the current track with a shared layoutId on the gentle spring; playing bars pulse beside it.
- The cover crossfades and the title rises in when the track changes; the play icon swaps with a short scale and blur.
- Reduced motion removes the glides, swaps, and bar animation.
- Below 420px viewport width the padding tightens, the cover takes a 1.7 ratio, transport buttons shrink, and the volume slider narrows to 64px.
- Seek and volume are native range inputs, so touch and keyboard work without extra handling.
- Uses a native audio element; position updates come from timeupdate, not a frame loop.
- The demo tracks are generated as WAV blobs in the browser; replace them with real audio URLs in production.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a small audio collection such as a podcast, a sample pack, or a playlist.
- Replace the tracks array and renderTrack() with real audio URLs set on the audio element, and the cover ids with your images.
- The default export is MediaPlayerBlock.
The full library index for assistants is at /llms.txt.
