HTML5 Audio Element

Basic Audio Element

The <audio> tag embeds audio content in web pages.

The src attribute specifies the audio file, or use <source> elements for multiple formats.

The controls attribute displays play, pause, and volume controls.

Without controls, the audio element is invisible and can only be controlled via JavaScript.

Always include fallback text for browsers without audio support.

<!-- Simple audio with controls -->
<audio src="song.mp3" controls></audio>

<!-- Audio with multiple formats -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. 
     <a href="audio.mp3">Download MP3</a></p>
</audio>

<!-- Background audio (no controls) -->
<audio src="background-music.mp3" autoplay loop></audio>

Audio Formats

MP3 (.mp3) is the most widely supported format - works in all modern browsers.

Ogg Vorbis (.ogg) is an open format with good compression and quality.

WAV (.wav) provides uncompressed audio but has large file sizes.

AAC (.m4a, .aac) offers good quality and compression similar to MP3.

For best compatibility, provide MP3 as the primary format with Ogg as a fallback.

<!-- Recommended format combination -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Your browser doesn't support audio playback.
</audio>

<!-- High quality audio -->
<audio controls>
  <source src="music.m4a" type="audio/mp4">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Audio Attributes

controls displays the audio player interface.

autoplay starts playing automatically (blocked by most browsers unless muted).

loop repeats the audio continuously.

muted starts playback without sound.

preload suggests buffering: none, metadata (default), or auto.

volume sets the initial volume (0.0 to 1.0) - must be set via JavaScript.

Unlike video, audio has no width/height attributes since it's not visual.

<!-- Auto-looping background music -->
<audio autoplay loop muted id="bgMusic">
  <source src="ambient.mp3" type="audio/mpeg">
</audio>
<button onclick="toggleMute()">Toggle Music</button>

<script>
function toggleMute() {
  const audio = document.getElementById('bgMusic');
  audio.muted = !audio.muted;
}
</script>

<!-- Preload only metadata -->
<audio controls preload="metadata">
  <source src="large-audio-file.mp3" type="audio/mpeg">
</audio>

JavaScript Audio Control

The audio element has the same JavaScript API as video.

Properties: currentTime, duration, paused, ended, volume, playbackRate, muted.

Methods: play(), pause(), load(), canPlayType().

Events: play, pause, ended, timeupdate, volumechange, error, canplaythrough.

Create custom audio players, sound effects, or music visualizations.

<audio id="player">
  <source src="song.mp3" type="audio/mpeg">
</audio>

<div>
  <button id="playBtn">Play</button>
  <button onclick="skip(-10)">⏪ 10s</button>
  <button onclick="skip(10)">10s ⏩</button>
  <input type="range" id="volume" min="0" max="100" value="100">
  <span id="timer">0:00</span>
</div>

<script>
const audio = document.getElementById('player');
const playBtn = document.getElementById('playBtn');
const volumeSlider = document.getElementById('volume');

playBtn.onclick = () => {
  if (audio.paused) {
    audio.play();
    playBtn.textContent = 'Pause';
  } else {
    audio.pause();
    playBtn.textContent = 'Play';
  }
};

function skip(seconds) {
  audio.currentTime += seconds;
}

volumeSlider.oninput = function() {
  audio.volume = this.value / 100;
};

audio.ontimeupdate = () => {
  const mins = Math.floor(audio.currentTime / 60);
  const secs = Math.floor(audio.currentTime % 60);
  document.getElementById('timer').textContent = 
    `${mins}:${String(secs).padStart(2, '0')}`;
};
</script>

Audio Use Cases

Music players and podcasts require visible controls and track information.

Sound effects for games or interactions can be controlled entirely via JavaScript without controls.

Background music typically autoplays muted with a user-activated unmute button.

Accessibility requires transcripts for audio-only content.

Web Audio API provides advanced features like audio synthesis, effects, and visualization.

<!-- Podcast player -->
<audio controls>
  <source src="episode-1.mp3" type="audio/mpeg">
</audio>
<p><a href="transcript.html">Read transcript</a></p>

<!-- Sound effect (no controls) -->
<audio id="sfx" src="click.mp3"></audio>
<button onclick="document.getElementById('sfx').play()">Click Me!</button>

<!-- Music with unmute button -->
<audio id="music" src="theme.mp3" autoplay loop muted></audio>
<button onclick="unmute()">🔇 Enable Music</button>

<script>
function unmute() {
  const music = document.getElementById('music');
  music.muted = false;
  event.target.textContent = '🔊 Music Playing';
  event.target.disabled = true;
}
</script>