Cargando Radio…
Sintonizando
.radio-card {
width: 300px; height: 300px;
position: relative; border-radius: 24px;
overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
margin: 20px auto; font-family: ‘Segoe UI’, sans-serif;
background: #000;
}
.card-bg {
width: 100%; height: 100%;
background-size: cover; background-position: center;
transition: background-image 0.8s ease, transform 0.6s ease;
}
.radio-card:hover .card-bg { transform: scale(1.05); }
.card-overlay {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,0,20,0.9) 0%, rgba(0,0,0,0) 60%);
display: flex; flex-direction: column;
justify-content: flex-end; padding: 25px;
box-sizing: border-box;
}
.controls-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.track-info { flex: 1; overflow: hidden; color: white; }
.track-text {
font-size: 16px; font-weight: bold; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.artist-text {
font-size: 12px; opacity: 0.8; text-transform: uppercase;
letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* BOTÓN PRINCIPAL */
#master-play-btn {
width: 60px; height: 60px;
background: #001f3f; border: none;
border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
transition: all 0.3s ease; flex-shrink: 0;
position: relative;
border: 1px solid rgba(255,255,255,0.1);
}
#master-play-btn:hover { background: #004080; transform: scale(1.1); }
/* TRIÁNGULO DE PLAY */
#p-icon {
width: 0; height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 20px solid #ffffff;
position: absolute; left: 55%; transform: translate(-50%, 0);
}
/* CUADRADO DE STOP (Más grande ahora) */
#s-icon {
background-color: white;
width: 20px; /* Aumentado de tamaño */
height: 20px; /* Aumentado de tamaño */
border-radius: 2px; /* Un toque levemente redondeado para estética */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
(function() {
const audio = document.getElementById(‘radio-engine’);
const btn = document.getElementById(‘master-play-btn’);
const pIco = document.getElementById(‘p-icon’);
const sIco = document.getElementById(‘s-icon’);
const cover = document.getElementById(‘radio-cover’);
const titleEl = document.getElementById(‘now-playing-title’);
const artistEl = document.getElementById(‘now-playing-artist’);
const streamUrl = “https://stream.zeno.fm/evwwdk4jdpvvv”;
const fallbackImg = “https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=300&h=300&auto=format&fit=crop”;
btn.onclick = function() {
if (audio.paused) {
audio.src = streamUrl + (streamUrl.includes(‘?’) ? ‘&’ : ‘?’) + “cb=” + Date.now();
audio.play();
pIco.style.display = ‘none’;
sIco.style.display = ‘block’;
} else {
audio.pause();
audio.src = “”;
pIco.style.display = ‘block’;
sIco.style.display = ‘none’;
}
};
async function fetchiTunesCover(artist, track) {
try {
const term = encodeURIComponent(`${artist} ${track}`);
const response = await fetch(`https://itunes.apple.com/search?term=${term}&entity=song&limit=1`);
const data = await response.json();
if (data.results && data.results.length > 0) {
const highResCover = data.results[0].artworkUrl100.replace(“100×100”, “600×600”);
cover.style.backgroundImage = `url(‘${highResCover}’)`;
} else {
cover.style.backgroundImage = `url(‘${fallbackImg}’)`;
}
} catch (e) {
cover.style.backgroundImage = `url(‘${fallbackImg}’)`;
}
}
try {
const mountId = “evwwdk4jdpvvv”;
const eventSource = new EventSource(`https://api.zeno.fm/mounts/metadata/subscribe/${mountId}`);
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.streamTitle) {
let [artist, track] = data.streamTitle.split(” – “);
if (!track) { track = data.streamTitle; artist = “Radio en Vivo”; }
titleEl.innerText = track;
artistEl.innerText = artist;
fetchiTunesCover(artist, track);
}
};
} catch (err) {}
})();
