HTML Editor

Edita código
<html><head><base href="https://radio.espanola.es/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Española - Sintonizador Nacional</title>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(45deg, #FFD700, #FF4500, #8B0000);
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .container {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        padding: 15px;
        max-width: 600px;
        width: 90%;
    }
    h1 {
        color: #8B0000;
        text-align: center;
        margin-bottom: 10px;
        font-size: 2.5em;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    .station-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    .station-button {
        background-color: #f0f0f0;
        border: none;
        border-radius: 10px;
        padding: 5px 5px;
        font-size: 0.9em;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .station-button:hover {
        background-color: #FFD700;
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .station-button.active {
        background-color: #FF4500;
        color: white;
    }
    .station-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }
    #player-container {
        margin-top: 20px;
        text-align: center;
    }
    #now-playing {
        font-size: 1.2em;
        margin-bottom: 5px;
        font-weight: bold;
        color: #333;
    }
    #audio-player {
        width: 100%;
        margin-top: 10px;
    }
    .error-message {
        color: #ff0000;
        font-style: italic;
        margin-top: 10px;
    }
</style>
</head>
<body>
<div class="container">
    <h1>Radio Española</h1>
    <div class="station-grid" id="station-grid"></div>
    <div id="player-container">
        <div id="now-playing">Selecciona una emisora para comenzar</div>
        <audio id="audio-player" controls></audio>
        <div id="error-message" class="error-message"></div>
    </div>
</div>

<script>
const stations = [
    { name: "Cadena SER", url: "https://playerservices.streamtheworld.com/api/livestream-redirect/CADENASER.mp3", icon: "🎙️" },
    { name: "COPE", url: "https://flucast-b02-04.flumotion.com/cope/net3.mp3", icon: "📻" },
    { name: "Radio 5", url: "https://dispatcher.rndfnk.com/crtve/rne5/main/mp3/high", icon: "🌊" },
    { name: "RNE", url: "https://dispatcher.rndfnk.com/crtve/rne1/main/mp3/high", icon: "🇪🇸" },
    { name: "Los40", url: "https://playerservices.streamtheworld.com/api/livestream-redirect/LOS40.mp3", icon: "4️⃣" },
    { name: "Cadena Dial", url: "https://playerservices.streamtheworld.com/api/livestream-redirect/CADENADIAL.mp3", icon: "📞" },
    { name: "Europa radio", url: "https://rs9.stream24.net:80/europa-park-radio.mp3", icon: "🌍" },
    { name: "Rock de los 80", url: "http://stream.rtlradio.de/80rock/mp3-192/", icon: "🎸" },
    { name: "Radio 3", url: "https://dispatcher.rndfnk.com/crtve/rner3/main/mp3/high", icon: "3️⃣" },
    { name: "Radiole de la Frontera", url: "https://playerservices.streamtheworld.com/api/livestream-redirect/RADIOLE_ASO_JEREZ.mp3", icon: "8️⃣" },
    { name: "Kiss FM", url: "https://kissfm.kissfmradio.cires21.com/kissfm.mp3", icon: "💋" },
    { name: "Radio Marca", url: "https://directo.teleelx.es:8000/radio.mp3", icon: "⚽" }
];

const stationGrid = document.getElementById('station-grid');
const audioPlayer = document.getElementById('audio-player');
const nowPlaying = document.getElementById('now-playing');
const errorMessage = document.getElementById('error-message');

stations.forEach(station => {
    const button = document.createElement('button');
    button.className = 'station-button';
    button.innerHTML = `
        <span class="station-icon">${station.icon}</span>
        <span>${station.name}</span>
    `;
    button.addEventListener('click', () => playStation(station));
    stationGrid.appendChild(button);
});

function playStation(station) {
    audioPlayer.src = station.url;
    audioPlayer.play().catch(error => {
        console.error('Error playing audio:', error);
        errorMessage.textContent = `Error al cargar ${station.name}. Por favor, intenta otra emisora.`;
    });
    nowPlaying.textContent = `Reproduciendo: ${station.name}`;
    errorMessage.textContent = ''; // Clear any previous error messages
    
    document.querySelectorAll('.station-button').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.closest('.station-button').classList.add('active');
}

audioPlayer.addEventListener('error', (e) => {
    console.error('Audio player error:', e);
    nowPlaying.textContent = 'Error: No se pudo cargar la emisora';
    errorMessage.textContent = 'Hubo un problema al reproducir esta emisora. Por favor, intenta otra.';
});

audioPlayer.addEventListener('playing', () => {
    errorMessage.textContent = ''; // Clear error message when audio starts playing successfully
});

// Animación suave al cargar la página
document.body.style.opacity = 0;
window.onload = () => {
    document.body.style.transition = 'opacity 1s ease-in';
    document.body.style.opacity = 1;
};
</script>
</body></html>