• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Audio

← Previous Next →

🔹 What is the <audio> Tag?

The <audio> tag in HTML is used to embed sound/audio files into a webpage. It provides built-in controls for playing, pausing, and adjusting volume.

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

🔹 Key Attributes of <audio>

Attribute Description
src The path to the audio file
controls Displays play, pause, and volume controls
autoplay Starts playing the audio automatically
loop Repeats the audio when finished
muted Plays the audio with sound muted
preload Hints whether audio should be preloaded

🔹 Supported Audio Formats

Format Type Browser Support
.mp3 audio/mpeg ✅ Widely supported
.ogg audio/ogg ✅ Firefox, Chrome, Opera
.wav audio/wav ✅ All modern browsers
🔹 Example with All Attributes
<audio controls autoplay loop muted preload="auto">
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
🔹 Example Using Only src Attribute
<audio src="song.mp3" controls></audio>

🔹 Styling the Audio Player

Audio players are styled by the browser and can’t be fully customized with CSS, but you can style surrounding elements:

<style>
  .audio-container {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    width: 300px;
  }
</style>

<div class="audio-container">
  <audio controls>
    <source src="track.mp3" type="audio/mpeg">
  </audio>
</div>

Practice Questions

Q1. Embed an .mp3 file using the <audio> tag.

Q2. Add controls to let users play and pause audio.

Q3. Make the audio autoplay and loop continuously.

Q4. Include a fallback message for unsupported browsers.

Q5. Provide both .mp3 and .ogg versions of the same file.

Q6. Mute the audio on page load.

Q7. Use preload="none" and explain the behavior.

Q8. Embed three different audio tracks in one HTML page.

Q9. Style a custom background behind the audio player.

Q10. Add a download link for the same audio file below the player.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top