Skip to main content
Audio renders an HTML5 <audio> element. Supports dynamic URLs via {{ field }} interpolation.

​
Basic Usage

Controls are shown by default. The first positional argument is src.

​
Playback Options

loop, autoplay, and muted combine to create ambient background audio that starts on its own and repeats indefinitely. Browsers block autoplaying sound until the user interacts with the page, so autoplay only takes effect when paired with muted — start muted to satisfy that constraint, and reach for loop whenever the track should run continuously rather than play once and stop.
Looping background audio
from prefab_ui.components import Audio

Audio(
    src="https://example.com/ambient.mp3",
    loop=True,
    controls=False,
    autoplay=True,
    muted=True,
)

​
API Reference

Audio Parameters

​
src
str
required
Audio URL.
​
controls
bool
default:"True"
Show playback controls.
​
autoplay
bool
default:"False"
Auto-start playback. Requires muted=True in most browsers.
​
loop
bool
default:"False"
Loop playback.
​
muted
bool
default:"False"
Mute audio.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Audio
{
  "type": "Audio",
  "id?": "string",
  "onMount?": "any",
  "src": "string (required)",
  "controls?": true,
  "autoplay?": false,
  "loop?": false,
  "muted?": false,
  "cssClass?": "string"
}
For the complete protocol schema, see Audio.