HTML Audio

HTML Audio

The HTML <audio> element is used to embed audio content in web pages.

HTML Audio Syntax

To embed audio, use the <audio> element with the src attribute:

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

The controls attribute adds audio controls, like play, pause, and volume.

HTML Audio - Multiple Formats

Different browsers support different audio formats. Use multiple <source> elements to ensure compatibility:

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

HTML Audio Attributes

HTML Audio - Autoplay

To start audio automatically, use the autoplay attribute:

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

Note: Most browsers do not autoplay audio. Add muted for autoplay to work:

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

HTML Audio - Browser Support

The numbers in the table specify the first browser version that fully supports the <audio> element:

HTML Audio Formats

There are three supported audio formats:

MP3 is the most widely supported format.

HTML Audio - Preload

The preload attribute specifies if and how the audio should be loaded when the page loads:

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

Values:

• auto - The browser should load the entire audio
• metadata - Load only audio metadata
• none - Do not load the audio

HTML Audio - Loop

The loop attribute specifies that the audio will start over again, every time it is finished:

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

HTML Audio - Muted

The muted attribute specifies that the audio output should be muted:

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

HTML Audio - JavaScript

JavaScript can be used to control audio playback:

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

<button onclick="playPause()">Play/Pause</button>

<script>
function playPause() {
  var audio = document.getElementById("myAudio");
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
}
</script>

HTML Audio - Volume Control

Use JavaScript to control audio volume:

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

<input type="range" min="0" max="1" step="0.1" value="1" onchange="setVolume(this.value)">

<script>
function setVolume(value) {
  var audio = document.getElementById("myAudio");
  audio.volume = value;
}
</script>

HTML Audio - Current Time

Display current playback time:

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

<p>Current time: <span id="currentTime">0:00</span></p>

<script>
var audio = document.getElementById("myAudio");
audio.addEventListener("timeupdate", function() {
  var minutes = Math.floor(audio.currentTime / 60);
  var seconds = Math.floor(audio.currentTime % 60);
  document.getElementById("currentTime").textContent = 
    minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
});
</script>

HTML Audio - Playlist

Create a simple audio playlist:

<audio id="myAudio" controls>
</audio>

<button onclick="playSong(0)">Song 1</button>
<button onclick="playSong(1)">Song 2</button>
<button onclick="playSong(2)">Song 3</button>

<script>
var songs = ["song1.mp3", "song2.mp3", "song3.mp3"];
var audio = document.getElementById("myAudio");

function playSong(index) {
  audio.src = songs[index];
  audio.play();
}
</script>

HTML Audio - Chapter Summary

• The HTML <audio> element is used to embed audio in web pages
• Use the controls attribute to show audio controls
• Use multiple <source> elements for browser compatibility
• MP3 is the most widely supported audio format
• Use autoplay muted for automatic playback
• Use loop for continuous playback
• JavaScript can control audio playback, volume, and timing