HTML Audio

Subject: html

🔊 HTML <audio> Element

The <audio> element in HTML5 allows you to embed sound content — such as music, narration, or sound effects — directly into a web page without needing any plugins.

✅ Why Use HTML <audio>?

  • 🎧 Native audio playback in modern browsers
  • 🕹️ Built-in controls for play, pause, and volume
  • 🎼 Supports multiple file formats for compatibility
  • ♿ Better accessibility and page performance

🧱 Basic Syntax

🚀 Try it in Compiler

🛠️ Common <audio> Attributes

  • controls: Displays browser default audio controls
  • autoplay: Starts playback automatically when the page loads
  • loop: Repeats the audio once it ends
  • muted: Starts the audio in a muted state (useful for autoplay)
  • preload: Specifies if and how audio should preload
    • none: Don’t preload
    • metadata: Preload only meta info
    • auto: Let the browser decide (default)

🎧 Example: Basic HTML5 Audio Player

🚀 Try it in Compiler
  • Multiple <source> tags help ensure cross-browser compatibility.
  • The message inside <audio> is displayed if the browser doesn’t support the element.

🔁 Example: Autoplay, Loop, Muted

🚀 Try it in Compiler
  • autoplay: Starts playback automatically (often requires muted)
  • loop: Plays the audio on repeat
  • muted: Starts the audio silently

🎶 Supported Audio Formats

FormatExtensionBrowser Support
MP3.mp3✅ All modern browsers (Most used)
Ogg.ogg✅ Firefox, Chrome, Opera
WAV.wav✅ Modern browsers, larger file size

📌 Note: MP3 is the most commonly supported and used format.

♿ Accessibility Tips

  • Always include controls for user playback control.
  • Avoid autoplay with sound unless muted.
  • Provide transcripts for essential audio content when possible.

📌 Key Takeaway

  • HTML5 <audio> is the standard way to embed sound content on web pages.
  • Use multiple <source> formats for better compatibility.
  • Apply attributes like autoplay, loop, and muted carefully.
  • Keep user experience and accessibility in mind at all times.
Next: HTML Canvas