Skip to main content

HTML Audio — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the HTML Audio lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Add an audio player

    easy10 min

    Add an audio element with controls.

  2. 2

    Offer two formats

    easy10 min

    Add two source elements inside audio.

  3. 3

    Preload metadata only

    easy10 min

    Set preload to metadata.

  4. 4

    Loop the audio

    easy10 min

    Make the clip repeat.

  5. 5

    Add fallback text

    medium10 min

    Include a message for browsers without audio support.

Find the bug(5)

  1. 1

    Fix the player with no controls

    easy8 min

    Without controls the user cannot play anything.

  2. 2

    Fix the wrong element

    easy8 min

    Sound belongs in an audio element, not video.

  3. 3

    Fix the sources outside the player

    easy8 min

    Source elements must sit inside the audio element.

  4. 4

    Fix the autoplay without controls

    easy8 min

    Autoplaying with no controls traps the listener.

  5. 5

    Fix the wrong preload value

    easy8 min

    The value should be metadata, not meta.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace