<div class="music-player">
<div class="player-controls">
<button id="prev-btn">Anterior</button>
<button id="play-btn">Reproducir</button>
<button id="next-btn">Siguiente</button>
</div>
<div class="song-info">
<div id="song-title">Título de la Canción</div>
<div id="song-artist">Artista</div>
</div>
<div class="playlist">
<div class="playlist-item" data-src="song1.mp3">Canción 1</div>
<div class="playlist-item active" data-src="song2.mp3">Canción 2</div>
<div class="playlist-item" data-src="song3.mp3">Canción 3</div>
</div>
<audio id="audio-player"></audio>
</div>
.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);
});