HTML Audio – Solved Practice Questions

By /

Introduction

The HTML <audio> element is used to add sound and music to a webpage. It supports audio files such as MP3, WAV, and OGG. In these solved questions, you will practice basic audio playback, controls, multiple formats, autoplay, looping, muted audio, and fallback text.

Question 1

Problem Statement

Create a webpage that plays an audio file using the <audio> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Audio</title>
</head>
<body>

    <h1>My Audio</h1>

    <audio src="music.mp3" controls>
        Your browser does not support the audio element.
    </audio>

</body>
</html>

Output

My Audio

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • <audio> creates an audio player.
  • src="music.mp3" specifies the audio file.
  • controls displays browser audio controls.
  • The fallback text is shown if the browser does not support the element.

Question 2

Problem Statement

Create an audio player using a separate <source> element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Audio Source</title>
</head>
<body>

    <h1>Play Music</h1>

    <audio controls>

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

        Your browser does not support the audio element.

    </audio>

</body>
</html>

Output

Play Music

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • <audio> creates the audio player.
  • <source> specifies the audio file.
  • type="audio/mpeg" tells the browser that the file is an MP3.
  • Using <source> gives you more flexibility to provide multiple formats.

Question 3

Problem Statement

Create an audio player that provides MP3, WAV, and OGG versions of the same audio.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Audio Formats</title>
</head>
<body>

    <h1>Audio Player</h1>

    <audio controls>

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

        <source src="music.wav" type="audio/wav">

        <source src="music.ogg" type="audio/ogg">

        Your browser does not support the audio element.

    </audio>

</body>
</html>

Output

Audio Player

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • Multiple <source> elements provide different audio formats.
  • The browser chooses the first format it can play.
  • audio/mpeg represents MP3.
  • audio/wav represents WAV.
  • audio/ogg represents OGG.

Question 4

Problem Statement

Create an audio player that starts automatically when the page loads.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Autoplay Audio</title>
</head>
<body>

    <h1>Welcome</h1>

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

</body>
</html>

Output

Welcome

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • autoplay asks the browser to start playback automatically.
  • Modern browsers may block autoplay when the audio has sound, especially if the user has not interacted with the page.
  • controls still allows the user to control playback when available.

Question 5

Problem Statement

Create an audio player that automatically repeats the audio after it finishes.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Loop Audio</title>
</head>
<body>

    <h1>Background Music</h1>

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

</body>
</html>

Output

Background Music

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • loop makes the audio start again after it finishes.
  • controls gives the user playback controls.
  • This can be useful for repeating audio, although continuous background audio should be used carefully.

Question 6

Problem Statement

Create an audio player that starts automatically but remains muted.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Muted Audio</title>
</head>
<body>

    <h1>Welcome to My Website</h1>

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

</body>
</html>

Output

Welcome to My Website

[ ▶  ─────────────── 🔇 ]

Step-by-Step Explanation

  • autoplay asks the browser to start the audio automatically.
  • muted starts the audio without sound.
  • Muted autoplay is generally more likely to be allowed by modern browsers than autoplay with sound.
  • controls allows the user to unmute and control playback.

Question 7

Problem Statement

Create an audio player that starts at a specific volume using JavaScript.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Audio Volume</title>
</head>
<body>

    <h1>Audio Volume Example</h1>

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

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

        audio.volume = 0.5;
    </script>

</body>
</html>

Output

Audio Volume Example

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • id="myAudio" identifies the audio element.
  • JavaScript gets the element using getElementById().
  • audio.volume = 0.5 sets the volume to 50%.
  • The volume value can range from 0 to 1.

Question 8

Problem Statement

Create an audio player with a message that appears when the browser does not support HTML audio.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Audio Fallback</title>
</head>
<body>

    <h1>Listen to Our Audio</h1>

    <audio controls>

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

        Your browser does not support HTML audio.
        Please use a modern web browser to play this file.

    </audio>

</body>
</html>

Output

In a supported browser:

Listen to Our Audio

[ ▶  ─────────────── 🔊 ]

If the browser cannot use the audio element, the fallback text can be displayed.

Step-by-Step Explanation

  • <audio> creates the audio player.
  • <source> specifies the audio file.
  • Text placed inside <audio> acts as fallback content.
  • This provides a helpful message when audio cannot be played.

Question 9

Problem Statement

Create an audio player with three audio formats and make the audio file preload its metadata.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Audio Preload</title>
</head>
<body>

    <h1>Online Lesson</h1>

    <audio controls preload="metadata">

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

        <source src="lesson.ogg" type="audio/ogg">

        Your browser does not support the audio element.

    </audio>

</body>
</html>

Output

Online Lesson

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • preload="metadata" tells the browser it may load basic information about the audio, such as its duration.
  • It does not request that the entire audio file be downloaded immediately.
  • Multiple <source> elements provide alternative formats.

Question 10

Problem Statement

Create a complete HTML audio player using controls, multiple formats, looping, and fallback text.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Complete Audio Player</title>
</head>
<body>

    <h1>My Music Player</h1>

    <p>Listen to the audio below:</p>

    <audio controls loop preload="metadata">

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

        <source src="music.ogg" type="audio/ogg">

        Your browser does not support HTML audio.

    </audio>

</body>
</html>

Output

My Music Player

Listen to the audio below:

[ ▶  ─────────────── 🔊 ]

Step-by-Step Explanation

  • <audio> creates the audio player.
  • controls displays playback controls.
  • loop repeats the audio after it finishes.
  • preload="metadata" allows the browser to load basic audio information.
  • <source> provides different audio formats.
  • The fallback message helps users whose browser cannot play the audio.

Key Takeaways

  • <audio> is used to add audio to an HTML webpage.
  • controls displays playback controls.
  • <source> allows you to specify audio files and formats.
  • autoplay requests automatic playback.
  • muted starts audio without sound.
  • loop repeats audio automatically.
  • preload controls how much audio information the browser should load before playback.
  • type="audio/mpeg" is commonly used for MP3 files.
  • type="audio/ogg" is used for OGG audio.
  • Fallback text can be placed inside <audio>.

Frequently Asked Questions (FAQs)

1. What is the HTML <audio> element?

The <audio> element is used to embed and play sound files directly on a webpage.

2. How do you add controls to an audio player?

Add the controls attribute:

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

3. Which audio format is commonly used on websites?

MP3 is widely used because it provides good browser support and relatively small file sizes.

4. What does the autoplay attribute do?

autoplay asks the browser to start the audio automatically when possible.

5. Why might autoplay not work?

Modern browsers often restrict autoplay of audio with sound to prevent unwanted playback.

6. What does loop do?

The loop attribute makes the audio start again automatically after it finishes.

7. What does muted do?

muted starts the audio with its sound turned off.

8. Why use multiple <source> elements?

Multiple sources allow the browser to choose a format it supports.

9. What does preload="metadata" mean?

It tells the browser that basic audio information, such as metadata and duration when available, can be loaded before playback.

10. Can HTML audio play without JavaScript?

Yes. Basic audio playback can be created using only HTML and the <audio> element.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top