music player code

 

Playlist

Album Art



0:00

0:00



 

code

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Symphony – A Music Player</title>
    <script src=”https://cdn.tailwindcss.com”></script>
    <link rel=”preconnect” href=”https://fonts.googleapis.com”>
    <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
    <link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap” rel=”stylesheet”>
    <link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css” rel=”stylesheet”>
    <style>
        body {
            font-family: ‘Inter’, sans-serif;
            background-color: #0d1117;
        }
        .scroll-container::-webkit-scrollbar {
            width: 8px;
        }
        .scroll-container::-webkit-scrollbar-track {
            background: #1e2630;
            border-radius: 10px;
        }
        .scroll-container::-webkit-scrollbar-thumb {
            background-color: #4b5563;
            border-radius: 10px;
            border: 2px solid #1e2630;
        }
        .progress-bar {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #4b5563;
            border-radius: 5px;
            outline: none;
            transition: background 0.3s ease;
        }
        .progress-bar::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #1db954;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #1db954;
        }
        .volume-bar {
            -webkit-appearance: none;
            width: 100%;
            height: 4px;
            background: #4b5563;
            border-radius: 5px;
            outline: none;
        }
        .volume-bar::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            background: #1db954;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body class=”flex items-center justify-center min-h-screen text-gray-100 p-4 sm:p-6″>
    <div class=”w-full max-w-4xl bg-[#1a1f26] rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row”>
        <!– Left Panel: Playlist –>
        <div class=”w-full md:w-1/2 p-4 md:p-6 flex flex-col”>
            <h1 class=”text-3xl font-bold text-gray-50 mb-6″>Playlist</h1>
            <div id=”song-list” class=”flex-1 overflow-y-auto scroll-container pr-2″>
                <!– Song items will be dynamically added here –>
            </div>
        </div>
        <!– Right Panel: Player –>
        <div class=”w-full md:w-1/2 p-6 md:p-8 bg-[#1e2630] flex flex-col justify-between”>
            <div>
                <div class=”relative w-full h-auto aspect-square rounded-xl shadow-lg overflow-hidden mb-6″>
                    <img id=”album-art” src=”https://placehold.co/500×500/1db954/white?text=Symphony” alt=”Album Art” class=”w-full h-full object-cover transition-transform duration-300 transform hover:scale-105″>
                </div>
                <div class=”text-center mb-6″>
                    <h2 id=”song-title” class=”text-2xl font-semibold text-gray-50 truncate”></h2>
                    <p id=”song-artist” class=”text-md text-gray-400 truncate”></p>
                </div>
                <!– Player Controls –>
                <div class=”flex items-center justify-center mb-6″>
                    <button id=”prev-btn” class=”text-gray-300 hover:text-white transition-colors duration-200 focus:outline-none p-2 mx-2″>
                        <i class=”fas fa-step-backward text-2xl”></i>
                    </button>
                    <button id=”play-pause-btn” class=”bg-gradient-to-br from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg transition-transform duration-200 transform hover:scale-110 focus:outline-none”>
                        <i id=”play-pause-icon” class=”fas fa-play text-xl”></i>
                    </button>
                    <button id=”next-btn” class=”text-gray-300 hover:text-white transition-colors duration-200 focus:outline-none p-2 mx-2″>
                        <i class=”fas fa-step-forward text-2xl”></i>
                    </button>
                </div>
            </div>
            <!– Progress Bar –>
            <div class=”flex items-center space-x-4 mb-4″>
                <span id=”current-time” class=”text-xs text-gray-400″>0:00</span>
                <input type=”range” id=”progress-bar” class=”progress-bar” value=”0″ min=”0″ max=”100″>
                <span id=”duration-time” class=”text-xs text-gray-400″>0:00</span>
            </div>
            <!– Volume Control –>
            <div class=”flex items-center space-x-2″>
                <i class=”fas fa-volume-down text-gray-400″></i>
                <input type=”range” id=”volume-bar” class=”volume-bar” value=”100″ min=”0″ max=”100″>
                <i class=”fas fa-volume-up text-gray-400″></i>
            </div>
        </div>
    </div>
    <script>
        const songList = document.getElementById(‘song-list’);
        const playPauseBtn = document.getElementById(‘play-pause-btn’);
        const playPauseIcon = document.getElementById(‘play-pause-icon’);
        const nextBtn = document.getElementById(‘next-btn’);
        const prevBtn = document.getElementById(‘prev-btn’);
        const songTitle = document.getElementById(‘song-title’);
        const songArtist = document.getElementById(‘song-artist’);
        const albumArt = document.getElementById(‘album-art’);
        const progressBar = document.getElementById(‘progress-bar’);
        const currentTimeEl = document.getElementById(‘current-time’);
        const durationTimeEl = document.getElementById(‘duration-time’);
        const volumeBar = document.getElementById(‘volume-bar’);
        const audio = new Audio();
        let currentSongIndex = 0;
        let isPlaying = false;
        const playlist = [
            {
                title: “Upbeat Corporate”,
                artist: “Frankum”,
                albumArt: “https://placehold.co/500×500/1db954/white?text=Upbeat+Corporate”,
                audioSrc: “https://audio.jukehost.co.uk/5eR25xIu85wT0yGgP1Gz5E4O6yQ5kY6D.mp3”
            },
            {
                title: “Summer Breeze”,
                artist: “Lesfm”,
                albumArt: “https://placehold.co/500×500/1db954/white?text=Summer+Breeze”,
                audioSrc: “https://audio.jukehost.co.uk/x5C1WzM25l5Q7Y8Z4W1f7J2I0p0J8x1D.mp3”
            },
            {
                title: “Inspiring Corporate”,
                artist: “Frankum”,
                albumArt: “https://placehold.co/500×500/1db954/white?text=Inspiring+Corporate”,
                audioSrc: “https://audio.jukehost.co.uk/8w0Y4l6y8wT3t6j0Z3K7V5D5p5m6r5u3.mp3”
            },
            {
                title: “Happy Corporate”,
                artist: “Frankum”,
                albumArt: “https://placehold.co/500×500/1db954/white?text=Happy+Corporate”,
                audioSrc: “https://audio.jukehost.co.uk/k6s3m8y2f7p3j0h6w8g0c7r0c0u5f5x0.mp3”
            }
        ];
        // Function to format time
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainderSeconds = Math.floor(seconds % 60);
            return `${minutes}:${remainderSeconds < 10 ? ‘0’ : ”}${remainderSeconds}`;
        }
        // Function to load and play a new song
        function loadSong(songIndex) {
            const song = playlist[songIndex];
            audio.src = song.audioSrc;
            songTitle.textContent = song.title;
            songArtist.textContent = song.artist;
            albumArt.src = song.albumArt;
            if (isPlaying) {
                audio.play();
            }
        }
        // Function to render the song list
        function renderSongList() {
            songList.innerHTML = ”; // Clear the list first
            playlist.forEach((song, index) => {
                const songItem = document.createElement(‘div’);
                songItem.classList.add(‘flex’, ‘items-center’, ‘space-x-4’, ‘p-3′, ’rounded-lg’, ‘cursor-pointer’, ‘transition-colors’, ‘duration-200’, ‘hover:bg-[#2a313c]’, ‘mb-2’);
                songItem.innerHTML = `
                    <div class=”relative w-12 h-12 rounded-lg overflow-hidden”>
                        <img src=”${song.albumArt}” alt=”Album Art” class=”w-full h-full object-cover”>
                    </div>
                    <div class=”flex-1 min-w-0″>
                        <h3 class=”text-sm font-semibold truncate text-gray-50″>${song.title}</h3>
                        <p class=”text-xs text-gray-400 truncate”>${song.artist}</p>
                    </div>
                    <span class=”text-xs text-gray-400″></span>
                `;
                songItem.addEventListener(‘click’, () => {
                    currentSongIndex = index;
                    loadSong(currentSongIndex);
                    audio.play();
                    isPlaying = true;
                    playPauseIcon.classList.remove(‘fa-play’);
                    playPauseIcon.classList.add(‘fa-pause’);
                });
                songList.appendChild(songItem);
            });
        }
        // Play/Pause button logic
        playPauseBtn.addEventListener(‘click’, () => {
            if (isPlaying) {
                audio.pause();
                playPauseIcon.classList.remove(‘fa-pause’);
                playPauseIcon.classList.add(‘fa-play’);
            } else {
                audio.play();
                playPauseIcon.classList.remove(‘fa-play’);
                playPauseIcon.classList.add(‘fa-pause’);
            }
            isPlaying = !isPlaying;
        });
        // Next button logic
        nextBtn.addEventListener(‘click’, () => {
            currentSongIndex = (currentSongIndex + 1) % playlist.length;
            loadSong(currentSongIndex);
            audio.play();
            isPlaying = true;
            playPauseIcon.classList.remove(‘fa-play’);
            playPauseIcon.classList.add(‘fa-pause’);
        });
        // Previous button logic
        prevBtn.addEventListener(‘click’, () => {
            currentSongIndex = (currentSongIndex – 1 + playlist.length) % playlist.length;
            loadSong(currentSongIndex);
            audio.play();
            isPlaying = true;
            playPauseIcon.classList.remove(‘fa-play’);
            playPauseIcon.classList.add(‘fa-pause’);
        });
        // Update progress bar
        audio.addEventListener(‘timeupdate’, () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            progressBar.value = progress;
            currentTimeEl.textContent = formatTime(audio.currentTime);
        });
        // Update duration when metadata is loaded
        audio.addEventListener(‘loadedmetadata’, () => {
            durationTimeEl.textContent = formatTime(audio.duration);
        });
        // Seek functionality
        progressBar.addEventListener(‘input’, () => {
            const seekTime = (progressBar.value / 100) * audio.duration;
            audio.currentTime = seekTime;
        });
        // Volume control
        volumeBar.addEventListener(‘input’, () => {
            audio.volume = volumeBar.value / 100;
        });
        // Play next song when current song ends
        audio.addEventListener(‘ended’, () => {
            nextBtn.click();
        });
        // Initialize the player with the first song
        window.onload = function() {
            renderSongList();
            loadSong(currentSongIndex);
        };
    </script>
</body>
</html>

Post Comment

You May Have Missed