What is the audio element in HTML5?

The audio element in HTML5 provides a standard way to embed audio content into web pages without depend on third-party plugins.

HTML5 supports some major audio formats, including MP3, Ogg Vorbis, AAC, and WAV browser support for these formats. To ensure wider compatibility, it’s  necessary to provide audio in multiple formats using the <source> element within the <audio> element.

What are the audio options for HTML5?

An explanation of the <audio> element options or attributes like src, controls, autoplay, loop, and muted.

1. src Attribute: This attribute specifies the path or URL to the audio file.

<audio controls src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp3" type="audio/mpeg">
 </audio>

2. controls Attribute: When present, it tells the browser to display default audio controls such as play/pause, volume, and seeking. If this attribute is omitted, no controls will be shown by default.

<audio src="audio.ogg" controls></audio>

3. autoplay Attribute: If present, the browser will start playing the audio as soon as it has loaded enough data to begin. It’s considered better practice to let users initiate audio playback.

<audio controls autoplay>
  <source src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp3" type="audio/mpeg">
</audio>

However, mobile browsers ignore the autoplay attribute to save bandwidth.

4. loop Attribute: When included, it instructs the browser to repeat the audio from the beginning once it has finished playing.

<audio controls src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp3" type="audio/mpeg" loop>
 </audio>

5. muted Attribute: If present, it sets the audio output to be muted by default. Users can still unmute the audio using the controls if they are displayed.

<audio controls src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp3" type="audio/mpeg" muted>
 </audio>

The muted attribute replaces an older audio attribute with a muted value from previous HTML5 specifications.

Using the <source> Element for Multiple Audio Formats:

To provide multiple audio formats for better browser compatibility, you can use the <source> element within the <audio> tags. The browser will attempt to play the first format it supports. You should also provide a type attribute for each <source> element to indicate the MIME type of the audio file.

<audio controls>
<source src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.wav" type="audio/WAV" muted><br>
<source src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp3" type="audio/mpeg" >
  Your browser does not support the audio tag.
 </audio>

The text between the <audio> and </audio> tags serve as fallback content for browsers that do not support the <audio> element. You can provide a download link or information about unsupported formats within this fallback content. You can  include a Flash fallback using the <object> or <embed> element for older browsers.
HTML5 Topics