HTML Audio
To play an audio file on a web page, use the HTML <audio> element.
The HTML
Use the <audio> element in HTML to play an audio file:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works
Audio controls, such as play, pause, and volume, are added using the controls attribute.
You can specify other audio files that the browser may select by using the <source> element. The first format that the browser recognizes will be used.
Only browsers that do not support the <audio> element will display the text that is enclosed between the <audio> and </audio> tags.
HTML
The autoplay attribute can be used to automatically start an audio file:
Example
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Note: Autoplay is typically not supported by Chromium browsers. But autoplay with silent is always permitted.
To have your audio file begin playing automatically (but muted), add muted after autoplay:
Browser Support
The first browser version that fully supports the <audio> element is shown by the numbers in the table.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Audio Formats
WAV, OGG, and MP3 are the three audio formats that are supported. The various formats are supported by the following browsers:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Audio - Media Types
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
HTML Audio - Methods, Properties, and Events
The <audio> element’s properties, events, and methods are defined by the HTML DOM.
This lets you choose the duration and loudness of the audio files, as well as load, play, and pause them.
Additionally, you can receive notifications through DOM events when an audio starts, stops, etc.
Visit our HTML Audio/Video DOM Reference for a complete list of DOM references.
HTML Audio Tags
html audio
audio element
audio controls
source element
autoplay
browser support
audio formats
mp3
wav
ogg
audio dom
audio methods
audio properties
audio events
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The HTML audio element is a powerful tool for adding audio content to your web pages. Whether you’re creating an online course, a podcast, or a multimedia presentation, the audio element provides a seamless way to integrate high-quality audio into your HTML.
One of the key advantages of the audio element is its versatility. You can easily control the playback of your audio using the built-in controls, or you can customize the experience by manipulating the audio’s properties and methods through JavaScript. And with support for multiple audio formats, including MP3, WAV, and OGG, you can ensure that your audio content is accessible to a wide range of users and devices.
But the benefits of the HTML audio element don’t stop there. By leveraging the source element, you can provide fallback options for browsers that don’t support a particular audio format, ensuring a consistent experience for all your users. And with options like autoplay and loop, you can create engaging and immersive audio experiences that captivate your audience.
As you dive into your HTML course, be sure to explore the full potential of the audio element. Mastering this powerful tool will not only enhance the quality of your content but also elevate the overall user experience, making your web pages more engaging and memorable.
