Audio Player

A styled wrapper for HTML5 audio content.

Examples

Basic Audio

blade

<x-plume::audio src="https://www.w3schools.com/html/horse.mp3" class="w-full max-w-md" />

Inside a Card

Example Song

Artist Name

blade

<x-plume::card class="w-full max-w-sm">
    <div class="flex items-center gap-4">
        <div class="size-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
            <x-plume::icon i="icon-[fluent--music-note-2-24-filled]" class="size-6" />
        </div>
        <div class="flex-1 min-w-0">
            <p class="text-sm font-bold truncate">Example Song</p>
            <p class="text-xs text-foreground/50 dark:text-background-400 truncate">
                Artist Name</p>
        </div>
    </div>
    <div class="mt-4">
        <x-plume::audio src="https://www.w3schools.com/html/horse.mp3" />
    </div>
</x-plume::card>

Prop	Type	Default	Description
src	string	null	The URL of the audio file.
autoplay	bool	false	Whether to start playing automatically.
controls	bool	true	Whether to show the audio controls.
loop	bool	false	Whether to restart the audio automatically when it ends.
muted	bool	false	Whether the audio should be muted by default.
onPlay	string	null	AlpineJS expression or function to call when playback starts.
onPause	string	null	AlpineJS expression or function to call when playback pauses.
onEnded	string	null	AlpineJS expression or function to call when playback ends.

Usage

blade

<x-plume::audio src="audio.mp3" />