Learn with us

HTML provides the <audio> element for embedding and playing audio content on a web page. Here’s how to use the <audio> element in HTML:

1. Basic <audio> Element:
   To embed an audio file on a web page, use the <audio> element and specify the audio source using the src attribute. Example:

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

The src attribute specifies the URL or file path of the audio file. The controls attribute adds playback controls (play, pause, volume, etc.) to the audio player.

2. Multiple Audio Sources:
   To ensure compatibility across different browsers and devices, you can provide multiple audio sources using the <source> element within the <audio> element. The browser will automatically select the appropriate source based on compatibility. Example:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>

In this example, two audio sources (MP3 and Ogg) are provided, each with its corresponding MIME type.

3. Audio Attributes:
   The <audio> element supports various attributes to control audio playback and appearance. Some commonly used attributes include:

• controls: Adds playback controls to the audio player.
• autoplay: Specifies that the audio should start playing automatically.
• loop: Specifies that the audio should loop and repeat playback.
• muted: Specifies that the audio should start playing with muted sound.
• preload: Specifies whether the audio should be preloaded (auto, metadata, or none).
• volume: Specifies the volume level of the audio player (0.0 to 1.0).

Example:

<audio src="audio.mp3" controls autoplay loop muted preload="auto" volume="0.8"></audio>

4. Audio Controls:
   The <audio> element provides default controls for play, pause, volume, and seeking. However, you can customize the appearance and behavior of the controls using CSS and JavaScript.
5. Audio Formats and Browser Support:
   Different browsers support different audio formats. To ensure broad compatibility, it is recommended to provide audio sources in multiple formats (e.g., MP3, Ogg). The browser will select the supported format automatically.
6. Audio Events and JavaScript:
   You can interact with the <audio> element and control its behavior through JavaScript. The <audio> element exposes events like play, pause, ended, timeupdate, etc., which can be handled using JavaScript to perform custom actions or implement advanced functionality.

Remember to consider different audio formats and provide fallback options for unsupported browsers or devices to ensure a seamless audio playback experience.