Components

Audio Player

A custom audio player — play/pause, seek, time and volume — over a native HTML5 audio element.

php artisan blatui:add audio-player

SoundHelix Song 1 T. Schürger

0:00 0:00

<x-ui.audio-player
    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
    title="SoundHelix Song 1"
    artist="T. Schürger"
/>

Compact

0:00 0:00

<x-ui.audio-player src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" />

Props, slots and exposed methods for <x-ui.audio-player>.

Prop	Type	Default	Description
`src`	`string`	—	Audio file URL. Loaded with preload="metadata" so the duration is known before playback starts.
`title`	`string`	—	Optional track title shown above the controls.
`artist`	`string`	—	Optional artist or subtitle shown under the title.
`autoplay`	`bool`	`false`	Start playing on load. Most browsers require the audio to be muted to honour this, so the player starts muted when autoplay is on.

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`toggle()`	Plays the audio if paused, or pauses it if playing.
`seek(v)`	Jumps to a position given as a 0-100 percentage of the total duration.
`setVolume(v)`	Sets the volume from a 0-100 value, muting when 0.
`toggleMute()`	Toggles muted state without changing the volume level.