Okay, let's start building the frontend structure for your "MusicHub" website using HTML, CSS (with Bootstrap for responsiveness), and basic JavaScript. This initial setup will provide the core layout, navigation, a placeholder for content, and a basic music player structure. MusicHub - Your Music World

Featured Tracks

Song Title 1

Artist Name 1

Song Title 2

Artist Name 2

Song Title 3

Artist Name 3

Song Title 4

Artist Name 4

/* Add custom styles here */ body { padding-top: 56px; /* Adjust based on navbar height */ padding-bottom: 100px; /* Adjust based on player height */ background-color: #f8f9fa; /* Light background */ } .navbar-brand i { color: #1db954; /* Spotify-like green */ } .card { transition: transform 0.2s ease-in-out; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .card:hover { transform: scale(1.03); } .card-title { font-size: 1rem; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-text { font-size: 0.9rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .play-button i { font-size: 0.8em; } .music-player { min-height: 80px; /* Ensure player has some height */ box-shadow: 0 -2px 5px rgba(0,0,0,0.1); } .music-player .track-info { min-width: 150px; /* Give space for track info */ font-size: 0.9rem; } .music-player .track-info small { font-size: 0.8rem; } .player-controls button { font-size: 1.2rem; } .player-controls .btn-lg { font-size: 1.5rem; /* Make play/pause bigger */ } .volume-control { min-width: 150px; /* Give space for volume */ } .progress-container { height: 10px; /* Height for the container */ padding: 0 15px; /* Match container padding */ } #progress-bar { width: 100%; height: 5px; /* Make the range track thinner */ cursor: pointer; padding: 0; /* Remove default padding */ margin: 0; } /* Style range input thumb */ #progress-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: #0d6efd; /* Bootstrap primary color */ border-radius: 50%; cursor: pointer; margin-top: -3.5px; /* Center thumb vertically */ } #progress-bar::-moz-range-thumb { width: 12px; height: 12px; background: #0d6efd; border-radius: 50%; cursor: pointer; border: none; /* Remove default border */ } #volume-slider { max-width: 100px; /* Limit volume slider width */ height: 5px; } /* Responsive Adjustments */ @media (max-width: 767.98px) { body { padding-bottom: 120px; /* More space for player on mobile */ } .music-player { min-height: 100px; flex-direction: column; } .music-player .container-fluid { flex-direction: column; align-items: center; text-align: center; } .music-player .track-info { display: block !important; /* Show track info on mobile */ margin-bottom: 5px; text-align: center; width: 100%; } .player-controls { width: 100%; justify-content: center !important; margin-bottom: 5px; } .volume-control { display: none !important; /* Hide volume slider on small screens */ } .progress-container { margin-top: 5px; } } document.addEventListener('DOMContentLoaded', () => { const audioPlayer = document.getElementById('audio-player'); const playPauseButton = document.getElementById('play-pause-button'); const playPauseIcon = playPauseButton.querySelector('i'); const progressBar = document.getElementById('progress-bar'); const volumeSlider = document.getElementById('volume-slider'); const trackList = document.getElementById('track-list'); const playerTitle = document.getElementById('player-title'); const playerArtist = document.getElementById('player-artist'); // Add prev/next buttons if needed later // const prevButton = document.getElementById('prev-button'); // const nextButton = document.getElementById('next-button'); let currentTrackSrc = null; let currentTrackTitle = ''; let currentTrackArtist = ''; let isPlaying = false; // --- Event Listeners --- // 1. Play buttons on track cards if (trackList) { trackList.addEventListener('click', (event) => { const playButton = event.target.closest('.play-button'); if (playButton) { const src = playButton.dataset.src; const title = playButton.dataset.title || 'Unknown Title'; const artist = playButton.dataset.artist || 'Unknown Artist'; if (src && src !== currentTrackSrc) { loadTrack(src, title, artist); playTrack(); } else if (src === currentTrackSrc) { togglePlayPause(); } } }); } // 2. Main Play/Pause button playPauseButton.addEventListener('click', togglePlayPause); // 3. Audio Player events audioPlayer.addEventListener('play', () => { isPlaying = true; playPauseIcon.classList.remove('fa-play'); playPauseIcon.classList.add('fa-pause'); updatePlayerUI(); }); audioPlayer.addEventListener('pause', () => { isPlaying = false; playPauseIcon.classList.remove('fa-pause'); playPauseIcon.classList.add('fa-play'); }); audioPlayer.addEventListener('ended', () => { // Basic behavior: just stop and reset icon isPlaying = false; playPauseIcon.classList.remove('fa-pause'); playPauseIcon.classList.add('fa-play'); progressBar.value = 0; // Reset progress bar // TODO: Implement next track logic here if needed }); audioPlayer.addEventListener('timeupdate', updateProgressBar); audioPlayer.addEventListener('loadedmetadata', updateProgressBar); // Update duration once loaded // 4. Progress Bar interaction progressBar.addEventListener('input', () => { const seekTime = (progressBar.value / 100) * audioPlayer.duration; if (isFinite(seekTime)) { audioPlayer.currentTime = seekTime; } }); // 5. Volume Slider interaction volumeSlider.addEventListener('input', () => { audioPlayer.volume = volumeSlider.value; }); // --- Functions --- function loadTrack(src, title, artist) { currentTrackSrc = src; currentTrackTitle = title; currentTrackArtist = artist; audioPlayer.src = src; audioPlayer.load(); // Important to load the new source updatePlayerUI(); console.log(`Loading track: ${title} by ${artist}`); } function playTrack() { if (currentTrackSrc) { audioPlayer.play().catch(error => console.error("Playback failed:", error)); } } function pauseTrack() { audioPlayer.pause(); } function togglePlayPause() { if (!currentTrackSrc) return; // Don't do anything if no track is loaded if (isPlaying) { pauseTrack(); } else { playTrack(); } } function updateProgressBar() { if (audioPlayer.duration) { const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100; progressBar.value = progress; } else { progressBar.value = 0; // Reset if duration is not available } } function updatePlayerUI() { playerTitle.textContent = currentTrackTitle || 'No Song Playing'; playerArtist.textContent = currentTrackArtist || '---'; // Maybe highlight the currently playing track card in the future } // Initialize volume audioPlayer.volume = volumeSlider.value; // Initialize player UI updatePlayerUI(); }); This sets up: 1. **HTML (`index.html`):** A responsive layout using Bootstrap's grid and navbar. It includes placeholders for track cards and a fixed music player at the bottom. Sample track data and placeholder images are included. Font Awesome is linked for icons. 2. **CSS (`css/style.css`):** Basic custom styles to adjust padding for the fixed navbar/player, style the cards, and customize the player appearance. Includes media queries for basic mobile adjustments. 3. **JavaScript (`js/script.js`):** * Adds event listeners to the track "Play" buttons. * Adds event listeners to the main play/pause button, volume slider, and progress bar. * Handles loading tracks into the hidden `