tiene carátula titulo e imagen pero para una sola url
Falta los simbolos >style
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap’);#mbr-player-footer {
position: fixed;
bottom: 0; left: 0; width: 100%;
background: #1c1d1f; /* Grafito oscuro */
border-top: 3px solid #F15A24; /* Color Aire */
padding: 10px 0;
z-index: 999999;
font-family: ‘Montserrat’, sans-serif;
height: 80px; /* Incrementado para un reproductor más grande */
display: flex !important;
align-items: center;
box-sizing: border-box;
}.mbr-container {
width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
box-sizing: border-box;
}.mbr-info { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0; }.mbr-cover-box {
width: 60px; height: 60px; /* Carátula más grande */
border-radius: 6px;
background-size: cover;
background-position: center;
background-color: #111;
border: 1px solid #F15A24;
flex-shrink: 0;
background-image: url(‘https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=150&h=150&auto=format&fit=crop’);
transition: background-image 0.5s ease;
}.mbr-text { overflow: hidden; white-space: nowrap; color: #fff; display: flex; flex-direction: column; min-width: 0; gap: 2px; }/* Efecto leve solicitado para el texto AIRE */
.mbr-live-tag {
font-size: 11px;
font-weight: 900;
color: #F15A24;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 1px;
animation: mbr-pulsoLeve 2s infinite ease-in-out;
}
.mbr-dot { width: 7px; height: 7px; background: #F15A24; border-radius: 50%; animation: mbr-blink 1.5s infinite; }#mbr-artist { font-size: 12px; color: #fff; display: block; text-transform: uppercase; font-weight: 400; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; }
#mbr-track { font-size: 15px; font-weight: 700; color: #fff; display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }/* Botón redondo, fondo gris claro, icono negro por defecto (Más grande) */
.mbr-play-btn {
width: 54px; height: 54px; border-radius: 50%; border: none;
background: #e0e0e0; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: 0.2s; flex-shrink: 0; margin-left: 15px; padding: 0;
color: #000000;
}/* Corrección visual para centrar el icono play de Elementor */
.mbr-play-btn svg.icon-play { margin-left: 3px; }/* Hover y Estado Activo (reproduciendo) cambia a fondo #F15A24 e icono blanco */
.mbr-play-btn:hover,
#mbr-player-footer.is-playing .mbr-play-btn { background: #F15A24; color: #ffffff; transform: scale(1.05); }
.mbr-play-btn svg { width: 22px; height: 22px; fill: currentColor; }/* Lógica de cambio de iconos */
.icon-pause { display: none; }
#mbr-player-footer.is-playing .icon-pause { display: block; }
#mbr-player-footer.is-playing .icon-play { display: none; }.mbr-loading { animation: mbr-loadPulse 0.6s infinite alternate; opacity: 0.5; }@keyframes mbr-loadPulse { from { transform: scale(1); } to { transform: scale(0.85); } }
@keyframes mbr-blink { 0%, 100% {opacity:1} 50% {opacity:0.3} }
@keyframes mbr-pulsoLeve { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }/* Asegurar que el contenido de la web no quede tapado por el nuevo tamaño */
body { padding-bottom: 80px !important; }
document.addEventListener(‘DOMContentLoaded’, function() {
const audio = document.getElementById(‘mbr-audio’);
const btn = document.getElementById(‘mbr-btn’);
const playerContainer = document.getElementById(‘mbr-player-footer’);
const cover = document.getElementById(‘mbr-cover’);
const artistEl = document.getElementById(‘mbr-artist’);
const trackEl = document.getElementById(‘mbr-track’);// URL e ID RESTAURADOS A TU SEÑAL CORRECTA
const mountId = “58p15014pf9uv”;
const streamUrl = `https://stream.zeno.fm/${mountId}`;
const fallbackImg = “https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=300&h=300&auto=format&fit=crop”;// Función Play
function playAudio() {
btn.classList.add(‘mbr-loading’);
audio.src = streamUrl + (streamUrl.includes(‘?’) ? ‘&’ : ‘?’) + “cb=” + Date.now();
audio.play()
.then(() => {
btn.classList.remove(‘mbr-loading’);
playerContainer.classList.add(‘is-playing’);
localStorage.setItem(‘mbr_playing’, ‘true’);
})
.catch(() => {
btn.classList.remove(‘mbr-loading’);
});
}// Función Pause
function pauseAudio() {
audio.pause();
audio.src = “”;
playerContainer.classList.remove(‘is-playing’);
localStorage.setItem(‘mbr_playing’, ‘false’);
}btn.addEventListener(‘click’, () => {
if (audio.paused) playAudio();
else pauseAudio();
});// Auto-resume persistente al navegar entre pestañas
if (localStorage.getItem(‘mbr_playing’) === ‘true’) {
playAudio();
}// Buscador de carátulas nativo de Apple iTunes Music
async function fetchiTunesCover(artist, track) {
if (!artist || artist.toLowerCase().includes(“music box radio”) || artist.toLowerCase().includes(“radio en vivo”)) {
cover.style.backgroundImage = `url(‘${fallbackImg}’)`;
return;
}
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”, “400×400”);
cover.style.backgroundImage = `url(‘${highResCover}’)`;
} else {
cover.style.backgroundImage = `url(‘${fallbackImg}’)`;
}
} catch (e) {
cover.style.backgroundImage = `url(‘${fallbackImg}’)`;
}
}// EventSource Conexión directa SSE con Zeno.fm
function initZeno() {
try {
const eventSource = new EventSource(`https://api.zeno.fm/mounts/metadata/subscribe/${mountId}`);eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);// Intentar capturar streamTitle o stream_info según lo mande el servidor de esta ID
let rawTitle = data.streamTitle || data.stream_info || “”;if (rawTitle) {
let artist = “MUSIC BOX RADIO”;
let track = rawTitle;if (rawTitle.includes(” – “)) {
const parts = rawTitle.split(” – “);
artist = parts[0].trim();
track = parts[1].trim();
}trackEl.innerText = track;
artistEl.innerText = artist;// Buscar carátula en base a los metadatos reales obtenidos
fetchiTunesCover(artist, track);
}
};eventSource.onerror = function() {
eventSource.close();
setTimeout(initZeno, 5000); // Reconexión automática si cae la red
};
} catch (err) {
setTimeout(initZeno, 5000);
}
}initZeno();
});
/script
