• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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.

HTML Audio Quiz

Q1: Which HTML tag is used to play audio?

A. <sound>
B. <music>
C. <audio>
D. <voice>

Q2: What does the controls attribute do in <audio>?

A. Adds autoplay
B. Allows user interaction (play, pause, etc.)
C. Changes volume
D. Enables looping

Q3: Which attribute repeats the audio when finished?

A. restart
B. loop
C. cycle
D. replay

Q4: What is the most widely supported audio format?

A. .wav
B. .ogg
C. .flac
D. .mp3

Q5: How do you specify the audio source file?

A. <src>
B. href
C. source tag with src
D. path attribute

Q6: What happens if a browser does not support the <audio> tag?

A. The page crashes
B. Nothing is shown
C. The fallback message is shown
D. A popup appears

Q7: Which of the following is a valid MIME type for an audio file?

A. audio/jpg
B. audio/mp3
C. audio/mpeg
D. audio/html

Q8: What does muted do in the <audio> tag?

A. Increases volume
B. Stops playback
C. Starts playback with sound off
D. Enables user mute button only

Q9: What does preload="none" mean?

A. Audio will be downloaded before playing
B. Audio will play automatically
C. Audio file won't be downloaded until user presses play
D. Audio file is hidden

Q10: Can you include multiple audio formats in one audio tag?

A. No
B. Yes, using multiple <source> tags
C. Only with JavaScript
D. Only in older browsers
← Previous Next →
Login
Go Back Top