.music-player {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.player-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.song-info {
  text-align: center;
  margin-bottom: 20px;
}

.playlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playlist-item {
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
  transition: background-color 0.3s;
}

.playlist-item.active {
  background-color: #ddd;
}

              

                document.addEventListener('DOMContentLoaded', () => {
  const playBtn = document.getElementById('play-btn');
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  const audioPlayer = document.getElementById('audio-player');
  const songTitle = document.getElementById('song-title');
  const songArtist = document.getElementById('song-artist');
  const playlistItems = document.querySelectorAll('.playlist-item');
  let currentSongIndex = 0;

  function loadSong(index) {
    const song = playlistItems[index];
    audioPlayer.src = song.dataset.src;
    songTitle.textContent = song.textContent;
    playlistItems.forEach(item => item.classList.remove('active'));
    song.classList.add('active');
  }

  playBtn.addEventListener('click', () => {
    if (audioPlayer.paused) {
      audioPlayer.play();
      playBtn.textContent = 'Pausa';
    } else {
      audioPlayer.pause();
      playBtn.textContent = 'Reproducir';
    }
  });

  nextBtn.addEventListener('click', () => {
    currentSongIndex = (currentSongIndex + 1) % playlistItems.length;
    loadSong(currentSongIndex);
    audioPlayer.play();
  });

  prevBtn.addEventListener('click', () => {
    currentSongIndex = (currentSongIndex - 1 + playlistItems.length) % playlistItems.length;
    loadSong(currentSongIndex);
    audioPlayer.play();
  });

  playlistItems.forEach((item, index) => {
    item.addEventListener('click', () => {
      currentSongIndex = index;
      loadSong(currentSongIndex);
      audioPlayer.play();
    });
  });

  loadSong(currentSongIndex);
});