Audio Tag Example Html5

MUAZHAN

4 min read

·

Jul 03, 2024

23

Share

Audio Tag Example in HTML5

The <audio> tag in HTML5 allows you to embed audio content directly into your web page. This makes it easy for users to listen to music, podcasts, sound effects, and other audio content without leaving your website.

Here's a basic example of how to use the <audio> tag:

  



  
Audio Example

  

Explanation:

• <audio> tag: This is the main element that defines the audio player.
• controls attribute: This adds default playback controls like play, pause, volume, and progress bar.
• <source> tag: This specifies the audio file to play.
  • src attribute: Specifies the URL of the audio file.
  • type attribute: Specifies the MIME type of the audio file. This helps the browser determine how to play the audio.
• "Your browser does not support the audio element.": This message is displayed if the user's browser doesn't support the <audio> tag.

Using Multiple Audio Sources

You can specify multiple <source> tags for different audio formats. This ensures that the audio will play on different browsers and devices:

Controlling Audio Playback

You can use JavaScript to control the audio playback, such as:

• Playing/Pausing:

  const audio = document.querySelector('audio');
  audio.play(); // Play the audio
  audio.pause(); // Pause the audio
  

• Setting Volume:

  const audio = document.querySelector('audio');
  audio.volume = 0.5; // Set volume to 50%
  

• Checking Audio Status:

  const audio = document.querySelector('audio');
  if (audio.paused) {
    // Audio is paused
  } else {
    // Audio is playing
  }
  

Additional Attributes

• autoplay: Automatically starts playing the audio when the page loads.
• loop: Repeats the audio playback after it finishes.
• preload: Specifies when the audio should be loaded:
  • auto: Loads the audio as soon as the page loads.
  • metadata: Loads only the audio metadata.
  • none: Doesn't preload the audio.

Conclusion

The <audio> tag in HTML5 is a powerful and versatile tool for adding audio content to your web pages. With the help of JavaScript, you can further enhance the playback experience by adding custom controls and features.