Adding Audio to HTML5 Webpages with the `
Learn how to embed audio files into your HTML5 websites using the `
Adding Audio to HTML with the `
The HTML <audio>
element allows you to embed audio files directly into your web pages, enriching the user experience.
Basic Audio Playback
To play an audio file, use the <audio>
element. The src
attribute specifies the audio file's URL, and the text between the opening and closing tags provides fallback content for browsers that don't support the <audio>
element.
Example: Basic Audio Playback
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
The controls
attribute adds standard audio player controls (play, pause, volume).
Autoplay
The autoplay
attribute starts audio playback automatically. Note that many modern browsers restrict autoplay due to user experience considerations. Autoplay generally works best when the audio is muted initially (using the muted
attribute).
Example: Autoplay (Muted)
<audio autoplay muted>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Browser Support
Browser | Version |
---|---|
Edge/IE | 79+ |
Chrome | 9.0+ |
Firefox | 3.5+ |
Safari | 4.0+ |
Opera | 10.5+ |
Supported Audio Formats
Commonly supported audio formats include MP3, WAV, and OGG. Browser support for each format can vary (check browser specifications for full compatibility).
Format | Media Type |
---|---|
MP3 | audio/mpeg |
OGG | audio/ogg |
WAV | audio/wav |
HTML Audio DOM
The HTML DOM (Document Object Model) provides methods, properties, and events for controlling audio playback (play, pause, volume, duration, etc.). See the HTML Audio/Video DOM Reference for details.
Summary Table
Tag | Description |
---|---|
<audio> |
Embeds audio content. |
<source> |
Specifies multiple audio sources for browser compatibility. |