Media playerPro
An audio player with a living playlist and complete playback controls.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { MediaPlayerBlock } from 'animui/media-player';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this for an audio collection where people need clear transport, progress, and volume controls. Replace the sample local loops with your media.
import { MediaPlayerBlock } from "animui/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.
