Skip to sidebar
Skip to canvas
Storybook
Search for components
⌃ K
widgets
AudioPlayer
Docs
Primary
Skip to canvas
Multiple Audio Players With Sound Effects
Multiple Audio Players With Long Songs
Recently opened
AudioPlayer
widgets
Controls
7
Actions
Visual Tests
Interactions
Addons
Name
Control
id
*
title
*
SoundHelix Song 1
artist
*
T. Schürger
cover
*
data:image/png;base64,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
src
*
https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3
duration
*
stopOnUnmount
Set boolean
Interaction testing
Interaction tests allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here.
Watch 8m video
Read docs