Audio Tag In Html

Introduction

The <audio> tag in Html is used to embed sound content in an HTML document in web-pages. It allows you to include audio files, such as music or other audio streams, directly within your web page. The <audio> element is used to define the sound to be played. The <source> element is used to specify the audio file and its format. The controls attribute adds the default audio controls, such as play, pause, and volume. Here’s a basic example of how to use it:

<audio controls>
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>

Attributes of Audio Tag

The audio tag has several attributes that can be used to control the behavior of the audio player. Some of the most commonly used attributes are:

• src: Specifies the URL of the audio file.

<audio controls>
<source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg"> 
</audio>

• type: Specifies the MIME type of the audio file.

<audio controls>
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
</audio>

• controls: Adds the default audio controls to the player.

<audio controls>
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
</audio>

• autoplay: Starts playing the audio automatically when the page loads.

<audio autoplay>
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
</audio>

• loop: Continuously loops the audio.

<audio loop>
  <br> 
   <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
   05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
   <br>
 </audio>

• preload: Specifies whether the audio should be loaded when the page loads.

<audio preload="auto">
  <br> 
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
    <br>
  </audio>

Examples of Audio Tag in HTML

Here are some examples of how to use the audio tag in HTML:

Example 1: Basic Audio Player

This example shows how to create a basic audio player with the default controls.

<audio controls>
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
</audio>

Example 2: Autoplay Audio

This example shows how to create an audio player that starts playing the audio automatically when the page loads.

<audio controls autoplay>
  <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
  05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
</audio>

Example 3: Looping Audio

This example shows how to create an audio player that continuously loops the audio.

<audio controls loop>
   <source src="https://cdn.wapka.org/0082rh/ed5c570fd9de22711b7558d1203dcfe0/
   05-iwan-fals-engkau-tetap-sahabatku.mp3"  type="audio/mpeg">
</audio>

Conclusion

The HTML <audio> element is a powerful tool for embedding sound content in a web page. With its simple syntax and various attributes, it provides developers with the flexibility to create custom audio players that meet their needs. Whether you want to add background music to a website or create an interactive audio experience, the audio tag is an essential part of modern web development.

NOTE : If you want to read more about Html Audio tag you can refer MDN Docs.

Frequently Asked Question