« Previous Next »

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Output 1:

HTML <audio> Autoplay

Output:

Add muted after autoplay to let your audio file start playing automatically (but muted):

Output 3:

Practice Exercises

Task: How to embed an interactive audio player with player controls, multiple audio formats, muted autoplay, and fallback text?

Goal: Create an audio player that displays user controls, starts automatically in muted mode, supports OGG and MP3 formats via multiple sources, and provides a browser fallback warning.
💡 Hint: Combine controls, autoplay, and muted inside the <audio> tag, then specify multiple <source> tags with correct MIME type attributes (audio/ogg and audio/mpeg).
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Audio Practice</title>
  </head>
  <body>

    <h2>Podcast Audio Player</h2>

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

  </body>
</html>
Output:

Podcast Audio Player

Explanation: The <audio> tag embeds sound files directly into the browser. The controls attribute provides built-in play, pause, and volume buttons. Including autoplay starts the audio upon loading, but modern browsers require muted for autoplay to work seamlessly without being blocked by autoplay policies. The nested <source> elements allow the browser to automatically pick the first supported format (`audio/ogg` or `audio/mpeg`), while any unparsed text acts as a fallback for unsupported browsers.
« Previous Next »