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.