HTML Audio Tag

The HTML <audio> tag is used to embed audio files directly into an HTML document. It allows you to play audio on your web page without the need for external audio players.

Here's the basic structure of the <audio> tag:

<audio src="audio.mp3" controls>

  Your browser does not support the audio tag.

</audio>

To embed an audio file, you specify the source of the audio using the src attribute. The src attribute should contain the URL or file path of the audio file.

The controls attribute enables the default audio controls, such as play/pause, volume control, and track progress bar. Users can interact with these controls to manipulate the audio playback.

Inside the <audio> tag, you can also include alternative content, such as text or an image, that will be displayed if the browser does not support the <audio> tag. This is useful for providing fallback content for browsers that do not support audio playback.

Additional attributes can be used to customize the behavior and appearance of the audio player, such as autoplay to automatically start the audio, loop to play the audio in a continuous loop, preload to specify if and how the audio should be preloaded, and more.

Example with additional attributes:

<audio src="audio.mp3" controls autoplay loop preload="auto">

  Your browser does not support the audio tag.

</audio>

In this example, the audio will automatically start playing (autoplay), loop continuously (loop), and be preloaded automatically (preload) based on the browser's default behavior.

The HTML <audio> tag supports various audio formats such as MP3, WAV, and Ogg Vorbis. It's recommended to provide multiple audio formats to ensure compatibility across different browsers and devices. You can do this by including multiple <source> tags within the <audio> tag, each with a different audio format.

<audio controls>

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

  <source src="audio.wav" type="audio/wav">

  <source src="audio.ogg" type="audio/ogg">

  Your browser does not support the audio tag.

</audio>

In this example, the browser will choose the appropriate audio format based on its compatibility.

The <audio> tag allows you to enhance your web pages with audio content, making them more interactive and engaging for your users. Consider audio file sizes and formats for optimal performance and compatibility across different devices and browsers.