Sound

Open in Playground

Audio player built from the library's own Button, Slider and Select: play / pause, a seek bar with a time popover and a loaded (buffered) band, a spinner while it waits for data, mute with a volume slider whose speaker icon follows the level, and playback speed. title and artist label the track, art shows cover art beside it, and speeds sets the rates offered. Extra props go to the <audio> element, and <source> children offer several formats.

Moonlight Sonata, 3rd movement

Ludwig van Beethoven

0:00

Props

srcstring
Audio URL.
titlestring
Default: 'Audio'
Track title, also the accessible name of the player.
artiststring
Second line under the title.
artstring
Cover art image URL, shown as a square beside the controls (with an icon if it fails to load).
artAltstring
Default: ''
Alt text of the cover art; leave empty when the title already describes it.
speedsnumber[]
Default: [0.5, 0.75, 1, 1.25, 1.5, 2]
Playback rates offered in the speed menu (1 is normal).
classNamestring
Default: ''
Extra classes for the root element.
childrenReactNode
e.g. <source> elements for several formats.
...rest
Passed to the <audio> element.

Sound props
Prop	Type	Default	Description
`src`	string	–	Audio URL.
`title`	string	`'Audio'`	Track title, also the accessible name of the player.
`artist`	string	–	Second line under the title.
`art`	string	–	Cover art image URL, shown as a square beside the controls (with an icon if it fails to load).
`artAlt`	string	`''`	Alt text of the cover art; leave empty when the title already describes it.
`speeds`	number[]	`[0.5, 0.75, 1, 1.25, 1.5, 2]`	Playback rates offered in the speed menu (1 is normal).
`className`	string	`''`	Extra classes for the root element.
`children`	ReactNode	–	e.g. <source> elements for several formats.
`...rest`		–	Passed to the <audio> element.