<div class="minimal-player">
<div class="track-info">
<h2 id="track-title">Mañana Pacífica</h2>
<p id="track-artist">Colectivo Calma</p>
</div>
<div class="progress-container">
<div class="time-info">
<span id="current-time">1:23</span>
<span id="total-time">4:15</span>
</div>
<div class="progress-track">
<div class="progress-bar" id="progress-bar"></div>
</div>
</div>
<div class="controls">
<button class="btn-control" id="prev-btn" aria-label="Pista anterior">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
</svg>
</button>
<button class="btn-play" id="play-btn" aria-label="Reproducir/Pausar">
<svg class="play-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z"/>
</svg>
<svg class="pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</svg>
</button>
<button class="btn-control" id="next-btn" aria-label="Siguiente pista">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
</svg>
</button>
</div>
<div class="playlist-minimal">
<div class="track-item active" data-title="Mañana Pacífica" data-artist="Colectivo Calma" data-duration="4:15">
<span class="track-name">Mañana Pacífica</span>
<span class="track-time">4:15</span>
</div>
<div class="track-item" data-title="Brisa Suave" data-artist="Sonidos Naturales" data-duration="3:42">
<span class="track-name">Brisa Suave</span>
<span class="track-time">3:42</span>
</div>
<div class="track-item" data-title="Momentos Silenciosos" data-artist="Espacio Ambiental" data-duration="5:18">
<span class="track-name">Momentos Silenciosos</span>
<span class="track-time">5:18</span>
</div>
</div>
<audio id="audio-element"></audio>
</div>
.minimal-player {
max-width: 380px;
margin: 0 auto;
padding: 40px 32px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #2d3748;
}
.track-info {
text-align: center;
margin-bottom: 32px;
}
.track-info h2 {
font-size: 24px;
font-weight: 600;
margin: 0 0 8px 0;
color: #1a202c;
line-height: 1.2;
}
.track-info p {
font-size: 16px;
margin: 0;
color: #718096;
font-weight: 400;
}
.progress-container {
margin-bottom: 32px;
}
.time-info {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 14px;
color: #a0aec0;
font-weight: 500;
}
.progress-track {
height: 4px;
background: #e2e8f0;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}
.progress-bar {
height: 100%;
background: #4a5568;
width: 33%;
border-radius: 2px;
transition: width 0.3s ease;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
margin-bottom: 32px;
}
.btn-control {
width: 44px;
height: 44px;
border: none;
background: transparent;
color: #718096;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.btn-control:hover {
background: #f7fafc;
color: #4a5568;
transform: scale(1.05);
}
.btn-control svg {
width: 20px;
height: 20px;
}
.btn-play {
width: 64px;
height: 64px;
border: none;
background: #4a5568;
color: white;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(74, 85, 104, 0.3);
}
.btn-play:hover {
background: #2d3748;
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(74, 85, 104, 0.4);
}
.btn-play svg {
width: 24px;
height: 24px;
}
.playlist-minimal {
border-top: 1px solid #e2e8f0;
padding-top: 24px;
}
.track-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 4px;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
}
.track-item:hover {
background: #f7fafc;
}
.track-item.active {
background: #edf2f7;
color: #4a5568;
}
.track-item.active .track-name {
font-weight: 600;
}
.track-name {
font-size: 15px;
font-weight: 500;
color: #2d3748;
}
.track-time {
font-size: 14px;
color: #a0aec0;
font-weight: 500;
}
/* Focus states for accessibility */
.btn-control:focus,
.btn-play:focus {
outline: 2px solid #4a5568;
outline-offset: 2px;
}
.progress-track:focus {
outline: 2px solid #4a5568;
outline-offset: 2px;
}
/* Responsive design */
@media (max-width: 480px) {
.minimal-player {
margin: 16px;
padding: 32px 24px;
}
.track-info h2 {
font-size: 20px;
}
.controls {
gap: 20px;
}
.btn-control {
width: 40px;
height: 40px;
}
.btn-play {
width: 56px;
height: 56px;
}
}
document.addEventListener('DOMContentLoaded', () => {
// Elementos
const playBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const audioElement = document.getElementById('audio-element');
const trackTitle = document.getElementById('track-title');
const trackArtist = document.getElementById('track-artist');
const currentTimeEl = document.getElementById('current-time');
const totalTimeEl = document.getElementById('total-time');
const progressBar = document.getElementById('progress-bar');
const progressTrack = document.querySelector('.progress-track');
const playIcon = document.querySelector('.play-icon');
const pauseIcon = document.querySelector('.pause-icon');
const trackItems = document.querySelectorAll('.track-item');
// Estado
let currentTrackIndex = 0;
let isPlaying = false;
let isDragging = false;
// Inicializar
loadTrack(currentTrackIndex);
function loadTrack(index) {
const track = trackItems[index];
const title = track.dataset.title;
const artist = track.dataset.artist;
const duration = track.dataset.duration;
trackTitle.textContent = title;
trackArtist.textContent = artist;
totalTimeEl.textContent = duration;
currentTimeEl.textContent = '0:00';
// Actualizar estado activo
trackItems.forEach(item => item.classList.remove('active'));
track.classList.add('active');
// Reiniciar progreso
progressBar.style.width = '0%';
}
function togglePlay() {
if (audioElement.paused) {
// Simular reproducción (sin archivo de audio real)
isPlaying = true;
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
simulateProgress();
} else {
isPlaying = false;
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
}
}
function nextTrack() {
currentTrackIndex = (currentTrackIndex + 1) % trackItems.length;
loadTrack(currentTrackIndex);
if (isPlaying) {
simulateProgress();
}
}
function prevTrack() {
currentTrackIndex = (currentTrackIndex - 1 + trackItems.length) % trackItems.length;
loadTrack(currentTrackIndex);
if (isPlaying) {
simulateProgress();
}
}
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
function simulateProgress() {
if (!isPlaying) return;
let currentTime = 0;
const totalTime = 255; // 4:15 en segundos
const interval = setInterval(() => {
if (!isPlaying) {
clearInterval(interval);
return;
}
currentTime += 1;
const progress = (currentTime / totalTime) * 100;
if (!isDragging) {
progressBar.style.width = `${progress}%`;
currentTimeEl.textContent = formatTime(currentTime);
}
if (currentTime >= totalTime) {
clearInterval(interval);
nextTrack();
}
}, 1000);
}
function setProgress(e) {
const rect = progressTrack.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
const clampedPercent = Math.max(0, Math.min(1, percent));
progressBar.style.width = `${clampedPercent * 100}%`;
// Actualizar visualización de tiempo
const totalTime = 255; // 4:15 en segundos
const newTime = clampedPercent * totalTime;
currentTimeEl.textContent = formatTime(newTime);
}
// Escuchadores de eventos
playBtn.addEventListener('click', togglePlay);
nextBtn.addEventListener('click', nextTrack);
prevBtn.addEventListener('click', prevTrack);
// Interacción con barra de progreso
progressTrack.addEventListener('click', setProgress);
progressTrack.addEventListener('mousedown', () => {
isDragging = true;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
setProgress(e);
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Interacción con lista de reproducción
trackItems.forEach((item, index) => {
item.addEventListener('click', () => {
currentTrackIndex = index;
loadTrack(currentTrackIndex);
if (!isPlaying) {
togglePlay();
}
});
});
// Atajos de teclado
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT') return;
switch(e.code) {
case 'Space':
e.preventDefault();
togglePlay();
break;
case 'ArrowRight':
nextTrack();
break;
case 'ArrowLeft':
prevTrack();
break;
}
});
});