Give Your Website a Voice!

Think about podcasts, music players, pronunciation guides, and sound effects. Audio can make a website more engaging and useful.

HTML includes a built-in <audio> element that lets visitors play sound directly in their browsers.

Meet the <audio> Element

The basic structure is similar to the video element you learned about in the previous lesson.

<audio controls>
  <source src="my-audio.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

The controls attribute displays the browser’s audio player. The <source> element identifies the file and its media type.

You can also use src directly on <audio> when you only need one source.

Make Your Sound More Compatible

Browsers support common audio formats such as MP3, WAV, and Ogg, although compatibility depends on the browser and codec.

<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

The browser checks the sources and attempts to use one it can play. Offering more than one format can help when you’re supporting a wide range of devices.

Choose How Audio Behaves

Audio supports many of the same playback attributes as video.

<audio
  controls
  preload="metadata"
  loop
>
  <source src="background.mp3" type="audio/mpeg">
</audio>

• controls shows the audio controls.
• loop repeats the audio when it finishes.
• muted starts the element muted.
• preload provides a loading hint to the browser.
• autoplay requests automatic playback, but browsers often block it.

Make Audio Content Available to Everyone

Not everyone can hear audio, and some visitors prefer reading instead of listening.

For spoken content, provide an accurate transcript. It helps people who are deaf or hard of hearing, as well as visitors who want to skim or search the content.

<h2>Welcome Message</h2>

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

<details>
  <summary>Read the transcript</summary>
  <p>Welcome to our coding tutorial!</p>
</details>

Also give your audio player a clear heading or label so visitors know what they’re about to hear.

Control Audio with JavaScript

JavaScript gives you access to audio playback through methods and properties such as play(), pause(), currentTime, and volume.

<audio id="myAudio">
  <source src="sound.mp3" type="audio/mpeg">
</audio>

<button type="button" id="playButton">
  Play / Pause
</button>

<script>
  const audio = document.getElementById("myAudio");

  document.getElementById("playButton")
    .addEventListener("click", function() {
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    });
</script>

The volume property ranges from 0 (silent) to 1 (full volume). You can connect it to a slider to create a volume control.

Create a Better Listening Experience

• Use clear labels for audio tracks and controls.
• Include transcripts for spoken content.
• Avoid unexpected autoplay.
• Provide audio in commonly supported formats.
• Make custom controls keyboard-accessible.
• Keep native controls available unless your custom player provides equivalent accessibility.
• Use audio files you have permission to share.

Your Website Has Sound!

You’ve learned how to embed audio and build a more interactive listening experience.

• How the HTML audio element works.
• How to use multiple audio sources.
• How to configure playback attributes.
• Why transcripts and accessible controls matter.
• How to control audio with JavaScript.

Next up: Drag and Drop — learn how to move elements around a page using your mouse or other input devices!