CodeJackpot - HTML Tag: audio

HTML Tag: audio

The HTML tag <audio> is used to embed audio content in a web page. It allows you to play audio files such as music, podcasts, or sound effects directly on your website without the need for a separate media player. The <audio> tag is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge.

Brief Explanation about HTML Tag: audio

The <audio> tag has several attributes that allow you to customize the audio playback experience. The most commonly used attributes are:

src: Specifies the URL of the audio file to be played.
controls: Adds basic audio controls such as play, pause, and volume to the audio player.
autoplay: Starts playing the audio file automatically when the page loads.
loop: Loops the audio file so that it plays continuously.
preload: Specifies whether the audio file should be loaded when the page loads or only when the user clicks the play button.

Here is an example of how to use the <audio> tag:

  <audio src="music.mp3" controls autoplay preload="auto">
    Your browser does not support the <audio> element.
  </audio>

In this example, the src attribute specifies the URL of the audio file to be played. The controls attribute adds basic audio controls to the player, while the autoplay attribute starts playing the audio file automatically when the page loads. The preload attribute specifies that the audio file should be loaded when the page loads.

If the user's browser does not support the <audio> tag, the text "Your browser does not support the <audio> element." will be displayed instead.

Code Examples in Per Tags

Here are some examples of how to use the <audio> tag with different attributes:

Basic Audio Player

  <audio src="music.mp3" controls>
    Your browser does not support the <audio> element.
  </audio>

This example creates a basic audio player with the src and controls attributes. The audio file will be loaded when the user clicks the play button.

Autoplay Audio Player

  <audio src="music.mp3" controls autoplay>
    Your browser does not support the <audio> element.
  </audio>

This example creates an audio player that starts playing the audio file automatically when the page loads, using the autoplay attribute.

Looping Audio Player

  <audio src="music.mp3" controls loop>
    Your browser does not support the <audio> element.
  </audio>

This example creates an audio player that loops the audio file so that it plays continuously, using the loop attribute.

Preloading Audio Player

  <audio src="music.mp3" controls preload="auto">
    Your browser does not support the <audio> element.
  </audio>

This example creates an audio player that preloads the audio file when the page loads, using the preload attribute. This can improve the user experience by reducing the amount of time it takes for the audio to start playing.

Multiple Audio Sources

  <audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    Your browser does not support the <audio> element.
  </audio>

This example creates an audio player with multiple audio sources using the <source> tag. The browser will choose the first source that it can play. If none of the sources can be played, the text "Your browser does not support the <audio> element." will be displayed instead.

HTML