HTML Audio

Learn how to add music and sound to your website!

What is HTML Audio?

The HTML <audio> tag lets you play sound files directly in your web browser — no plugins needed!

  • Music: Background music, songs
  • Podcasts: Audio episodes and interviews
  • Sound Effects: Click sounds, notifications
  • Voice Overs: Narration and audio guides

Real-Life Example: Just like YouTube plays videos, the audio tag plays sound files on your website!

Basic Audio Tag

Example: Simple Audio Player


<audio src="song.mp3" controls>
    Your browser does not support audio.
</audio>
  • src – Path to your audio file
  • controls – Shows play/pause buttons
  • Text inside displays if audio doesn't work

Audio Controls

Example: Audio Player with Controls


<!-- ✅ With controls (recommended) -->
<audio src="music.mp3" controls></audio>

<!-- ❌ Without controls (user can't control it) -->
<audio src="music.mp3"></audio>

Important: Always add controls so users can play, pause, and adjust volume!

Autoplay and Loop

Example: Auto-playing Audio


<!-- Plays automatically when page loads -->
<audio src="welcome.mp3" autoplay controls></audio>

<!-- Loops continuously -->
<audio src="background.mp3" loop controls></audio>

<!-- Both autoplay and loop -->
<audio src="ambient.mp3" autoplay loop controls></audio>

Warning: Autoplay can be annoying! Most browsers block it unless the audio is muted.

Muted Audio

Example: Starting Muted


<!-- Starts muted (user can unmute) -->
<audio src="music.mp3" muted controls></audio>

<!-- Autoplay works better when muted -->
<audio src="background.mp3" autoplay muted loop controls></audio>

Audio Formats

Example: Multiple Format Support


<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.wav" type="audio/wav">
    Your browser does not support audio.
</audio>
  • MP3 – Most widely supported (recommended)
  • WAV – High quality, large file size
  • OGG – Open format, good quality

Pro Tip: Use MP3 format — it works in all modern browsers!

Preload Options

Example: Controlling When Audio Loads


<!-- Load entire audio file on page load -->
<audio src="song.mp3" preload="auto" controls></audio>

<!-- Load only metadata (duration, etc.) -->
<audio src="song.mp3" preload="metadata" controls></audio>

<!-- Don't load until user clicks play -->
<audio src="song.mp3" preload="none" controls></audio>
  • auto – Loads the whole file
  • metadata – Loads only basic info
  • none – Waits for user to play

Styling Audio Player

Example: Adding Custom Styles


<audio src="music.mp3" controls style="width: 100%;"></audio>

<audio src="podcast.mp3" controls class="audio-player"></audio>

Note: Default audio controls look different in each browser. For custom designs, use JavaScript!

Complete Audio Example

Example: Full Audio Implementation


<h2>Listen to Our Podcast</h2>

<audio controls preload="metadata">
    <source src="podcast-episode-1.mp3" type="audio/mpeg">
    <source src="podcast-episode-1.ogg" type="audio/ogg">
    Your browser does not support the audio element.
    <a href="podcast-episode-1.mp3">Download the podcast</a>
</audio>

<p>Episode 1: Introduction to Web Development</p>

Audio Accessibility

Example: Accessible Audio


<figure>
    <figcaption>Relaxing Nature Sounds</figcaption>
    <audio src="nature.mp3" controls>
        Your browser does not support audio playback.
    </audio>
</figure>

<!-- Provide transcript for accessibility -->
<details>
    <summary>Audio Transcript</summary>
    <p>[Full text transcript of the audio content]</p>
</details>

Accessibility Tip: Provide transcripts for users who are deaf or hard of hearing!

Best Practices

  • Always include the controls attribute
  • Use MP3 format for best compatibility
  • Avoid autoplay unless audio is muted
  • Keep file sizes small (compress audio)
  • Provide fallback text for unsupported browsers
  • Add transcripts for accessibility

Pro Tip: Test your audio in different browsers to ensure it works everywhere!