<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music Player</title>
<link rel="stylesheet" href="style.css" />

</head>
<body>
<main class="player">
  <div class="cover">🎵</div>
  <h2 id="title">Track Title</h2>
  <p id="artist">Artist</p>
  <audio id="audio" preload="metadata"></audio>
  <input id="progress" type="range" min="0" max="100" value="0" />
  <div class="times"><span id="current">0:00</span><span id="duration">0:00</span></div>
  <div class="controls">
    <button id="prev">⏮</button>
    <button id="play">▶</button>
    <button id="next">⏭</button>
  </div>
  <input id="volume" type="range" min="0" max="1" step="0.05" value="0.7" />
</main>
<script src="script.js"></script>
</body>
</html>