The <luna-audio-player> component provides a modern audio player with waveform visualization, volume control, and automatic group management.
Paths
/lunadom/components/audio-player/audio-player.js REQUIRED
Basic Usage
Grouped Players (Auto-Pause)
Players in the same group automatically pause when another starts playing.
Custom Themes
Orange Theme
Blue Theme
Green Theme
Purple Theme
External Control with Buttons
Play
Pause
Volume Up
Volume Down
Toggle Mute
Customization
Attributes
src - Audio source URL (required)
track - Track/song title displayed in the player
artist - Artist name displayed below title
group - Grouping key (players in same group auto-pause each other)
autoplay - Begin playback when ready
Properties
volume - Get/set volume (0–1)
muted - Get/set muted state
paused - Whether audio is paused (read-only)
Methods
play() - Begin playback
pause() - Pause playback
CSS Variables
--luna-audio-bg - Player background
--luna-audio-fg - Primary text color
--luna-audio-accent - Accent/playhead color
--luna-audio-muted - Secondary text color
--luna-audio-waveform - Inactive waveform bar color
--luna-audio-waveform-played - Played waveform bar color
--luna-audio-radius - Border radius
--luna-audio-width - Max width
--luna-audio-padding - Inner padding
Example Code
<!-- Basic player -->
<luna-audio-player
src="audio.mp3"
track="Song Title"
artist="Artist Name"
></luna-audio-player>
<!-- Grouped players (auto-pause) -->
<luna-audio-player
src="song1.mp3"
track="Song 1"
group="playlist"
></luna-audio-player>
<luna-audio-player
src="song2.mp3"
track="Song 2"
group="playlist"
></luna-audio-player>
<!-- Custom theme -->
<luna-audio-player
src="audio.mp3"
track="Custom Theme"
style="
--luna-audio-bg: #0a0f1a;
--luna-audio-accent: #2563eb;
--luna-audio-waveform: #1a2332;
"
></luna-audio-player>
<!-- External control -->
<luna-audio-player id="my-player" src="audio.mp3"></luna-audio-player>
<div style="display: flex; gap: 0.75rem; margin-top: 1rem;">
<luna-button id="play-btn" variant="primary" size="sm">Play</luna-button>
<luna-button id="pause-btn" variant="neutral" size="sm">Pause</luna-button>
<luna-button id="vol-up" variant="neutral" size="sm">Volume Up</luna-button>
<luna-button id="vol-down" variant="neutral" size="sm">Volume Down</luna-button>
<luna-button id="mute" variant="neutral" size="sm">Mute</luna-button>
</div>
<script>
const player = document.getElementById('my-player');
document.getElementById('play-btn').addEventListener('click', () => {
player.play();
});
document.getElementById('pause-btn').addEventListener('click', () => {
player.pause();
});
document.getElementById('vol-up').addEventListener('click', () => {
player.volume = Math.min(1, player.volume + 0.1);
});
document.getElementById('vol-down').addEventListener('click', () => {
player.volume = Math.max(0, player.volume - 0.1);
});
document.getElementById('mute').addEventListener('click', () => {
player.muted = !player.muted;
});
// Listen to events
player.addEventListener('luna-play', (e) => {
console.log('Playing:', e.detail.src);
});
player.addEventListener('luna-pause', () => {
console.log('Paused');
});
player.addEventListener('luna-timeupdate', (e) => {
console.log('Progress:', e.detail.progress);
});
</script>