Audio tag basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this audio tag do in the browser?

Consider this HTML code:

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

What will the user see or experience when this code runs in a modern browser?

HTML

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

A An audio player with play/pause buttons appears, allowing the user to play the song.

B The audio plays automatically without any controls visible to the user.

C Nothing appears on the page because the audio tag is empty.

D A download link for the song appears instead of a player.

💡 Hint

The controls attribute adds visible buttons for the user.

The

🧠 Conceptual

intermediate

What does the 'autoplay' attribute do in an audio tag?

Given this audio tag:

<audio src="music.mp3" autoplay></audio>

What happens when the page loads?

HTML

<audio src="music.mp3" autoplay></audio>

A The audio waits for the user to click play before starting.

B The audio shows controls but does not play automatically.

C The audio starts playing automatically as soon as the page loads.

D The audio is muted and does not play at all.

💡 Hint

Autoplay means play without user action.

The autoplay attribute tells the browser to start playing the audio as soon as it can, without waiting for the user to press play.

📝 Syntax

advanced

Which audio tag syntax correctly includes multiple source formats?

You want to provide an audio file in both MP3 and OGG formats for better browser support. Which code snippet is correct?

A <audio controls src="sound.mp3" src="sound.ogg"></audio>

B <audio controls src="sound.mp3" type="audio/mpeg"><source src="sound.ogg" type="audio/ogg"></audio>

C <audio controls><source src="sound.mp3"><source src="sound.ogg"></audio>

D <audio controls><source src="sound.mp3" type="audio/mpeg"><source src="sound.ogg" type="audio/ogg"></audio>

💡 Hint

Use multiple tags inside the audio tag.

The correct way is to use multiple elements inside the

❓ accessibility

advanced

How to make an audio player accessible for screen readers?

Which attribute or technique improves accessibility for an audio player?

HTML

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

A Remove controls so screen readers do not get confused.

B Add an aria-label describing the audio content, e.g., aria-label="Podcast episode 1".

C Use only autoplay without controls to avoid user interaction.

D Add a title attribute with the file name only.

💡 Hint

Screen readers need descriptive labels.

Adding aria-label gives screen readers a meaningful description of the audio content, helping users understand what they will hear.

❓ layout

expert

How to center an audio player horizontally and make it responsive?

You want the audio player to be centered on the page and adjust its width on small screens. Which CSS snippet achieves this best?

HTML

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

A audio { display: block; margin-inline: auto; width: 100%; max-width: 30rem; }

B audio { text-align: center; width: 50%; }

C audio { float: center; width: 300px; }

D audio { display: inline; margin: 0 auto; max-width: 300px; }

💡 Hint

Use block display and auto margins for centering.

Setting display to block makes the audio element behave like a block. margin-inline: auto centers it horizontally. Width 100% with max-width limits size on large screens and allows shrinking on small screens.

Practice

1. What is the main purpose of the <audio> tag in HTML?

easy

A. To create clickable buttons

B. To display images on a web page

C. To add sound or music to a web page

D. To add video content

Solution

1. Step 1: Understand the tag's function

   The <audio> tag is designed to embed sound files in web pages.

2. Step 2: Compare with other media tags

   Unlike <img> for images or <video> for videos, <audio> specifically handles audio content.

3. Final Answer:

   To add sound or music to a web page -> Option C

4. Quick Check:

   Audio tag = sound embedding [OK]

Hint: Audio tag is for sound, not images or video [OK]

Common Mistakes:

• Confusing audio with video or images
• Thinking audio tag creates buttons
• Assuming audio tag is for text

2. Which attribute must you add to the <audio> tag to show playback controls like play and pause buttons?

easy

A. src

B. loop

C. autoplay

D. controls

Solution

1. Step 1: Identify attribute for controls

   The controls attribute tells the browser to display play, pause, and volume buttons.

2. Step 2: Differentiate from other attributes

   src sets the audio file, autoplay starts playing automatically, and loop repeats the audio.

3. Final Answer:

   controls -> Option D

4. Quick Check:

   Controls attribute = playback buttons [OK]

Hint: Controls attribute shows play/pause buttons [OK]

Common Mistakes:

• Using src instead of controls for buttons
• Confusing autoplay with controls
• Forgetting controls attribute to show buttons

3. What will happen when this HTML code runs in a modern browser?

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

medium

A. The audio player with controls will appear and play sound.mp3 or sound.ogg

B. Only sound.ogg will play because it is the last source

C. No audio will play because multiple sources confuse the browser

D. The text 'Your browser does not support the audio element.' will always show

Solution

1. Step 1: Understand multiple sources usage

   The <source> tags provide alternative audio formats so browsers can pick the one they support.

2. Step 2: Check controls and fallback text

   The controls attribute shows the player, and fallback text shows only if audio is unsupported.

3. Final Answer:

   The audio player with controls will appear and play sound.mp3 or sound.ogg -> Option A

4. Quick Check:

   Multiple sources = browser picks supported audio [OK]

Hint: Multiple sources let browsers pick supported audio [OK]

Common Mistakes:

• Thinking only last source plays
• Assuming fallback text always shows
• Believing multiple sources cause errors

4. Identify the error in this audio tag code:

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

medium

A. The controls attribute is missing

B. The src attribute should not be used with <source> tags inside <audio>

C. The type attribute is missing in the src attribute

D. The <source> tag must come before the src attribute

Solution

1. Step 1: Understand usage of src and source

   When using <source> tags inside <audio>, do not use the src attribute on <audio> itself.

2. Step 2: Reason why mixing causes issues

   Using both confuses the browser which source to play; only <source> tags or only src should be used.

3. Final Answer:

   The src attribute should not be used with <source> tags inside <audio> -> Option B

4. Quick Check:

   Use either src or source tags, not both [OK]

Hint: Use src or source tags, never both together [OK]

Common Mistakes:

• Using src attribute with source tags
• Thinking controls attribute is missing
• Believing order of source and src matters

5. You want to add an audio player that automatically plays a sound once the page loads, loops it continuously, and hides controls. Which is the correct HTML code?

hard

A. <audio src="theme.mp3" autoplay loop></audio>

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

C. <audio src="theme.mp3" autoplay loop controls></audio>

D. <audio src="theme.mp3" loop></audio>

Solution

1. Step 1: Identify attributes for autoplay and loop

   The autoplay attribute starts playing automatically, and loop repeats the audio continuously.

2. Step 2: Check controls visibility

   To hide controls, do not include the controls attribute.

3. Final Answer:

   <audio src="theme.mp3" autoplay loop></audio> -> Option A

4. Quick Check:

   Autoplay + loop without controls = <audio src="theme.mp3" autoplay loop></audio> [OK]

Hint: Autoplay and loop without controls hides buttons [OK]

Common Mistakes:

• Including controls when hiding buttons is needed
• Forgetting autoplay or loop attributes
• Using incorrect attribute names