HTML Audio

HTML CODES & EXAMPLES

HTML Audio

Learn how to add audio, music, voice recordings and sound controls to a webpage using HTML.

What is HTML Audio?

Introduction to audio in HTML

HTML provides the <audio> element for adding sound and audio content to a webpage. The controls attribute displays browser audio controls such as play, pause and volume.

Important: Use accessible text and appropriate audio formats when adding audio to your website.

Basic Audio

Add an audio file to a webpage

basic-audio.html

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Audio Controls

Show browser audio controls

audio-controls.html

<audio
  src="lesson.mp3"
  controls
>
</audio>

Audio with Fallback Text

Provide a message when audio is unsupported

audio-fallback.html

<audio controls>

  <source
    src="lesson.mp3"
    type="audio/mpeg"
  >

  Your browser does not support
  the audio element.

</audio>

Multiple Audio Formats

Provide different audio formats

multiple-audio.html

<audio controls>

  <source
    src="lesson.mp3"
    type="audio/mpeg"
  >

  <source
    src="lesson.ogg"
    type="audio/ogg"
  >

  Your browser does not support
  the audio element.

</audio>

Audio Loop

Repeat the audio automatically

audio-loop.html

<audio
  src="music.mp3"
  controls
  loop
>
</audio>

Muted Audio

Start the audio in muted mode

muted-audio.html

<audio
  src="lesson.mp3"
  controls
  muted
>
</audio>

Autoplay Audio

Attempt to start audio automatically

autoplay-audio.html

<audio
  src="intro.mp3"
  controls
  autoplay
>
</audio>

⚠️ Modern browsers may block autoplay audio, especially when it has sound.

Autoplay + Muted

Common pattern for autoplay media

autoplay-muted.html

<audio
  src="background.mp3"
  autoplay
  muted
  loop
>
</audio>

Preload Audio

Control how the browser loads audio

preload-audio.html

<audio
  src="lesson.mp3"
  controls
  preload="metadata"
>
</audio>

Preload values: none metadata auto

Audio Download Link

Allow users to download an audio file

download-audio.html

<a
  href="lesson.mp3"
  download
>
  Download Audio
</a>

Audio Lesson

Create an educational audio lesson

audio-lesson.html

<section>

  <h2>
    Introduction to Computers
  </h2>

  <p>
    Listen to this lesson.
  </p>

  <audio controls>

    <source
      src="computer-fundamentals.mp3"
      type="audio/mpeg"
    >

    Your browser does not support
    audio playback.

  </audio>

</section>

Professional Audio Card

Create a styled audio lesson card

audio-card.html

<div class="audio-card">

  <div class="audio-icon">
    🎧
  </div>

  <div>

    <h3>
      Computer Fundamentals
    </h3>

    <p>
      Lesson 01 • Introduction
    </p>

    <audio controls>
      <source
        src="lesson.mp3"
        type="audio/mpeg"
      >
    </audio>

  </div>

</div>

<style>

.audio-card{

  display:flex;
  gap:18px;
  align-items:center;
  padding:20px;
  border-radius:16px;
  background:#f5f9ff;
  border:1px solid #dce8f5;

}

.audio-icon{

  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#1769d5;
  color:#fff;
  font-size:25px;

}

.audio-card h3{
  margin:0 0 5px;
}

.audio-card p{
  margin:0 0 12px;
  color:#718096;
}

</style>