music player code
Playlist
0:00
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