HTML <audio> Element Tutorial

The <audio> element allows you to embed sound content in web pages. It supports multiple audio formats and provides controls for playback, making it easy to add music, podcasts, or sound effects to your site.

Basic Usage

<audio controls> <source src="audio-file.mp3" type="audio/mpeg" /> <source src="audio-file.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio>

controls attribute adds play, pause, and volume controls.
Use multiple <source> elements for better browser compatibility.

Common Audio Formats

MP3 - Widely supported and compressed.
OGG - Open format, good quality.
WAV - Uncompressed, large file size.

Attributes

controls: Show playback controls.
autoplay: Start playing automatically.
loop: Repeat the audio.
muted: Start muted.

Best Practices

Always provide fallback text for unsupported browsers.
Use multiple formats for maximum compatibility.
Don't autoplay audio unless necessary; it can annoy users.
Keep file sizes reasonable for fast loading.

Tip: You can style the audio player with CSS, but browser controls may look different across platforms.

Practice Example

<audio controls loop muted> <source src="your-audio.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>

Try changing the attributes and sources to see how the audio player behaves!