Reproductor mp3 din?mico responsive con auto-play y una imagen que gira

<div class="player">

? ? <div class="cover">

? ? ? ? <img id="cover" src="https://cre6.com/files/uploads/c_9.jpg" alt="Cover Image">

? ? </div>

? ? <div class="info">

? ? ? ? <h2 id="title">Titulo de la Cancion</h2>

? ? ? ? <h3 id="artist">Artista</h3>

? ? </div>

? ? <audio id="audio" autoplay loop>

? ? ? ? <source src="http://stream.zeno.fm/bqu2tkmnrp8uv" type="audio/mpeg">

? ? ? ? Tu navegador no soporta el elemento de audio.

? ? </audio>

? ? <div class="controls">

? ? ? ? <button id="playPause">Pausa</button>

? ? ? ? <input type="range" id="progress" value="0" step="1">

? ? ? ? <div class="volume-control">

? ? ? ? ? ? <label for="volume">Volumen:</label>

? ? ? ? ? ? <input type="range" id="volume" value="100" step="1" min="0" max="100">

? ? ? ? </div>

? ? </div>

</div>

<style>

body {

? ? display: flex;

? ? justify-content: center;

? ? align-items: center;

? ? height: 100vh;

? ? background-color: #282c34;

? ? color: white;

? ? font-family: Arial, sans-serif;

}

.player {

? ? text-align: center;

? ? background: #3a3f44;

? ? border-radius: 10px;

? ? padding: 20px;

? ? box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

? ? transition: transform 0.3s;

? ? max-width: 90%; /* Permite que el reproductor sea m?s peque?o en pantallas peque?as */

? ? width: 400px; /* Ancho m?ximo */

}

.player:hover {

? ? transform: scale(1.05);

}

.cover img {

? ? width: 100%; /* Hace que la imagen sea responsive */

? ? height: auto; /* Mantiene la proporci?n de la imagen */

? ? border-radius: 10px;

? ? transition: transform 0.3s ease;

? ? max-width:150px;

? ? border-radius: 50%;

}

.cover img.spinning {

? ? animation: spin 10s linear infinite;

}

@keyframes spin {

? ? from { transform: rotate(0deg); }

? ? to { transform: rotate(360deg); }

}

.info {

? ? margin: 10px 0;

}

.controls {

? ? display: flex;

? ? align-items: center;

? ? justify-content: center;

? ? flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas peque?as */

}

button {

? ? margin: 0 10px;

? ? padding: 10px;

? ? background-color: #61dafb;

? ? border: none;

? ? border-radius: 5px;

? ? cursor: pointer;

? ? transition: background-color 0.3s;

}

button:hover {

? ? background-color: #21a1f1;

}

input[type="range"] {

? ? margin: 0 10px;

? ? width: 150px;

}

.volume-control {

? ? display: flex;

? ? align-items: center;

? ? margin-left: 10px; /* Espacio entre el bot?n de volumen y el rango */

}

.volume-control label {

? ? margin-right: 5px; /* Espacio entre la etiqueta y la barra de volumen */

}

</style>

<script>

const audio = document.getElementById('audio');

const playPauseButton = document.getElementById('playPause');

const progress = document.getElementById('progress');

const coverImage = document.getElementById('cover');

const volumeControl = document.getElementById('volume');

// Al iniciar la p?gina, agregar la clase spinning y reproducir el audio

window.onload = () => {

? ? coverImage.classList.add('spinning'); // Agrega la clase para girar

? ? audio.play();

};

// Control de reproducci?n

playPauseButton.addEventListener('click', () => {

? ? if (audio.paused) {

? ? ? ? audio.play();

? ? ? ? playPauseButton.textContent = 'Pausa';

? ? ? ? coverImage.classList.add('spinning'); // Agrega la clase para girar

? ? } else {

? ? ? ? audio.pause();

? ? ? ? playPauseButton.textContent = 'Reproducir';

? ? ? ? coverImage.classList.remove('spinning'); // Quita la clase para detener el giro

? ? }

});

// Actualizar el progreso

audio.addEventListener('timeupdate', () => {

? ? const currentTime = audio.currentTime;

? ? const duration = audio.duration;

? ? progress.value = (currentTime / duration) * 100;

});

// Cambiar el tiempo actual

progress.addEventListener('input', () => {

? ? const duration = audio.duration;

? ? audio.currentTime = (progress.value / 100) * duration;

});

// Controlar el volumen

volumeControl.addEventListener('input', () => {

? ? audio.volume = volumeControl.value / 100; // El volumen se establece entre 0 y 1

});

</script>