Define an array of song objects, where each object contains information about a song, such as its title, artist, album, and file path.
Create a function that initializes the music player by setting up the necessary HTML elements and event listeners. This function should also load the first song in the array and display its information in the player.
Create functions to handle playing, pausing, and skipping tracks. These functions should update the HTML elements to reflect the current song and play or pause the audio file.
Create functions to handle the progress bar and current time display. These functions should update the progress bar and current time as the song plays.
Create functions to handle user interactions with the music player, such as clicking on the play/pause button or clicking on a song in the playlist.
Add styling to make the music player look visually appealing and user-friendly.
If you want to have the rest of the css code click here.
JavaScript
// Define the audio player and song list variables const audioPlayer = document.getElementById("audio-player"); const songList = document.getElementById("song-list");
// Define the current song and index variables let currentSong = null; let currentIndex = 0;
// Define the play button variable and add an event listener to it const playButton = document.getElementById("play"); playButton.addEventListener("click", togglePlay);
// Define the previous and next button variables and add event listeners to them const prevButton = document.getElementById("prev"); prevButton.addEventListener("click", playPrevSong);
// Define the progress bar and time info variables const progressBar = document.getElementById("progress-bar"); const timeInfo = document.getElementById("time-info");
// Define the song list items and add event listeners to them const songItems = songList.getElementsByTagName("li"); for (let i = 0; i < songItems.length; i++) { songItems[i].addEventListener("click", function() { playSong(i); }); }
// Initialize the audio player audioPlayer.src = songItems[0].getAttribute("data-src"); audioPlayer.load();
// Function to play a song function playSong(index) { // Set the current song and index variables currentSong = songItems[index]; currentIndex = index;
// Update the song info display const songTitle = currentSong.getElementsByTagName("span")[0].textContent; const songArtist = currentSong.getElementsByTagName("span")[1].textContent; document.getElementById("song-title").textContent = songTitle; document.getElementById("song-artist").textContent = songArtist;
// Update the active class on the song list items for (let i = 0; i < songItems.length; i++) { songItems[i].classList.remove("active"); } currentSong.classList.add("active");
// Load and play the selected song audioPlayer.src = currentSong.getAttribute("data-src"); audioPlayer.play();
// Update the play button icon playButton.innerHTML = "<i class='fas fa-pause'></i>"; }
// Function to toggle the play/pause state of the audio player function togglePlay() { if (audioPlayer.paused) { audioPlayer.play(); playButton.innerHTML = "<i class='fas fa-pause'></i>"; } else { audioPlayer.pause(); playButton.innerHTML = "<i class='fas fa-play'></i>"; } }
// Function to play the previous song function playPrevSong() { if (currentIndex === 0) { playSong(songItems.length - 1); } else { playSong(currentIndex - 1); } }
// Function to play the next song function playNextSong() { if (currentIndex === songItems.length - 1) { playSong(0); } else { playSong(currentIndex + 1); } }
// Event listener to update the progress bar and time info as the song plays audioPlayer.addEventListener("timeupdate", function() { const duration = audioPlayer.duration; const currentTime = audioPlayer.currentTime; const progress = (currentTime / duration) * 100; progressBar.style.width = progress + "%"; timeInfo.textContent = formatTime(currentTime) + " / " + formatTime(duration); }); // Function to format the time in minutes and seconds function formatTime(time) { const minutes = Math.floor(time / 60); const seconds = Math.floor(time % 60); return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; } // Function to initialize the music player function initializePlayer() { // Get references to the DOM elements const audioElement = document.getElementById("audio"); const playButton = document.getElementById("play-button"); const pauseButton = document.getElementById("pause-button"); const nextButton = document.getElementById("next-button"); const previousButton = document.getElementById("previous-button"); const progressBar = document.getElementById("progress-bar"); const currentTime = document.getElementById("current-time"); const totalTime = document.getElementById("total-time");
