Music Player - Code Explanation

HTML STRUCTURE

<div class="container">
    <h1>🎵 Music Player</h1>
    
    <div class="player-display">
        <div class="song-title" id="songTitle">Song Title</div>
        <div class="song-artist" id="songArtist">Artist Name</div>
        <div class="progress-bar" id="progressBar">
            <div class="progress" id="progress"></div>
        </div>
        <div class="time-info">
            <span id="currentTime">0:00</span>
            <span id="duration">0:00</span>
        </div>
    </div>
    
    <div class="playlist">
        <div class="playlist-title">Playlist</div>
        <ul class="song-list" id="songList"></ul>
    </div>
    
    <div class="controls">
        <button onclick="previousSong()">⏮ Previous</button>
        <button id="playBtn" onclick="togglePlay()">▶ Play</button>
        <button onclick="nextSong()">Next ⏭</button>
    </div>
    
    <div class="volume-control">
        <span>🔊</span>
        <input type="range" id="volumeControl" min="0" max="100" value="70">
        <span id="volumeValue">70%</span>
    </div>
</div>

JAVASCRIPT CODE

const songs = [
    { title: 'Summer Vibes', artist: 'DJ Cool', duration: 240 },
    { title: 'Night Dreams', artist: 'Luna Moon', duration: 200 },
    // ... more songs
];

let currentSongIndex = 0;
let isPlaying = false;
let currentTime = 0;

function renderPlaylist() {
    const songList = document.getElementById('songList');
    songList.innerHTML = '';
    songs.forEach((song, index) => {
        const li = document.createElement('li');
        li.className = 'song-item' + (index === currentSongIndex ? ' active' : '');
        li.textContent = song.title + ' - ' + song.artist;
        li.onclick = () => playSong(index);
        songList.appendChild(li);
    });
}

function updateDisplay() {
    const song = songs[currentSongIndex];
    document.getElementById('songTitle').textContent = song.title;
    document.getElementById('songArtist').textContent = song.artist;
    document.getElementById('duration').textContent = formatTime(song.duration);
}

function togglePlay() {
    isPlaying = !isPlaying;
    document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
    if (isPlaying) simulatePlayback();
}

function nextSong() {
    currentSongIndex = (currentSongIndex + 1) % songs.length;
    playSong(currentSongIndex);
}

function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return mins + ':' + (secs < 10 ? '0' : '') + secs;
}

KEY FEATURES

✓ Song Array Data Structure
✓ Play/Pause/Next/Previous Controls
✓ Progress Bar with Time Display
✓ Playlist Management
✓ Volume Control with Range Input
✓ Current Time Tracking
✓ Automatic Next Song on Completion

LEARNING CONCEPTS

• Array Methods (forEach, map)
• DOM Manipulation (getElementById, innerHTML)
• Event Listeners (onclick, oninput)
• Time Calculations (minutes, seconds)
• State Management (currentTime, isPlaying)
• Dynamic Element Creation
• Modulo Operator for Looping

← Back to Project