HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <audio> Tag


The HTML <audio> tag is a powerful element that allows you to embed sound files on your web pages. It’s an essential tool for web developers looking to create engaging and interactive auditory experiences. Let’s dive into the details:

Embedding an audio file is simple and straightforward. Here’s an example of how you can use the <audio> tag to play a sound file:

<!DOCTYPE html>
<html>
<head>
  <title>Audio Example</title>
</head>
<body>

<h1>Play a Sound File:</h1>
<audio controls>
  <source src="your-audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
</body>
</html>

Concept and Usage

The <audio> tag is used to embed sound content in a document. It can contain one or more <source> tags that specify the audio sources to be used. The text between the <audio> and </audio> tags will be displayed in browsers that do not support the <audio> tag.

Supported Audio Formats

There are three primary audio formats supported in HTML:

  • MP3: Supported by most browsers.
  • WAV: Supported by most browsers, with some exceptions.
  • OGG: Supported by most browsers, except Safari.
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

Key Attributes

The <audio> tag offers several attributes to customize the audio experience:

Attributes of the <audio> Tag

Attribute Description
autoplay Initiates audio playback as soon as the file is ready to play.
controls Adds user controls such as play, pause, and volume buttons.
loop Enables continuous replay of the audio file once it reaches the end.
muted Silences the audio by default, requiring user interaction to un-mute.
preload Defines how the audio file should be loaded when the page is accessed.
src Sets the path to the audio file that will be played.

These attributes provide a range of options for customizing the audio experience on a webpage, allowing developers to create engaging and user-friendly multimedia conte

Global and Event Attributes

The <audio> tag supports global attributes in HTML and specific event attributes, providing further customization and interactivity.

Example below:

Loading

Conclusion

The HTML <audio> tag is a versatile tool for web developers, offering various formats, attributes, and broad browser support. It opens up endless possibilities for enhancing websites with sound, making it an indispensable part of modern web development.