Project 21: Music Player UI

HTML Masterclass

Builds on these lessons

Step 1 of 2

Project

Player Skeleton & a Fullscreen Hook

Build the player: an <h1> "Now Playing", the track title/artist, and an <audio controls> element. Then add a <button type="button" id="fullscreen-btn" data-target="player-visualizer">. The Fullscreen API needs a real element id to expand — this button is the markup hook a script would wire up; no JS is written here, just the id it needs.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Now Playing | Wavelength</title>
</head>
<body>
  <h1>Now Playing</h1>
  <p>Horizon — Aurora Fields</p>
  <div id="player-visualizer"></div>
  <audio controls>
    <source src="horizon.mp3" type="audio/mpeg">
  </audio>
  <button type="button" id="fullscreen-btn" data-target="player-visualizer">View Fullscreen</button>
</body>
</html>

← Previous Next →