Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #282c34;
            color: white;
        }
        .player {
            margin-top: 50px;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Simple Music Player</h1>
    <div class="player">
        <audio id="audio" src="song.mp3"></audio>
        <button onclick="playAudio()">Play</button>
        <button onclick="pauseAudio()">Pause</button>
        <button onclick="nextSong()">Next</button>
    </div>

    <script>
        const songs = ["song1.mp3", "song2.mp3", "song3.mp3"];
        let currentSong = 0;
        const audio = document.getElementById("audio");
        
        function playAudio() {
            audio.play();
        }
        
        function pauseAudio() {
            audio.pause();
        }
        
        function nextSong() {
            currentSong = (currentSong + 1) % songs.length;
            audio.src = songs[currentSong];
            playAudio();
        }
    </script>
</body>
</html>
Editor is loading...