HTML Audio

Introduction to the <audio> Element

The HTML <audio> element is used to embed sound content in web pages. It provides a way to include audio files with built-in controls, allowing users to play, pause, and adjust the volume without needing additional plugins.

Basic Usage of &lt;audio&gt;

To use the <audio> element, you need to specify the source of the audio file using the <source> element or the src attribute. Here's a basic example:

Attributes of the &lt;audio&gt; Element

The <audio> element supports several attributes that enhance its functionality:

• controls: Displays audio controls such as play, pause, and volume.
• autoplay: Starts playing the audio as soon as it is ready (caution: may be disabled in some browsers for usability).
• loop: Replays the audio once it finishes.
• muted: Mutes the audio by default.
• preload: Specifies if and how the author thinks the audio should be loaded when the page loads. Values can be auto, metadata, or none.

Multiple Audio Sources

For better compatibility across different browsers, it's a good practice to provide multiple audio formats. You can do this by using multiple <source> elements within the <audio> element:

Styling the &lt;audio&gt; Controls

While the default controls are often sufficient, you can style the <audio> element using CSS to better match your website's design. However, the ability to style <audio> controls is limited and may not be fully supported across all browsers.

JavaScript Interaction with &lt;audio&gt;

Using JavaScript, you can interact with the <audio> element to create custom controls or enhance functionality. For example, you can play or pause the audio using JavaScript methods: