Apple-style Radio Player<\/title>\n<style>\n\/* =========================\n Fonts\n ========================= *\/\n@font-face{\n font-family:\"SF Pro Display\";\n font-style:normal;\n font-weight:100 900;\n font-display:swap;\n src: local(\"SF Pro Display\"), local(\"SFProDisplay-Regular\"), local(\"SF Pro\");\n}\n\n\/* =========================\n Design tokens\n ========================= *\/\n:root{\n --bg:#0b1020; --panel:#0e1326; --ink:#ffffff; --muted:#cbd5e1; --accent:#ffffff;\n --line:rgba(255,255,255,.08); --radius:18px; --shadow:0 12px 36px rgba(0,0,0,.25);\n}\n*{box-sizing:border-box}\nhtml,body{margin:0;height:100%;color:var(--ink);background:var(--bg);\n font-family:\"SF Pro Display\",-apple-system,BlinkMacSystemFont,\"SF Pro Text\",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}\n.hide{display:none !important}\n\n\/* =========================\n Fundo com crossfade\n ========================= *\/\n.bg-stack{position:fixed; inset:0; z-index:0; overflow:hidden}\n.bg-layer{position:absolute; inset:0; background-position:center; background-size:cover;\n filter:blur(60px) saturate(130%); transform:scale(1.2); opacity:0; transition:opacity .7s ease}\n.bg-layer.show{opacity:.55}\n.gradient-overlay{position:fixed; inset:0; z-index:1;\n background:linear-gradient(180deg, rgba(5,8,20,.75) 0%, rgba(5,8,20,.6) 40%, rgba(5,8,20,.85) 100%)}\n\n\/* =========================\n \u00cdcones (CSS mask)\n ========================= *\/\n.icon{width:28px;height:28px;display:inline-block;background:currentColor;\n -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}\n.i-play{ -webkit-mask-image:url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M8 5v14l11-7z\"\/><\/svg>'); mask-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8 5v14l11-7z'\/><\/svg>\");}\n.i-pause{ -webkit-mask-image:url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M6 5h4v14H6zM14 5h4v14h-4z\"\/><\/svg>'); mask-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6 5h4v14H6zM14 5h4v14h-4z'\/><\/svg>\");}\n.i-volume{ -webkit-mask-image:url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M3 10v4h4l5 4V6L7 10H3z\"\/><\/svg>'); mask-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 10v4h4l5 4V6L7 10H3z'\/><\/svg>\");}\n\n\/* =========================\n Tablet \u2014 layout + alturas fixas\n ========================= *\/\n.tablet-wrap{\n --pad: 40px;\n position:relative;\n min-height:100vh;\n z-index:2;\n display:grid;\n grid-template-columns:minmax(280px,520px) 1fr;\n gap:38px;\n padding:var(--pad);\n}\n.album-card,\n.lyrics .lyrics-box{\n height: min(860px, calc(100svh - (var(--pad) * 2)));\n height: min(860px, calc(100vh - (var(--pad) * 2))); \/* fallback *\/\n min-height: 560px;\n}\n\n.album-card{\n z-index:2; background:rgba(255,255,255,.06);\n border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);\n padding:24px; display:flex; flex-direction:column; gap:18px; backdrop-filter:blur(12px)\n}\n.cover{position:relative; width:100%; aspect-ratio:1\/1; border-radius:16px; overflow:hidden; background:#111; box-shadow:0 20px 50px rgba(0,0,0,.35); flex:1 1 auto; min-height:0}\n.cover img{width:100%;height:100%;object-fit:cover;display:block}\n.title{font-weight:800; font-size:28px; line-height:1.15; letter-spacing:.2px}\n.artist{color:var(--muted); font-size:15px}\n\n\/* Marquee autom\u00e1tico *\/\n.marquee{ position:relative; display:block; overflow:hidden; white-space:nowrap }\n.marquee .track{ display:inline-block; padding-right:48px; animation: marquee 12s linear infinite }\n@keyframes marquee{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }\n\n\/* Barra de \u201cprogresso\u201d decorativa *\/\n.progress{ position:relative; height:4px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden}\n.progress > span{display:block; height:100%; width:18%; background:var(--accent)}\n\n\/* Controles \u2014 apenas Play\/Pause (transparente) *\/\n.controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin:6px 0 2px}\n.btn{ width:52px; height:52px; border:none; border-radius:50%;\n display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; cursor:pointer;\n transition:transform .08s ease, background .2s ease}\n.btn:active{transform:scale(.97)}\n.btn--primary{ width:68px; height:68px; border:none; background:transparent; color:#fff }\n.btn--primary:hover{background:transparent}\n\n\/* Volume *\/\n.vol{ margin-top:10px; display:flex; align-items:center; gap:12px}\n.vol .icon{width:22px;height:22px;opacity:.85}\n.vol input[type=\"range\"]{appearance:none; width:100%; height:4px; background:rgba(255,255,255,.15); border-radius:999px; outline:none}\n.vol input[type=\"range\"]::-webkit-slider-thumb{appearance:none; width:18px;height:18px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,.2)}\n\n\/* Letras (tablet) \u2014 mesmo tamanho e scroll interno *\/\n.lyrics{z-index:2; display:flex; align-items:stretch; justify-content:center; position:relative}\n.lyrics .lyrics-box{\n width:100%; max-width:900px; background:rgba(255,255,255,.05); border:1px solid var(--line);\n border-radius:22px; box-shadow:var(--shadow); padding:24px; display:flex; flex-direction:column; overflow:hidden; line-height:1.6;\n}\n.lyrics-box .heading{flex:0 0 auto; font-weight:800; opacity:.9; margin-bottom:10px}\n.lyrics-box .content{flex:1 1 auto; min-height:0; overflow:auto; white-space:pre-wrap; color:#e5e7eb; font-size:clamp(14px,1.6vw,20px)}\n.lyrics-box .empty{opacity:.6; font-style:italic}\n\n\/* =========================\n Mobile \u2014 mini-player + sheet\n ========================= *\/\n.mobile-shell{ position:fixed; left:0; right:0; bottom:0; z-index:30 }\n.minibar{ margin:0 auto 12px; width:min(720px, calc(100% - 24px)); background:rgba(255,255,255,.08); border:1px solid var(--line);\n border-radius:18px; display:flex; align-items:center; gap:12px; padding:10px; backdrop-filter:blur(10px); box-shadow:var(--shadow); cursor:pointer}\n.thumb{width:42px;height:42px;border-radius:10px;overflow:hidden;background:#222;flex:0 0 auto}\n.thumb img{width:100%;height:100%;object-fit:cover;display:block}\n.meta{min-width:0; display:flex; flex-direction:column; gap:2px}\n.meta .t,.meta .s{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}\n.meta .t{font-weight:700; font-size:15px}\n.meta .s{font-size:12px; color:var(--muted)}\n.mini-btn{margin-left:auto; width:40px;height:40px;border:none;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center}\n\n\/* Sheet *\/\n.sheet{ position:fixed; left:0; right:0; bottom:0; top:100%; background:rgba(12,16,32,.96); backdrop-filter:blur(16px);\n border-top-left-radius:22px; border-top-right-radius:22px; transition:top .35s cubic-bezier(.2,.7,.2,1); z-index:40;\n display:grid; grid-template-rows:auto auto auto 1fr auto; padding:18px 16px 26px}\n.sheet.open{ top:0 }\n.sheet .grab{height:5px;width:48px;border-radius:999px;background:rgba(255,255,255,.25);margin:8px auto 14px}\n.sheet .cover{width:min(86vw, 520px); margin:0 auto 16px}\n.sheet .title{font-size:22px;text-align:center}\n.sheet .artist{text-align:center;margin-top:4px}\n.sheet .progress{margin:12px 14px}\n.sheet .controls{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:8px}\n.sheet .controls .btn--primary{width:68px;height:68px;background:transparent}\n.sheet .vol{padding:0 14px; margin-top:8px}\n\n\/* Letras no mobile \u2014 altura limitada + scroll interno *\/\n.sheet .lyrics-box{ margin:14px 12px 0; height: clamp(28vh, 34vh, 360px); overflow:auto }\n\n\/* Breakpoints *\/\n@media (max-width: 900px){ .tablet-wrap{display:none} }\n@media (min-width: 901px){ .mobile-shell, .sheet{display:none} }\n\n\/* A11y foco *\/\n:focus-visible{outline:2px solid rgba(255,255,255,.5); outline-offset:2px}\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"bg-stack\" aria-hidden=\"true\">\n <div id=\"bgA\" class=\"bg-layer\"><\/div>\n <div id=\"bgB\" class=\"bg-layer\"><\/div>\n<\/div>\n<div class=\"gradient-overlay\" aria-hidden=\"true\"><\/div>\n\n\n<main class=\"tablet-wrap\" aria-label=\"Now Playing (Tablet)\">\n <section class=\"album-card\">\n <div class=\"cover\"><img id=\"artLG\" alt=\"Capa do \u00e1lbum\"><\/div>\n <div id=\"tTitleLG\" class=\"title\">\u2014<\/div>\n <div id=\"tSubLG\" class=\"artist\">\u2014<\/div>\n <div class=\"progress\" aria-label=\"Progresso (decorativo)\"><span id=\"progLG\"><\/span><\/div>\n <div class=\"controls\">\n <button id=\"playTab\" class=\"btn btn--primary\" title=\"Play\/Pause\">\n <span id=\"icoPlayTab\" class=\"icon i-play\"><\/span>\n <span id=\"icoPauseTab\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n <\/div>\n <div class=\"vol\">\n <span class=\"icon i-volume\" aria-hidden=\"true\"><\/span>\n <input id=\"volTab\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\" aria-label=\"Volume\"\/>\n <\/div>\n <\/section>\n\n \n <section class=\"lyrics\">\n <div class=\"lyrics-box\">\n <div class=\"heading\">Letra<\/div>\n <div id=\"lyricsTablet\" class=\"content\"><div class=\"empty\">Buscando letra\u2026<\/div><\/div>\n <\/div>\n <\/section>\n<\/main>\n\n\n<div class=\"mobile-shell\" aria-live=\"polite\">\n <div id=\"minibar\" class=\"minibar\" role=\"button\" aria-expanded=\"false\" aria-controls=\"sheet\">\n <div class=\"thumb\"><img id=\"artSM\" alt=\"\"><\/div>\n <div class=\"meta\">\n <div id=\"tTitleSM\" class=\"t\">\u2014<\/div>\n <div id=\"tSubSM\" class=\"s\">\u2014<\/div>\n <\/div>\n <button id=\"playMini\" class=\"mini-btn\" aria-label=\"Play\/Pause\">\n <span id=\"icoPlayMini\" class=\"icon i-play\"><\/span>\n <span id=\"icoPauseMini\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n <\/div>\n\n <section id=\"sheet\" class=\"sheet\" aria-modal=\"true\" role=\"dialog\" aria-label=\"Now Playing\">\n <div class=\"grab\"><\/div>\n <div class=\"cover\"><img id=\"artSheet\" alt=\"\"><\/div>\n <div id=\"tTitleSheet\" class=\"title\">\u2014<\/div>\n <div id=\"tSubSheet\" class=\"artist\">\u2014<\/div>\n\n <div class=\"progress\"><span id=\"progSheet\"><\/span><\/div>\n\n <div class=\"controls\">\n <button id=\"playSheet\" class=\"btn btn--primary\" title=\"Play\/Pause\">\n <span id=\"icoPlaySheet\" class=\"icon i-play\"><\/span>\n <span id=\"icoPauseSheet\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n <\/div>\n\n <div class=\"lyrics-box\">\n <div class=\"heading\">Letra<\/div>\n <div id=\"lyricsMobile\" class=\"content\"><div class=\"empty\">Buscando letra\u2026<\/div><\/div>\n <\/div>\n\n <div class=\"vol\">\n <span class=\"icon i-volume\" aria-hidden=\"true\"><\/span>\n <input id=\"volSheet\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\" aria-label=\"Volume\"\/>\n <\/div>\n <\/section>\n<\/div>\n\n<audio id=\"audio\" preload=\"none\" playsinline><\/audio>\n\n<script>\n(function(){\n \/\/ ====== CONFIG ======\n const STREAM_URL = 'https:\/\/glaudiotecnology.srv.br\/listen\/r%C3%A1dio_f%C3%A1cil\/radio.mp3';\n const AZURACAST_BASE = 'https:\/\/glaudiotecnology.srv.br';\n const STATION = 'radio_facil';\n\n \/\/ ====== ELTS ======\n const audio = document.getElementById('audio');\n\n \/\/ Tablet\n const playTab = document.getElementById('playTab');\n const icoPlayTab = document.getElementById('icoPlayTab');\n const icoPauseTab= document.getElementById('icoPauseTab');\n const volTab = document.getElementById('volTab');\n const tTitleLG = document.getElementById('tTitleLG');\n const tSubLG = document.getElementById('tSubLG');\n const artLG = document.getElementById('artLG');\n const progLG = document.getElementById('progLG');\n const lyricsTablet = document.getElementById('lyricsTablet');\n\n \/\/ Background crossfade\n const bgA = document.getElementById('bgA');\n const bgB = document.getElementById('bgB');\n let bgToggle = false;\n\n \/\/ Mobile\n const minibar = document.getElementById('minibar');\n const playMini = document.getElementById('playMini');\n const icoPlayMini = document.getElementById('icoPlayMini');\n const icoPauseMini= document.getElementById('icoPauseMini');\n const artSM = document.getElementById('artSM');\n const tTitleSM = document.getElementById('tTitleSM');\n const tSubSM = document.getElementById('tSubSM');\n\n const sheet = document.getElementById('sheet');\n const playSheet= document.getElementById('playSheet');\n const icoPlaySheet = document.getElementById('icoPlaySheet');\n const icoPauseSheet= document.getElementById('icoPauseSheet');\n const artSheet = document.getElementById('artSheet');\n const tTitleSheet= document.getElementById('tTitleSheet');\n const tSubSheet = document.getElementById('tSubSheet');\n const volSheet = document.getElementById('volSheet');\n const progSheet = document.getElementById('progSheet');\n const lyricsMobile = document.getElementById('lyricsMobile');\n\n \/\/ Primeira intera\u00e7\u00e3o (iOS)\n let armed=false; function arm(){ if(!armed){ audio.src=STREAM_URL; audio.load(); armed=true; } }\n\n \/\/ Estado bot\u00f5es\n function setPlayingUI(isPlaying){\n icoPlayTab.classList.toggle('hide', isPlaying);\n icoPauseTab.classList.toggle('hide', !isPlaying);\n icoPlayMini.classList.toggle('hide', isPlaying);\n icoPauseMini.classList.toggle('hide', !isPlaying);\n icoPlaySheet.classList.toggle('hide', isPlaying);\n icoPauseSheet.classList.toggle('hide', !isPlaying);\n }\n async function toggle(){\n arm();\n if(audio.paused){ try{ await audio.play(); setPlayingUI(true);}catch(e){} }\n else{ audio.pause(); setPlayingUI(false); }\n }\n playTab.addEventListener('click', toggle);\n playMini.addEventListener('click', (e)=>{ e.stopPropagation(); toggle(); });\n playSheet.addEventListener('click', toggle);\n\n \/\/ Abrir\/fechar sheet\n minibar.addEventListener('click', ()=>{ sheet.classList.add('open'); minibar.setAttribute('aria-expanded','true'); });\n sheet.addEventListener('click', (e)=>{ if(e.target === sheet) { sheet.classList.remove('open'); minibar.setAttribute('aria-expanded','false'); } });\n\n \/\/ Volume\n const setVol = v => audio.volume = +v;\n setVol(volTab.value);\n volTab.addEventListener('input', e=> setVol(e.target.value));\n volSheet.addEventListener('input', e=> setVol(e.target.value));\n\n \/\/ Progresso fake\n let p=0; setInterval(()=>{ p=(p+1)%100; progLG.style.width = (10+p)+'%'; progSheet.style.width = (10+p)+'%'; }, 1000);\n\n \/\/ Fallback capa\n const FALLBACK = 'data:image\/svg+xml;utf8,'+encodeURIComponent(`<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><defs><linearGradient id=\"g\" x1=\"0\" x2=\"1\"><stop offset=\"0\" stop-color=\"#0f172a\"\/><stop offset=\"1\" stop-color=\"#0b1020\"\/><\/linearGradient><\/defs><rect width=\"512\" height=\"512\" fill=\"url(#g)\"\/><circle cx=\"256\" cy=\"256\" r=\"120\" fill=\"#1f2937\"\/><rect x=\"156\" y=\"356\" width=\"200\" height=\"18\" rx=\"9\" fill=\"#334155\"\/><\/svg>`);\n\n \/\/ Marquee\n function applyMarquee(el, text){\n el.classList.remove('marquee');\n el.textContent = text || '';\n requestAnimationFrame(()=>{\n if(el.scrollWidth > el.clientWidth + 4){\n const safe=(text||'').replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>');\n el.classList.add('marquee');\n el.innerHTML = `<span class=\"track\">${safe}<\/span><span class=\"track\">${safe}<\/span>`;\n }\n });\n }\n\n \/\/ Crossfade do fundo\n function setBackground(url){\n const next = (bgToggle ? bgA : bgB);\n const prev = (bgToggle ? bgB : bgA);\n bgToggle = !bgToggle;\n if(url){ next.style.backgroundImage = `url('${url}')`; void next.offsetWidth; next.classList.add('show'); prev.classList.remove('show'); }\n else{ next.style.backgroundImage=''; next.classList.remove('show'); prev.classList.remove('show'); }\n }\n\n \/\/ ====== Lyrics fetchers ======\n function stripLRC(lrc){\n return lrc.replace(\/^\\s*\\[(?:ti|ar|al|by|length|offset|re|ve):.*?\\]\\s*$\/gmi,'')\n .replace(\/\\s*\\[\\d{1,2}:\\d{2}(?:\\.\\d{1,3})?\\]\\s*\/g, '')\n .trim();\n }\n async function fetchLyricsLRCLIB(title, artist){\n const u = `https:\/\/lrclib.net\/api\/get?track_name=${encodeURIComponent(title)}&artist_name=${encodeURIComponent(artist)}`;\n const r = await fetch(u, {cache:'no-store'});\n if(!r.ok) throw new Error('lrclib fail');\n const j = await r.json();\n const raw = j?.plainLyrics || (j?.syncedLyrics ? stripLRC(j.syncedLyrics) : '');\n return (raw||'').trim();\n }\n async function fetchLyricsOVH(title, artist){\n const u = `https:\/\/api.lyrics.ovh\/v1\/${encodeURIComponent(artist)}\/${encodeURIComponent(title)}`;\n const r = await fetch(u, {cache:'no-store'});\n if(!r.ok) throw new Error('ovh fail');\n const j = await r.json();\n return (j?.lyrics||'').trim();\n }\n async function getLyrics(title, artist){\n try{ const t = await fetchLyricsLRCLIB(title, artist); if(t) return t; }catch(e){}\n try{ const t = await fetchLyricsOVH(title, artist); if(t) return t; }catch(e){}\n return '';\n }\n function renderLyrics(text){\n const html = text ? text : '<div class=\"empty\">Letra n\u00e3o encontrada.<\/div>';\n lyricsTablet.innerHTML = html.replace(\/\\n\/g,'<br>');\n lyricsMobile.innerHTML = html.replace(\/\\n\/g,'<br>');\n }\n\n \/\/ Now playing + arte + letra\n async function refresh(){\n try{\n const npRes = await fetch(`${AZURACAST_BASE}\/api\/nowplaying\/${STATION}`, {cache:'no-store'});\n const np = await npRes.json();\n const s = np?.now_playing?.song || {};\n const title = s.title || 'Ao vivo';\n const artist= s.artist || 'R\u00e1dio F\u00e1cil';\n const album = s.album || '';\n\n \/\/ T\u00edtulos + marquee\n applyMarquee(tTitleLG, title);\n applyMarquee(tSubLG, [artist, album].filter(Boolean).join(' \u2022 ') || artist);\n applyMarquee(tTitleSM, title);\n applyMarquee(tSubSM, [artist, album].filter(Boolean).join(' \u2022 ') || artist);\n applyMarquee(tTitleSheet, title);\n applyMarquee(tSubSheet, [artist, album].filter(Boolean).join(' \u2022 ') || artist);\n\n \/\/ Arte + fundo\n let q = encodeURIComponent(`${artist} ${title}`.trim());\n let bgUrl = '';\n if(q){\n const r = await fetch(`https:\/\/itunes.apple.com\/search?term=${q}&entity=song&limit=1`, {cache:'no-store'});\n const j = await r.json();\n const item = j?.results?.[0];\n const art100 = item?.artworkUrl100;\n if(art100){\n const a200 = art100.replace(\/100x100bb\\.jpg\/, '200x200bb.jpg');\n const a1000 = art100.replace(\/100x100bb\\.jpg\/, '1000x1000bb.jpg');\n artLG.src = a1000; artSM.src = a200; artSheet.src = a1000; bgUrl = a1000;\n }else{ artLG.src = artSM.src = artSheet.src = FALLBACK; }\n }else{ artLG.src = artSM.src = artSheet.src = FALLBACK; }\n setBackground(bgUrl);\n\n \/\/ Letras\n lyricsTablet.innerHTML = '<div class=\"empty\">Buscando letra\u2026<\/div>';\n lyricsMobile.innerHTML = '<div class=\"empty\">Buscando letra\u2026<\/div>';\n const lyr = await getLyrics(title, artist);\n renderLyrics(lyr);\n }catch(e){\n artLG.src = artSM.src = artSheet.src = FALLBACK;\n applyMarquee(tTitleLG, 'Ao vivo'); applyMarquee(tSubLG, 'R\u00e1dio F\u00e1cil');\n applyMarquee(tTitleSM, 'Ao vivo'); applyMarquee(tSubSM, 'R\u00e1dio F\u00e1cil');\n applyMarquee(tTitleSheet, 'Ao vivo'); applyMarquee(tSubSheet, 'R\u00e1dio F\u00e1cil');\n setBackground('');\n renderLyrics('');\n }\n }\n\n refresh();\n setInterval(refresh, 15000);\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Apple-style Radio Player \u2014 \u2014 Letra Buscando letra\u2026 \u2014 \u2014 \u2014 \u2014 Letra Buscando letra\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-324","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=324"}],"version-history":[{"count":86,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/324\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/324\/revisions\/422"}],"wp:attachment":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nApple-style Radio Player<\/title>\n<style>\n\/* =========================\n Fonts\n ========================= *\/\n@font-face{\n font-family:\"SF Pro Display\";\n font-style:normal;\n font-weight:100 900;\n font-display:swap;\n src: local(\"SF Pro Display\"), local(\"SFProDisplay-Regular\"), local(\"SF Pro\");\n}\n\n\/* =========================\n Design tokens\n ========================= *\/\n:root{\n --bg:#0b1020; --panel:#0e1326; --ink:#ffffff; --muted:#cbd5e1; --accent:#ffffff;\n --line:rgba(255,255,255,.08); --radius:18px; --shadow:0 12px 36px rgba(0,0,0,.25);\n}\n*{box-sizing:border-box}\nhtml,body{margin:0;height:100%;color:var(--ink);background:var(--bg);\n font-family:\"SF Pro Display\",-apple-system,BlinkMacSystemFont,\"SF Pro Text\",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}\n.hide{display:none !important}\n\n\/* =========================\n Fundo com crossfade\n ========================= *\/\n.bg-stack{position:fixed; inset:0; z-index:0; overflow:hidden}\n.bg-layer{position:absolute; inset:0; background-position:center; background-size:cover;\n filter:blur(60px) saturate(130%); transform:scale(1.2); opacity:0; transition:opacity .7s ease}\n.bg-layer.show{opacity:.55}\n.gradient-overlay{position:fixed; inset:0; z-index:1;\n background:linear-gradient(180deg, rgba(5,8,20,.75) 0%, rgba(5,8,20,.6) 40%, rgba(5,8,20,.85) 100%)}\n\n\/* =========================\n \u00cdcones (CSS mask)\n ========================= *\/\n.icon{width:28px;height:28px;display:inline-block;background:currentColor;\n -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}\n.i-play{ -webkit-mask-image:url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M8 5v14l11-7z\"\/><\/svg>'); mask-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path fill='%23000' d='M8 5v14l11-7z'\/><\/svg>\");}\n.i-pause{ -webkit-mask-image:url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M6 5h4v14H6zM14 5h4v14h-4z\"\/><\/svg>'); mask-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6 5h4v14H6zM14 5h4v14h-4z'\/><\/svg>\");}\n.i-volume{ -webkit-mask-image:url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M3 10v4h4l5 4V6L7 10H3z\"\/><\/svg>'); mask-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 10v4h4l5 4V6L7 10H3z'\/><\/svg>\");}\n\n\/* =========================\n Tablet \u2014 layout + alturas fixas\n ========================= *\/\n.tablet-wrap{\n --pad: 40px;\n position:relative;\n min-height:100vh;\n z-index:2;\n display:grid;\n grid-template-columns:minmax(280px,520px) 1fr;\n gap:38px;\n padding:var(--pad);\n}\n.album-card,\n.lyrics .lyrics-box{\n height: min(860px, calc(100svh - (var(--pad) * 2)));\n height: min(860px, calc(100vh - (var(--pad) * 2))); \/* fallback *\/\n min-height: 560px;\n}\n\n.album-card{\n z-index:2; background:rgba(255,255,255,.06);\n border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);\n padding:24px; display:flex; flex-direction:column; gap:18px; backdrop-filter:blur(12px)\n}\n.cover{position:relative; width:100%; aspect-ratio:1\/1; border-radius:16px; overflow:hidden; background:#111; box-shadow:0 20px 50px rgba(0,0,0,.35); flex:1 1 auto; min-height:0}\n.cover img{width:100%;height:100%;object-fit:cover;display:block}\n.title{font-weight:800; font-size:28px; line-height:1.15; letter-spacing:.2px}\n.artist{color:var(--muted); font-size:15px}\n\n\/* Marquee autom\u00e1tico *\/\n.marquee{ position:relative; display:block; overflow:hidden; white-space:nowrap }\n.marquee .track{ display:inline-block; padding-right:48px; animation: marquee 12s linear infinite }\n@keyframes marquee{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }\n\n\/* Barra de \u201cprogresso\u201d decorativa *\/\n.progress{ position:relative; height:4px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden}\n.progress > span{display:block; height:100%; width:18%; background:var(--accent)}\n\n\/* Controles \u2014 apenas Play\/Pause (transparente) *\/\n.controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin:6px 0 2px}\n.btn{ width:52px; height:52px; border:none; border-radius:50%;\n display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; cursor:pointer;\n transition:transform .08s ease, background .2s ease}\n.btn:active{transform:scale(.97)}\n.btn--primary{ width:68px; height:68px; border:none; background:transparent; color:#fff }\n.btn--primary:hover{background:transparent}\n\n\/* Volume *\/\n.vol{ margin-top:10px; display:flex; align-items:center; gap:12px}\n.vol .icon{width:22px;height:22px;opacity:.85}\n.vol input[type=\"range\"]{appearance:none; width:100%; height:4px; background:rgba(255,255,255,.15); border-radius:999px; outline:none}\n.vol input[type=\"range\"]::-webkit-slider-thumb{appearance:none; width:18px;height:18px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,.2)}\n\n\/* Letras (tablet) \u2014 mesmo tamanho e scroll interno *\/\n.lyrics{z-index:2; display:flex; align-items:stretch; justify-content:center; position:relative}\n.lyrics .lyrics-box{\n width:100%; max-width:900px; background:rgba(255,255,255,.05); border:1px solid var(--line);\n border-radius:22px; box-shadow:var(--shadow); padding:24px; display:flex; flex-direction:column; overflow:hidden; line-height:1.6;\n}\n.lyrics-box .heading{flex:0 0 auto; font-weight:800; opacity:.9; margin-bottom:10px}\n.lyrics-box .content{flex:1 1 auto; min-height:0; overflow:auto; white-space:pre-wrap; color:#e5e7eb; font-size:clamp(14px,1.6vw,20px)}\n.lyrics-box .empty{opacity:.6; font-style:italic}\n\n\/* =========================\n Mobile \u2014 mini-player + sheet\n ========================= *\/\n.mobile-shell{ position:fixed; left:0; right:0; bottom:0; z-index:30 }\n.minibar{ margin:0 auto 12px; width:min(720px, calc(100% - 24px)); background:rgba(255,255,255,.08); border:1px solid var(--line);\n border-radius:18px; display:flex; align-items:center; gap:12px; padding:10px; backdrop-filter:blur(10px); box-shadow:var(--shadow); cursor:pointer}\n.thumb{width:42px;height:42px;border-radius:10px;overflow:hidden;background:#222;flex:0 0 auto}\n.thumb img{width:100%;height:100%;object-fit:cover;display:block}\n.meta{min-width:0; display:flex; flex-direction:column; gap:2px}\n.meta .t,.meta .s{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}\n.meta .t{font-weight:700; font-size:15px}\n.meta .s{font-size:12px; color:var(--muted)}\n.mini-btn{margin-left:auto; width:40px;height:40px;border:none;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center}\n\n\/* Sheet *\/\n.sheet{ position:fixed; left:0; right:0; bottom:0; top:100%; background:rgba(12,16,32,.96); backdrop-filter:blur(16px);\n border-top-left-radius:22px; border-top-right-radius:22px; transition:top .35s cubic-bezier(.2,.7,.2,1); z-index:40;\n display:grid; grid-template-rows:auto auto auto 1fr auto; padding:18px 16px 26px}\n.sheet.open{ top:0 }\n.sheet .grab{height:5px;width:48px;border-radius:999px;background:rgba(255,255,255,.25);margin:8px auto 14px}\n.sheet .cover{width:min(86vw, 520px); margin:0 auto 16px}\n.sheet .title{font-size:22px;text-align:center}\n.sheet .artist{text-align:center;margin-top:4px}\n.sheet .progress{margin:12px 14px}\n.sheet .controls{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:8px}\n.sheet .controls .btn--primary{width:68px;height:68px;background:transparent}\n.sheet .vol{padding:0 14px; margin-top:8px}\n\n\/* Letras no mobile \u2014 altura limitada + scroll interno *\/\n.sheet .lyrics-box{ margin:14px 12px 0; height: clamp(28vh, 34vh, 360px); overflow:auto }\n\n\/* Breakpoints *\/\n@media (max-width: 900px){ .tablet-wrap{display:none} }\n@media (min-width: 901px){ .mobile-shell, .sheet{display:none} }\n\n\/* A11y foco *\/\n:focus-visible{outline:2px solid rgba(255,255,255,.5); outline-offset:2px}\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"bg-stack\" aria-hidden=\"true\">\n <div id=\"bgA\" class=\"bg-layer\"><\/div>\n <div id=\"bgB\" class=\"bg-layer\"><\/div>\n<\/div>\n<div class=\"gradient-overlay\" aria-hidden=\"true\"><\/div>\n\n\n<main class=\"tablet-wrap\" aria-label=\"Now Playing (Tablet)\">\n <section class=\"album-card\">\n <div class=\"cover\"><img id=\"artLG\" alt=\"Capa do \u00e1lbum\"><\/div>\n <div id=\"tTitleLG\" class=\"title\">\u2014<\/div>\n <div id=\"tSubLG\" class=\"artist\">\u2014<\/div>\n <div class=\"progress\" aria-label=\"Progresso (decorativo)\"><span id=\"progLG\"><\/span><\/div>\n <div class=\"controls\">\n <button id=\"playTab\" class=\"btn btn--primary\" title=\"Play\/Pause\">\n <span id=\"icoPlayTab\" class=\"icon i-play\"><\/span>\n <span id=\"icoPauseTab\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n <\/div>\n <div class=\"vol\">\n <span class=\"icon i-volume\" aria-hidden=\"true\"><\/span>\n <input id=\"volTab\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\" aria-label=\"Volume\"\/>\n <\/div>\n <\/section>\n\n \n <section class=\"lyrics\">\n <div class=\"lyrics-box\">\n <div class=\"heading\">Letra<\/div>\n <div id=\"lyricsTablet\" class=\"content\"><div class=\"empty\">Buscando letra\u2026<\/div><\/div>\n <\/div>\n <\/section>\n<\/main>\n\n\n<div class=\"mobile-shell\" aria-live=\"polite\">\n <div id=\"minibar\" class=\"minibar\" role=\"button\" aria-expanded=\"false\" aria-controls=\"sheet\">\n <div class=\"thumb\"><img id=\"artSM\" alt=\"\"><\/div>\n <div class=\"meta\">\n <div id=\"tTitleSM\" class=\"t\">\u2014<\/div>\n <div id=\"tSubSM\" class=\"s\">\u2014<\/div>\n <\/div>\n <button id=\"playMini\" class=\"mini-btn\" aria-label=\"Play\/Pause\">\n <span id=\"icoPlayMini\" class=\"icon i-play\"><\/span>\n <span id=\"icoPauseMini\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n <\/div>\n\n <section id=\"sheet\" class=\"sheet\" aria-modal=\"true\" role=\"dialog\" aria-label=\"Now Playing\">\n <div class=\"grab\"><\/div>\n <div class=\"cover\"><img id=\"artSheet\" alt=\"\"><\/div>\n <div id=\"tTitleSheet\" class=\"title\">\u2014<\/div>\n <div id=\"tSubSheet\" class=\"artist\">\u2014<\/div>\n\n <div class=\"progress\"><span id=\"progSheet\"><\/span><\/div>\n\n <div class=\"controls\">\n <button id=\"playSheet\" class=\"btn btn--primary\" title=\"Play\/Pause\">\n <span id=\"icoPlaySheet\" class=\"icon i-play\"><\/span>\n <span id=\"icoPauseSheet\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n <\/div>\n\n <div class=\"lyrics-box\">\n <div class=\"heading\">Letra<\/div>\n <div id=\"lyricsMobile\" class=\"content\"><div class=\"empty\">Buscando letra\u2026<\/div><\/div>\n <\/div>\n\n <div class=\"vol\">\n <span class=\"icon i-volume\" aria-hidden=\"true\"><\/span>\n <input id=\"volSheet\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.8\" aria-label=\"Volume\"\/>\n <\/div>\n <\/section>\n<\/div>\n\n<audio id=\"audio\" preload=\"none\" playsinline><\/audio>\n\n<script>\n(function(){\n \/\/ ====== CONFIG ======\n const STREAM_URL = 'https:\/\/glaudiotecnology.srv.br\/listen\/r%C3%A1dio_f%C3%A1cil\/radio.mp3';\n const AZURACAST_BASE = 'https:\/\/glaudiotecnology.srv.br';\n const STATION = 'radio_facil';\n\n \/\/ ====== ELTS ======\n const audio = document.getElementById('audio');\n\n \/\/ Tablet\n const playTab = document.getElementById('playTab');\n const icoPlayTab = document.getElementById('icoPlayTab');\n const icoPauseTab= document.getElementById('icoPauseTab');\n const volTab = document.getElementById('volTab');\n const tTitleLG = document.getElementById('tTitleLG');\n const tSubLG = document.getElementById('tSubLG');\n const artLG = document.getElementById('artLG');\n const progLG = document.getElementById('progLG');\n const lyricsTablet = document.getElementById('lyricsTablet');\n\n \/\/ Background crossfade\n const bgA = document.getElementById('bgA');\n const bgB = document.getElementById('bgB');\n let bgToggle = false;\n\n \/\/ Mobile\n const minibar = document.getElementById('minibar');\n const playMini = document.getElementById('playMini');\n const icoPlayMini = document.getElementById('icoPlayMini');\n const icoPauseMini= document.getElementById('icoPauseMini');\n const artSM = document.getElementById('artSM');\n const tTitleSM = document.getElementById('tTitleSM');\n const tSubSM = document.getElementById('tSubSM');\n\n const sheet = document.getElementById('sheet');\n const playSheet= document.getElementById('playSheet');\n const icoPlaySheet = document.getElementById('icoPlaySheet');\n const icoPauseSheet= document.getElementById('icoPauseSheet');\n const artSheet = document.getElementById('artSheet');\n const tTitleSheet= document.getElementById('tTitleSheet');\n const tSubSheet = document.getElementById('tSubSheet');\n const volSheet = document.getElementById('volSheet');\n const progSheet = document.getElementById('progSheet');\n const lyricsMobile = document.getElementById('lyricsMobile');\n\n \/\/ Primeira intera\u00e7\u00e3o (iOS)\n let armed=false; function arm(){ if(!armed){ audio.src=STREAM_URL; audio.load(); armed=true; } }\n\n \/\/ Estado bot\u00f5es\n function setPlayingUI(isPlaying){\n icoPlayTab.classList.toggle('hide', isPlaying);\n icoPauseTab.classList.toggle('hide', !isPlaying);\n icoPlayMini.classList.toggle('hide', isPlaying);\n icoPauseMini.classList.toggle('hide', !isPlaying);\n icoPlaySheet.classList.toggle('hide', isPlaying);\n icoPauseSheet.classList.toggle('hide', !isPlaying);\n }\n async function toggle(){\n arm();\n if(audio.paused){ try{ await audio.play(); setPlayingUI(true);}catch(e){} }\n else{ audio.pause(); setPlayingUI(false); }\n }\n playTab.addEventListener('click', toggle);\n playMini.addEventListener('click', (e)=>{ e.stopPropagation(); toggle(); });\n playSheet.addEventListener('click', toggle);\n\n \/\/ Abrir\/fechar sheet\n minibar.addEventListener('click', ()=>{ sheet.classList.add('open'); minibar.setAttribute('aria-expanded','true'); });\n sheet.addEventListener('click', (e)=>{ if(e.target === sheet) { sheet.classList.remove('open'); minibar.setAttribute('aria-expanded','false'); } });\n\n \/\/ Volume\n const setVol = v => audio.volume = +v;\n setVol(volTab.value);\n volTab.addEventListener('input', e=> setVol(e.target.value));\n volSheet.addEventListener('input', e=> setVol(e.target.value));\n\n \/\/ Progresso fake\n let p=0; setInterval(()=>{ p=(p+1)%100; progLG.style.width = (10+p)+'%'; progSheet.style.width = (10+p)+'%'; }, 1000);\n\n \/\/ Fallback capa\n const FALLBACK = 'data:image\/svg+xml;utf8,'+encodeURIComponent(`<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><defs><linearGradient id=\"g\" x1=\"0\" x2=\"1\"><stop offset=\"0\" stop-color=\"#0f172a\"\/><stop offset=\"1\" stop-color=\"#0b1020\"\/><\/linearGradient><\/defs><rect width=\"512\" height=\"512\" fill=\"url(#g)\"\/><circle cx=\"256\" cy=\"256\" r=\"120\" fill=\"#1f2937\"\/><rect x=\"156\" y=\"356\" width=\"200\" height=\"18\" rx=\"9\" fill=\"#334155\"\/><\/svg>`);\n\n \/\/ Marquee\n function applyMarquee(el, text){\n el.classList.remove('marquee');\n el.textContent = text || '';\n requestAnimationFrame(()=>{\n if(el.scrollWidth > el.clientWidth + 4){\n const safe=(text||'').replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>');\n el.classList.add('marquee');\n el.innerHTML = `<span class=\"track\">${safe}<\/span><span class=\"track\">${safe}<\/span>`;\n }\n });\n }\n\n \/\/ Crossfade do fundo\n function setBackground(url){\n const next = (bgToggle ? bgA : bgB);\n const prev = (bgToggle ? bgB : bgA);\n bgToggle = !bgToggle;\n if(url){ next.style.backgroundImage = `url('${url}')`; void next.offsetWidth; next.classList.add('show'); prev.classList.remove('show'); }\n else{ next.style.backgroundImage=''; next.classList.remove('show'); prev.classList.remove('show'); }\n }\n\n \/\/ ====== Lyrics fetchers ======\n function stripLRC(lrc){\n return lrc.replace(\/^\\s*\\[(?:ti|ar|al|by|length|offset|re|ve):.*?\\]\\s*$\/gmi,'')\n .replace(\/\\s*\\[\\d{1,2}:\\d{2}(?:\\.\\d{1,3})?\\]\\s*\/g, '')\n .trim();\n }\n async function fetchLyricsLRCLIB(title, artist){\n const u = `https:\/\/lrclib.net\/api\/get?track_name=${encodeURIComponent(title)}&artist_name=${encodeURIComponent(artist)}`;\n const r = await fetch(u, {cache:'no-store'});\n if(!r.ok) throw new Error('lrclib fail');\n const j = await r.json();\n const raw = j?.plainLyrics || (j?.syncedLyrics ? stripLRC(j.syncedLyrics) : '');\n return (raw||'').trim();\n }\n async function fetchLyricsOVH(title, artist){\n const u = `https:\/\/api.lyrics.ovh\/v1\/${encodeURIComponent(artist)}\/${encodeURIComponent(title)}`;\n const r = await fetch(u, {cache:'no-store'});\n if(!r.ok) throw new Error('ovh fail');\n const j = await r.json();\n return (j?.lyrics||'').trim();\n }\n async function getLyrics(title, artist){\n try{ const t = await fetchLyricsLRCLIB(title, artist); if(t) return t; }catch(e){}\n try{ const t = await fetchLyricsOVH(title, artist); if(t) return t; }catch(e){}\n return '';\n }\n function renderLyrics(text){\n const html = text ? text : '<div class=\"empty\">Letra n\u00e3o encontrada.<\/div>';\n lyricsTablet.innerHTML = html.replace(\/\\n\/g,'<br>');\n lyricsMobile.innerHTML = html.replace(\/\\n\/g,'<br>');\n }\n\n \/\/ Now playing + arte + letra\n async function refresh(){\n try{\n const npRes = await fetch(`${AZURACAST_BASE}\/api\/nowplaying\/${STATION}`, {cache:'no-store'});\n const np = await npRes.json();\n const s = np?.now_playing?.song || {};\n const title = s.title || 'Ao vivo';\n const artist= s.artist || 'R\u00e1dio F\u00e1cil';\n const album = s.album || '';\n\n \/\/ T\u00edtulos + marquee\n applyMarquee(tTitleLG, title);\n applyMarquee(tSubLG, [artist, album].filter(Boolean).join(' \u2022 ') || artist);\n applyMarquee(tTitleSM, title);\n applyMarquee(tSubSM, [artist, album].filter(Boolean).join(' \u2022 ') || artist);\n applyMarquee(tTitleSheet, title);\n applyMarquee(tSubSheet, [artist, album].filter(Boolean).join(' \u2022 ') || artist);\n\n \/\/ Arte + fundo\n let q = encodeURIComponent(`${artist} ${title}`.trim());\n let bgUrl = '';\n if(q){\n const r = await fetch(`https:\/\/itunes.apple.com\/search?term=${q}&entity=song&limit=1`, {cache:'no-store'});\n const j = await r.json();\n const item = j?.results?.[0];\n const art100 = item?.artworkUrl100;\n if(art100){\n const a200 = art100.replace(\/100x100bb\\.jpg\/, '200x200bb.jpg');\n const a1000 = art100.replace(\/100x100bb\\.jpg\/, '1000x1000bb.jpg');\n artLG.src = a1000; artSM.src = a200; artSheet.src = a1000; bgUrl = a1000;\n }else{ artLG.src = artSM.src = artSheet.src = FALLBACK; }\n }else{ artLG.src = artSM.src = artSheet.src = FALLBACK; }\n setBackground(bgUrl);\n\n \/\/ Letras\n lyricsTablet.innerHTML = '<div class=\"empty\">Buscando letra\u2026<\/div>';\n lyricsMobile.innerHTML = '<div class=\"empty\">Buscando letra\u2026<\/div>';\n const lyr = await getLyrics(title, artist);\n renderLyrics(lyr);\n }catch(e){\n artLG.src = artSM.src = artSheet.src = FALLBACK;\n applyMarquee(tTitleLG, 'Ao vivo'); applyMarquee(tSubLG, 'R\u00e1dio F\u00e1cil');\n applyMarquee(tTitleSM, 'Ao vivo'); applyMarquee(tSubSM, 'R\u00e1dio F\u00e1cil');\n applyMarquee(tTitleSheet, 'Ao vivo'); applyMarquee(tSubSheet, 'R\u00e1dio F\u00e1cil');\n setBackground('');\n renderLyrics('');\n }\n }\n\n refresh();\n setInterval(refresh, 15000);\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Apple-style Radio Player \u2014 \u2014 Letra Buscando letra\u2026 \u2014 \u2014 \u2014 \u2014 Letra Buscando letra\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-324","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=324"}],"version-history":[{"count":86,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/324\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/324\/revisions\/422"}],"wp:attachment":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}