Audio tag basics in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an audio player that plays "song.mp3".

HTML

<audio controls>
  <source src="song.mp3" type="[1]">
  Your browser does not support the audio element.
</audio>

Drag options to blanks, or click blank then click option'

Avideo/mp4

Baudio/mpeg

Cimage/png

Dtext/html

Attempts:

3 left

💡 Hint

Common Mistakes

Using video or image MIME types instead of audio types.

Leaving the type attribute empty or incorrect.

The type attribute specifies the audio file format. For MP3 files, use audio/mpeg.

2fill in blank

medium

Complete the code to add an audio player that automatically starts playing when the page loads.

HTML

<audio controls [1]>
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Drag options to blanks, or click blank then click option'

Aautoplay

Bmuted

Cloop

Dpreload

Attempts:

3 left

💡 Hint

Common Mistakes

Using loop instead of autoplay.

Forgetting that autoplay is a boolean attribute.

The autoplay attribute makes the audio start playing automatically when the page loads.

3fill in blank

hard

Fix the error in the audio tag to make it valid and playable.

HTML

<audio controls>
  <source src="sound.wav" type="[1]">
  Your browser does not support the audio element.
</audio>

Drag options to blanks, or click blank then click option'

Aaudio/mp3

Baudio/wave

Caudio/wav

Dvideo/wav

Attempts:

3 left

💡 Hint

Common Mistakes

Using audio/mp3 for WAV files.

Using video MIME types for audio files.

The correct MIME type for WAV audio files is audio/wav. Using audio/wave or audio/mp3 is incorrect for WAV files.

4fill in blank

hard

Fill both blanks to create an audio player that loops and is muted by default.

HTML

<audio controls [1] [2]>
  <source src="track.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Drag options to blanks, or click blank then click option'

Aloop

Bautoplay

Cmuted

Dpreload

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing autoplay with loop.

Using preload instead of muted.

The loop attribute makes the audio repeat continuously. The muted attribute starts the audio muted.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps audio file names to their MIME types, but only for files ending with '.mp3'.

HTML

audio_types = { [1]: [2] for [3] in files if [1].endswith('.mp3') }

Drag options to blanks, or click blank then click option'

Afile

B"audio/mpeg"

Dfilename

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently.

Not filtering files by '.mp3' extension.

This comprehension creates a dictionary where each key is a file name ending with '.mp3' and the value is the MIME type "audio/mpeg".