HTML Music Player

<!DOCTYPE html>
<html>
<head>
    <title>Music Player</title>
    <style>
        /* Styles for the player */
        .player {
            width: 500px;
            margin: 0 auto;
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .play-pause-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fff;
            border: none;
            outline: none;
            cursor: pointer;
        }
        .play-pause-btn.playing {
            background-color: #28a745;
            color: #fff;
        }
        .progress-bar {
            width: 100%;
            height: 5px;
            background-color: #ddd;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .progress {
            width: 0%;
            height: 100%;
            background-color: #007bff;
            border-radius: 5px;
        }
        /* Style for the song image*/
        .song-image {
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="player">
        <div class="controls">
            <button class="play-pause-btn" onclick="playPause()"></button>
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
        </div>
        <img class="song-image" src="cover.png" alt="song cover">
    </div>

    <script>
        // Audio element
        var audio = new Audio();
        audio.src = "template.mp3";

        // Play/pause button
        var playPauseBtn = document.querySelector(".play-pause-btn");

        // Progress bar
        var progressBar = document.querySelector(".progress-bar");
        var progress = document.querySelector(".progress");

        // Play/pause function
        function playPause() {
            if (audio.paused) {
                audio.play();
                playPauseBtn.classList.add("playing");
            } else {
                audio.pause();
                playPauseBtn.classList.remove("playing");
            }
        }

        // Update progress bar
        audio.addEventListener("timeupdate", function () {
            var percentage = (audio.currentTime / audio.duration) * 100;
            progress.style.width = percentage + "%";
        });
    </script>
</body>

</html>