Reproductor Audio simple

<div class='contenedorJcDuranM'>
    <div class='reproductorRadioJcDuranM'>
        <audio id='reproductorRadioJcDuranM' muted>
            <!-- URL de la fuente de audio: Modifica el valor dentro del <source src="..."> con la URL de tu stream de audio -->
            <source src='https://stream.zeno.fm/k8yuexp35k0uv' type='audio/mpeg'/>
            Tu navegador no soporta el elemento de audio.
        </audio>
        <button id='botonPlayPauseJcDuranM' onclick='alternarPlayPauseJcDuranM()' aria-label='Reproducir'>Reproducir</button>
        <div class='controlVolumenJcDuranM'>
            <label for='controlVolumenJcDuranM'>Volumen:</label>
            <input type='range' id='controlVolumenJcDuranM' min='0' max='1' step='0.01' value='1' oninput='cambiarVolumenJcDuranM()'>
        </div>
    </div>
</div>

<style>
    .contenedorJcDuranM { 
        text-align: center; 
        padding: 20px; 
    }
    
    .reproductorRadioJcDuranM { 
        margin-top: 20px; 
    }

    .reproductorRadioJcDuranM audio { 
        visibility: hidden; 
        height: 0; 
    }

    .reproductorRadioJcDuranM button { 
        margin-top: 10px; 
        padding: 10px 20px; 
        color: #000; /* Color del texto del botón: Modifica el valor para cambiar el color */
        border: none; 
        border-radius: 5px; 
        cursor: pointer; 
        font-size: 20px; /* Tamaño de fuente del botón: Modifica el valor para cambiar el tamaño */
        font-weight: bold; 
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; 
        animation: colorFade 60s infinite linear; 
    }

    .reproductorRadioJcDuranM button:hover { 
        filter: brightness(0.9); 
    }

    .controlVolumenJcDuranM { 
        margin-top: 10px; 
    }
    
    .controlVolumenJcDuranM label { 
        font-size: 16px; 
        font-weight: bold; 
    }
    
    .controlVolumenJcDuranM input[type='range'] { 
        width: 100%; 
        max-width: 300px; /* Tamaño máximo del control de volumen: Modifica este valor para cambiar el tamaño máximo */
    }

    @media (max-width: 600px) { 
        .contenedorJcDuranM { 
            padding: 10px; 
        } 
        .reproductorRadioJcDuranM button { 
            width: 100%; 
            padding: 15px; 
            font-size: 22px; 
            font-weight: bold; 
        } 
        .controlVolumenJcDuranM input[type='range'] { 
            width: 100%; 
        } 
    }
</style>

<script>
    function obtenerColorAleatorioJcDuranM() { 
        const letras = '0123456789ABCDEF'; 
        let color = '#'; 
        for (let i = 0; i < 6; i++) { 
            color += letras[Math.floor(Math.random() * 16)]; 
        } 
        return color; 
    }

    function generarAnimacionAleatoriaJcDuranM() { 
        if (document.getElementById("estiloColorFadeJcDuranM")) return; 
        const colores = Array.from({ length: 20 }, obtenerColorAleatorioJcDuranM); 
        const keyframes = `@keyframes colorFade { ${colores.map((color, index) => `${index * 5}% { background-color: ${color}; }`).join('')} 100% { background-color: ${colores[0]}; } }`; 
        const hojaEstilo = document.createElement("style"); 
        hojaEstilo.id = "estiloColorFadeJcDuranM"; 
        hojaEstilo.textContent = keyframes; 
        document.head.appendChild(hojaEstilo); 
    }

    function alternarPlayPauseJcDuranM() { 
        const reproductorRadioJcDuranM = document.getElementById('reproductorRadioJcDuranM'); 
        const botonPlayPauseJcDuranM = document.getElementById('botonPlayPauseJcDuranM'); 
        if (reproductorRadioJcDuranM.paused) { 
            reproductorRadioJcDuranM.muted = false; 
            reproductorRadioJcDuranM.play().then(() => { 
                botonPlayPauseJcDuranM.textContent = 'Pausar'; 
                botonPlayPauseJcDuranM.setAttribute('aria-label', 'Pausar'); 
            }).catch(error => { 
                console.error("Error al reproducir:", error); 
                alert("No se pudo reproducir. Activa la reproducción manualmente."); 
                if (reproductorRadioJcDuranM.paused) { 
                    botonPlayPauseJcDuranM.textContent = 'Reproducir'; 
                    botonPlayPauseJcDuranM.setAttribute('aria-label', 'Reproducir'); 
                } 
            }); 
        } else { 
            reproductorRadioJcDuranM.pause(); 
            botonPlayPauseJcDuranM.textContent = 'Reproducir'; 
            botonPlayPauseJcDuranM.setAttribute('aria-label', 'Reproducir'); 
        } 
    }

    function cambiarVolumenJcDuranM() { 
        const reproductorRadioJcDuranM = document.getElementById('reproductorRadioJcDuranM'); 
        const controlVolumenJcDuranM = document.getElementById('controlVolumenJcDuranM'); 
        reproductorRadioJcDuranM.volume = controlVolumenJcDuranM.value; 
    }

    document.addEventListener('DOMContentLoaded', () => { 
        generarAnimacionAleatoriaJcDuranM(); 
        const reproductorRadioJcDuranM = document.getElementById('reproductorRadioJcDuranM'); 
        reproductorRadioJcDuranM.volume = 1.0; 
        reproductorRadioJcDuranM.play().catch(() => console.warn("Autoplay bloqueado: El usuario debe interactuar primero.")); 
    });
</script>