script.js

const songs = [
  { title: "Song 1", artist: "Artist 1", file: "songs/song1.mp3", cover: "images/song1.jpg" },
  { title: "Song 2", artist: "Artist 2", file: "songs/song2.mp3", cover: "images/song2.jpg" },
  { title: "Song 3", artist: "Artist 3", file: "songs/song3.mp3", cover: "images/song3.jpg" },
  { title: "Song 4", artist: "Artist 4", file: "songs/song4.mp3", cover: "images/song4.jpg" },
  { title: "Song 5", artist: "Artist 5", file: "songs/song5.mp3", cover: "images/song5.jpg" },
  { title: "Song 6", artist: "Artist 6", file: "songs/song6.mp3", cover: "images/song6.jpg" },
  { title: "Song 7", artist: "Artist 7", file: "songs/song7.mp3", cover: "images/song7.jpg" },
  { title: "Song 8", artist: "Artist 8", file: "songs/song8.mp3", cover: "images/song8.jpg" },
  { title: "Song 9", artist: "Artist 9", file: "songs/song9.mp3", cover: "images/song9.jpg" }

];

let currentSongIndex = 0;
const audio = document.getElementById("audio");
const title = document.getElementById("title");
const artist = document.getElementById("artist");
const cover = document.getElementById("cover");
const playBtn = document.getElementById("play");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const progress = document.getElementById("progress");
const volume = document.getElementById("volume");
const playlist = document.getElementById("playlist");

function loadSong(index) {
  const song = songs[index];
  title.textContent = song.title;
  artist.textContent = song.artist;
  cover.src = song.cover;
  audio.src = song.file;
}
loadSong(currentSongIndex);

// Play/Pause
playBtn.addEventListener("click", () => {
  if (audio.paused) {
    audio.play();
    playBtn.innerHTML = `<i class="fa-solid fa-pause"></i>`; // Pause icon
  } else {
    audio.pause();
    playBtn.innerHTML = `<i class="fa-solid fa-play"></i>`; // Play icon
  }
});
// Next/Prev
nextBtn.addEventListener("click", () => changeSong(1));
prevBtn.addEventListener("click", () => changeSong(-1));

function changeSong(direction) {
  currentSongIndex = (currentSongIndex + direction + songs.length) % songs.length;
  loadSong(currentSongIndex);
  audio.play();
  playBtn.textContent = "⏸";
}

// Progress bar update
audio.addEventListener("timeupdate", () => {
  progress.value = (audio.currentTime / audio.duration) * 100 || 0;
});

// Seek song
progress.addEventListener("input", () => {
  audio.currentTime = (progress.value / 100) * audio.duration;
});

// Volume control
volume.addEventListener("input", () => {
  audio.volume = volume.value / 100;
});

// Playlist
songs.forEach((song, index) => {
  const li = document.createElement("li");
  li.textContent = song.title;
  li.addEventListener("click", () => {
    currentSongIndex = index;
    loadSong(index);
    audio.play();
    playBtn.textContent = "⏸";
  });
  playlist.appendChild(li);
});