Media@knitui/media

AudioPlaylist

A cross-platform playlist player. Web drives an internal HTMLAudioElement queue; native drives the expo-audio AudioPlaylist (gapless). One controller contract, one kit chrome (transport + scrubber + clickable track list).

WebiOSAndroid5 style slots16 own props5 examples

Stories Source Tests Open in Storybook

import { AudioPlaylist } from "@knitui/media";

Playground

Loading playground…

size

loop

Playground

<AudioPlaylist
  sources={[{ uri: "https://samplelib.com/mp3/sample-30s.mp3", name: "Sample 30s" }, { uri: "https://samplelib.com/mp3/sample-15s.mp3", name: "Sample 15s" }, { uri: "https://samplelib.com/mp3/sample-12s.mp3", name: "Sample 12s" }]}
  size="md"
  controls
  showTrackList
  loop="none"
/>

Examples

Basic

Loading example…

BasicSource Storybook

Loop All

Loading example…

Loop AllSource Storybook

Long Tracks

A queue of full-length tracks — real durations to scrub and queue through.

Loading example…

Long TracksSource Storybook

No Track List

Loading example…

No Track ListSource Storybook

Styles

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`controls`	`ReactNode`	`true`	Control chrome: `true` (default bar + track list), `false`, or custom node.
`getController`	`((controller: AudioPlaylistController) => void) \| undefined`	—
`keyboard`	`boolean \| undefined`	—	Enable keyboard shortcuts. Default `true`.
`label`	`string \| undefined`	—	Accessible label. Default `"Audio playlist"`.
`loop`	`AudioPlaylistLoopMode \| undefined` none · single · all	`none`	Initial loop mode. Default `'none'`.
`maxWidth`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"maxWidth"> \| null \| undefined`	—
`muted`	`boolean \| undefined`	—	Start muted.
`onEnded`	`(() => void) \| undefined`	—
`onError`	`((error: AudioError) => void) \| undefined`	—
`onTrackChange`	`((currentIndex: number, previousIndex: number) => void) \| undefined`	—
`playbackRate`	`number \| undefined`	—	Initial playback rate.
`showTrackList`	`boolean \| undefined`	`true`	Show the track list. Default `true`.
`size` system	`"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined` xs · sm · md · lg · xl	`md`	Control sizing scale. Default `'md'`.
`sources`	`AudioSource[] \| undefined`	—	Initial playlist sources.
`styles` system	`SlotStyles<AudioPlaylistStyles> \| undefined`	—
`testID`	`string \| undefined`	—
`volume`	`number \| undefined`	—	Initial volume, 0..1.
`width`	`number \| GetThemeValueForKey<"width"> \| Animated.AnimatedNode \| null \| undefined`	—

Style slots

Every part of AudioPlaylist can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`root`	`styles={{ root: { … } }}`
`time`	`styles={{ time: { … } }}`
`trackLabel`	`styles={{ trackLabel: { … } }}`
`trackList`	`styles={{ trackList: { … } }}`
`trackRow`	`styles={{ trackRow: { … } }}`