Audio Component

The Audio component provides a customizable audio player with intuitive controls, lazy loading capabilities, and comprehensive accessibility support. Built as a wrapper around the native HTML5 audio element, it offers enhanced functionality while maintaining broad compatibility.

Key Features

Playback Controls: Play/pause, seek, and volume controls
Smart Loading: Lazy loading with intersection observer support
Volume Management: Mute toggle and volume slider
Keyboard Navigation: Full keyboard support for all controls
Accessibility: ARIA-compliant with screen reader support

Basic Usage

Create a simple audio player with default settings:

1
<Audio src="/assets/audio/example.mp3" />

Styling Variants

The Audio component comes with several carefully designed variants to match different visual contexts using the variant prop:

Loading Strategies

Default (Load on Play)

By default, the audio file loads only when the user clicks play:

1
<Audio src="/assets/audio/example.mp3" />

Auto Load When Near Viewport

Load the audio file when the component comes into view:

1
<Audio
2
    src="/assets/audio/example.mp3"
3
    preload="auto"
4
    preloadDistance={200}
5
/>

Eager Loading

Load the audio file immediately when the component mounts:

1
<Audio src="/assets/audio/example.mp3" preload="eager" />

Custom Event Listeners

The audio component emits several custom events that you can listen to:

Waiting for events… (Interact with the audio player to see events)

Audio Component Events

Audio Component Events
Event	Details	Description
play	void	Started audio playback
pause	void	Paused audio playback
timeupdate	{ currentTime: number; duration: number; }	Time updated
volumechange	{ volume: number; muted: boolean; }	Volume changed

Audio Component Props API

Required Props

Audio Component Extends <div> HTMLElement
Prop	Type	Default	Description
src	string	-	URL of the audio file to play
audioProps	HTMLAttributesWithData<'audio'>		HTMLAudioElement attributes
preload	'none' \| 'auto' \| 'eager'	none	Loading strategy
preloadDistance	number	100	Distance in pixels for auto preload
variant	'default' \| 'underline' \| 'minimal' \| 'pill'	default	Visual style variant

Audio Functions API

The audio component exposes several methods for programmatic control:

Audio Component Functions
Function	Type	Description
play	() => Promise<void>	Start audio playback
pause	() => void	Pause audio playback
seek	(time: number) => void	Jump to specific time in seconds
volume	set: (value: number) => void	Set volume (0-1)
muted	set: (value: boolean) => void	Set muted state

Keyboard Navigation

Key	Action
Space	Play/Pause toggle
Left Arrow	Seek backward 5 seconds
Right Arrow	Seek forward 5 seconds
Up/Down Arrow	Adjust volume
M	Toggle mute

Limited Time Launch Sale

Enhance your web applications with our Audio component. Get the AstroJS starter template now and access a complete UI toolkit!

GET 60% OFF!

Aside Badge

Directory