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>