Gold Class \u2014 Player Profissional<\/title>\n\n<style>\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:root{\n --bg:#0b0f16;\n --ink:#fff;\n --muted:#cbd5e1;\n --line:rgba(255,255,255,.10);\n --card:rgba(255,255,255,.06);\n --shadow:0 18px 48px rgba(0,0,0,.35);\n --radius:20px;\n --pad:24px;\n --gold:#d4af37;\n --gold2:#ffdf6b;\n}\n\n*{box-sizing:border-box}\nhtml,body{margin:0;height:100%}\nbody{\n color:var(--ink);\n background:var(--bg);\n font-family:\"SF Pro Display\",-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Arial,sans-serif;\n min-height:100vh;\n}\n\n\/* ===== BG blur animado ===== *\/\n.bg-stack{position:fixed; inset:0; z-index:0; overflow:hidden}\n.bg-layer{\n position:absolute; inset:0;\n background-position:center; background-size:cover;\n filter:blur(60px) saturate(140%);\n transform:scale(1.25);\n opacity:0;\n transition:opacity .8s ease;\n}\n.bg-layer.show{opacity:.55}\n.bg-overlay{\n position:fixed; inset:0; z-index:1;\n background:linear-gradient(180deg, rgba(5,8,20,.82) 0%, rgba(5,8,20,.65) 40%, rgba(5,8,20,.88) 100%);\n}\n\n\/* ===== Layout ===== *\/\n.wrapper{\n position:relative; z-index:2;\n width:100%; max-width:1100px; margin:0 auto;\n padding:var(--pad);\n display:grid; gap:24px;\n}\n@media (min-width:900px){\n .wrapper{grid-template-columns:minmax(320px,420px) 1fr}\n}\n\n\/* Pain\u00e9is *\/\n.panel{\n background:var(--card);\n border:1px solid var(--line);\n border-radius:var(--radius);\n box-shadow:var(--shadow);\n backdrop-filter:blur(12px);\n}\n\n\/* ===== Topo ===== *\/\n.topbar{\n position:relative; z-index:2;\n max-width:1100px; margin:0 auto;\n padding:22px var(--pad) 0;\n display:flex; align-items:center; justify-content:center;\n}\n.topbar img{max-height:74px; width:auto; display:block}\n\n\/* ===== Player ===== *\/\n.card{padding:20px; display:flex; flex-direction:column; gap:14px}\n.cover{\n position:relative;\n width:100%;\n aspect-ratio:1\/1;\n border-radius:16px;\n overflow:hidden;\n background:#111;\n box-shadow:0 20px 55px rgba(0,0,0,.42);\n}\n.cover::after{\n content:\"\";\n position:absolute; inset:-2px;\n border-radius:18px;\n padding:2px;\n background:linear-gradient(120deg, rgba(212,175,55,.15), rgba(255,223,107,.15));\n pointer-events:none;\n}\n.cover img{\n width:100%; height:100%;\n object-fit:cover;\n display:block;\n transition:opacity .35s ease, transform .35s ease;\n}\n\n\/* Linha: Play + meta ao lado *\/\n.nowplaying{display:flex; align-items:center; gap:14px; padding-top:2px}\n.play-btn{\n width:72px; height:72px; border:none; border-radius:50%;\n background:transparent !important; color:#fff;\n display:grid; place-items:center; cursor:pointer;\n -webkit-tap-highlight-color:transparent;\n}\n.play-btn:hover{filter:drop-shadow(0 0 18px rgba(212,175,55,.25))}\n.play-btn .icon{\n width:42px; height:42px;\n display:inline-block; background:currentColor;\n -webkit-mask-size:contain; mask-size:contain;\n -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;\n -webkit-mask-position:center; mask-position:center;\n}\n.i-play{\n -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>\");\n 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}\n.i-pause{\n -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>\");\n 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}\n.hide{display:none !important}\n\n.meta{min-width:0; display:flex; flex-direction:column; gap:2px}\n.title{\n font-weight:900;\n font-size:22px;\n line-height:1.15;\n letter-spacing:.2px;\n min-width:0;\n color:var(--gold2);\n text-shadow:0 2px 18px rgba(212,175,55,.18);\n}\n.sub{color:var(--muted); font-size:14px; min-width:0}\n\n\/* Marquee *\/\n.marquee{position:relative; display:block; overflow:hidden; white-space:nowrap; max-width:100%}\n.marquee .track{display:inline-block; padding-right:48px; animation:marq 12s linear infinite}\n@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}\n\n\/* ===== Letra ===== *\/\n.lyrics{padding:16px; display:flex; flex-direction:column; overflow:hidden}\n.lyrics .heading{font-weight:900; opacity:.92; margin-bottom:8px; color:var(--gold2)}\n.lyrics .content{white-space:pre-wrap; color:#e5e7eb; line-height:1.55; flex:1 1 auto; min-height:0; overflow:auto}\n.lyrics .empty{opacity:.65; font-style:italic}\n\n\/* Alturas iguais *\/\n@media (min-width:900px){\n .equalize{\n height:min(860px, calc(100svh - (var(--pad)*2) - 110px));\n height:min(860px, calc(100vh - (var(--pad)*2) - 110px));\n min-height:560px;\n }\n .card{height:100%}\n .cover{flex:1 1 auto; min-height:0}\n}\n\n\/* ===== \u00daltimas tocadas ===== *\/\n.last-played{\n position:relative; z-index:2;\n width:100%; max-width:1100px; margin:0 auto 18px;\n padding:0 var(--pad);\n}\n.last-panel{padding:16px}\n.last-title{\n font-weight:900;\n margin:0 0 12px;\n color:var(--gold2);\n display:flex; align-items:center; gap:10px;\n}\n.badge-live{\n font-size:12px;\n padding:4px 10px;\n border-radius:999px;\n border:1px solid rgba(255,223,107,.35);\n background:rgba(212,175,55,.10);\n color:var(--gold2);\n}\n\n.last-scroll{\n max-height:260px;\n overflow:auto;\n display:flex;\n flex-direction:column;\n gap:10px;\n padding-right:6px;\n}\n\n@media (max-width:700px){\n .last-scroll{\n max-height:none;\n overflow-x:auto;\n overflow-y:hidden;\n flex-direction:row;\n gap:12px;\n padding-bottom:8px;\n scroll-snap-type:x mandatory;\n }\n .last-item{min-width:280px; scroll-snap-align:start;}\n}\n\n.last-item{\n display:flex;\n gap:12px;\n align-items:center;\n padding:10px;\n border-radius:14px;\n background:rgba(255,255,255,.04);\n border:1px solid var(--line);\n transition:transform .25s ease, border-color .25s ease, background .25s ease;\n}\n.last-item:hover{\n transform:translateY(-2px);\n border-color:rgba(255,223,107,.35);\n background:rgba(255,255,255,.06);\n}\n.last-item.enter{\n animation:pop .45s ease;\n}\n@keyframes pop{\n 0%{transform:translateY(6px); opacity:.0}\n 100%{transform:translateY(0); opacity:1}\n}\n\n.last-item img{\n width:56px; height:56px;\n border-radius:10px;\n object-fit:cover;\n flex-shrink:0;\n border:1px solid rgba(255,255,255,.10);\n}\n\n.last-meta{min-width:0; flex:1}\n.last-meta strong{\n display:block;\n font-size:15px;\n white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n}\n.last-meta span{\n display:block;\n font-size:13px;\n color:var(--muted);\n white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n}\n\n.last-time{\n font-size:12px;\n color:rgba(255,255,255,.75);\n padding-left:10px;\n border-left:1px solid rgba(255,255,255,.10);\n white-space:nowrap;\n}\n\n\/* ===== Preview custom ===== *\/\n.preview-wrap{\n margin-top:10px;\n padding:12px;\n border-radius:14px;\n border:1px solid rgba(255,255,255,.10);\n background:rgba(255,255,255,.04);\n display:flex;\n flex-direction:column;\n gap:10px;\n}\n\n.preview-head{\n min-width:0;\n}\n\n.preview-wrap .label{\n font-size:12px;\n color:rgba(255,255,255,.72);\n margin-bottom:4px;\n}\n\n.preview-wrap .mini-title{\n font-weight:800;\n color:var(--gold2);\n font-size:13px;\n line-height:1.35;\n display:-webkit-box;\n -webkit-line-clamp:2;\n -webkit-box-orient:vertical;\n overflow:hidden;\n}\n\n.mini-player{\n display:flex;\n align-items:center;\n gap:12px;\n}\n\n.mini-play-btn{\n width:44px;\n height:44px;\n border:none;\n border-radius:50%;\n background:linear-gradient(135deg, rgba(212,175,55,.22), rgba(255,223,107,.10));\n border:1px solid rgba(255,223,107,.20);\n color:var(--gold2);\n display:grid;\n place-items:center;\n cursor:pointer;\n flex-shrink:0;\n transition:transform .2s ease, filter .2s ease, border-color .2s ease;\n}\n.mini-play-btn:hover{\n transform:translateY(-1px);\n filter:brightness(1.05);\n border-color:rgba(255,223,107,.40);\n}\n.mini-play-btn .icon{\n width:20px;\n height:20px;\n}\n\n.mini-progress-wrap{\n min-width:0;\n flex:1;\n display:flex;\n flex-direction:column;\n gap:6px;\n}\n\n.mini-seek{\n width:100%;\n appearance:none;\n height:4px;\n border-radius:999px;\n background:rgba(255,255,255,.16);\n outline:none;\n cursor:pointer;\n}\n.mini-seek::-webkit-slider-thumb{\n appearance:none;\n width:12px;\n height:12px;\n border-radius:50%;\n background:var(--gold2);\n border:none;\n}\n.mini-seek::-moz-range-thumb{\n width:12px;\n height:12px;\n border-radius:50%;\n background:var(--gold2);\n border:none;\n}\n\n.mini-time{\n display:flex;\n justify-content:space-between;\n gap:8px;\n font-size:11px;\n color:rgba(255,255,255,.68);\n}\n\n#previewAudio{\n display:none;\n}\n\n\/* ===== Rodap\u00e9 ===== *\/\nfooter{\n position:relative; z-index:2;\n max-width:1100px;\n margin:12px auto 26px;\n padding:16px var(--pad);\n background:rgba(255,255,255,.08);\n border:1px solid var(--line);\n border-radius:16px;\n backdrop-filter:blur(12px);\n text-align:center;\n color:#f7f9ff;\n text-shadow:0 1px 2px rgba(0,0,0,.55);\n line-height:1.6;\n}\nfooter strong{color:#fff}\nsmall.credit{display:block; opacity:.95}\na.clean{color:#fff; text-decoration:none}\na.clean:hover{text-decoration:underline}\n<\/style>\n<\/head>\n\n<body>\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=\"bg-overlay\" aria-hidden=\"true\"><\/div>\n\n<header class=\"topbar\">\n <img decoding=\"async\" src=\"https:\/\/glaudiotecnology.com.br\/radio\/wp-content\/uploads\/2025\/12\/gold-ultra-topo.png\" alt=\"Gold Class\">\n<\/header>\n\n<section class=\"wrapper\">\n <div class=\"panel equalize\">\n <div class=\"card\">\n <div class=\"cover\">\n <img decoding=\"async\" id=\"album-cover\" alt=\"Capa \/ Logo\" src=\"https:\/\/glaudiotecnology.com.br\/radio\/wp-content\/uploads\/2025\/12\/Cradio-gold.png\">\n <\/div>\n\n <div class=\"nowplaying\">\n <button id=\"togglePlay\" class=\"play-btn\" aria-label=\"Tocar \/ Pausar\">\n <span id=\"icoPlay\" class=\"icon i-play\"><\/span>\n <span id=\"icoPause\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n\n <div class=\"meta\">\n <div id=\"song-title\" class=\"title\">Carregando m\u00fasica...<\/div>\n <div id=\"artist-name\" class=\"sub\">Carregando artista...<\/div>\n <\/div>\n <\/div>\n\n <div id=\"previewBox\" class=\"preview-wrap\" style=\"display:none;\">\n <div class=\"preview-head\">\n <div class=\"label\">Preview (iTunes)<\/div>\n <div id=\"previewTitle\" class=\"mini-title\">\u2014<\/div>\n <\/div>\n\n <div class=\"mini-player\">\n <button id=\"previewToggle\" class=\"mini-play-btn\" aria-label=\"Tocar preview\">\n <span id=\"previewIcoPlay\" class=\"icon i-play\"><\/span>\n <span id=\"previewIcoPause\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n\n <div class=\"mini-progress-wrap\">\n <input id=\"previewSeek\" class=\"mini-seek\" type=\"range\" min=\"0\" max=\"30\" value=\"0\" step=\"0.1\">\n <div class=\"mini-time\">\n <span id=\"previewCurrent\">0:00<\/span>\n <span id=\"previewDuration\">0:30<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <audio id=\"previewAudio\" preload=\"none\"><\/audio>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"panel lyrics equalize\">\n <div class=\"heading\">Letra<\/div>\n <div id=\"lyricsBox\" class=\"content\"><div class=\"empty\">Buscando letra\u2026<\/div><\/div>\n <\/div>\n<\/section>\n\n<section class=\"last-played\">\n <div class=\"panel last-panel\">\n <div class=\"last-title\">\n \u00daltima m\u00fasica detectada\n <span class=\"badge-live\">atualiza automaticamente<\/span>\n <\/div>\n <div id=\"lastPlayedList\" class=\"last-scroll\">\n <div class=\"last-item\">\n <div class=\"last-meta\">\n <strong>Carregando m\u00fasica\u2026<\/strong>\n <span>aguarde<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<footer>\n <div style=\"margin-bottom:8px; font-size:22px; font-weight:900; color:var(--gold2);\">\n <a class=\"clean\" href=\"https:\/\/glaudiotecnology.com.br\" target=\"_blank\" rel=\"noopener noreferrer\">Gold Class \u2014 M\u00fasica de Classe<\/a>\n <\/div>\n <strong>GL TEC Tecnologia & Comunica\u00e7\u00e3o<\/strong><br>\n <small class=\"credit\">Site e Player desenvolvido por <strong>Gabriel L Garcia<\/strong><\/small>\n <a class=\"clean\" href=\"https:\/\/glaudiotecnology.com.br\" target=\"_blank\" rel=\"noopener noreferrer\">glaudiotecnology.com.br<\/a>\n<\/footer>\n\n<audio id=\"audio\" preload=\"none\" crossorigin=\"anonymous\">\n <source src=\"https:\/\/glaudiotecnology.srv.br\/listen\/r%C3%A1dio_f%C3%A1cil\/radio.mp3\" type=\"audio\/mpeg\" \/>\n<\/audio>\n\n<script>\n(function(){\n \/\/ ===== URLs =====\n const METADATA_URL = \"https:\/\/glaudiotecnology.uk\/api\/TnpBNE9BPT0rWg==\";\n const STREAM_URL = \"https:\/\/glaudiotecnology.srv.br\/listen\/r%C3%A1dio_f%C3%A1cil\/radio.mp3\";\n\n \/\/ ===== Elementos =====\n const audio = document.getElementById(\"audio\");\n const coverImg = document.getElementById(\"album-cover\");\n const songTitleEl = document.getElementById(\"song-title\");\n const artistEl = document.getElementById(\"artist-name\");\n const playBtn = document.getElementById(\"togglePlay\");\n const icoPlay = document.getElementById(\"icoPlay\");\n const icoPause = document.getElementById(\"icoPause\");\n const lyricsBox = document.getElementById(\"lyricsBox\");\n const lastList = document.getElementById(\"lastPlayedList\");\n\n const previewBox = document.getElementById(\"previewBox\");\n const previewAudio = document.getElementById(\"previewAudio\");\n const previewTitle = document.getElementById(\"previewTitle\");\n const previewToggle = document.getElementById(\"previewToggle\");\n const previewIcoPlay = document.getElementById(\"previewIcoPlay\");\n const previewIcoPause = document.getElementById(\"previewIcoPause\");\n const previewSeek = document.getElementById(\"previewSeek\");\n const previewCurrent = document.getElementById(\"previewCurrent\");\n const previewDuration = document.getElementById(\"previewDuration\");\n\n const bgA = document.getElementById(\"bgA\");\n const bgB = document.getElementById(\"bgB\");\n let bgToggle = false;\n\n \/\/ ===== Config =====\n const DEFAULT_COVER = \"https:\/\/glaudiotecnology.com.br\/radio\/wp-content\/uploads\/2025\/12\/Cradio-gold.png\";\n\n \/\/ ===== Play\/Pause principal =====\n let armed = false;\n function arm(){\n if(!armed){\n audio.src = STREAM_URL;\n audio.load();\n armed = true;\n }\n }\n\n function setPlayingUI(isPlaying){\n icoPlay.classList.toggle(\"hide\", isPlaying);\n icoPause.classList.toggle(\"hide\", !isPlaying);\n }\n\n async function toggle(){\n arm();\n if(audio.paused){\n try{\n await audio.play();\n setPlayingUI(true);\n }catch(e){}\n }else{\n audio.pause();\n setPlayingUI(false);\n }\n }\n\n playBtn.addEventListener(\"click\", toggle);\n audio.addEventListener(\"play\", ()=>setPlayingUI(true));\n audio.addEventListener(\"pause\", ()=>setPlayingUI(false));\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 || \"\")\n .replace(\/&\/g,\"&\")\n .replace(\/<\/g,\"<\")\n .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 \/\/ ===== Background blur =====\n function setBackground(url){\n const next = (bgToggle ? bgA : bgB);\n const prev = (bgToggle ? bgB : bgA);\n bgToggle = !bgToggle;\n\n if(url){\n next.style.backgroundImage = `url('${url}')`;\n void next.offsetWidth;\n next.classList.add(\"show\");\n prev.classList.remove(\"show\");\n }else{\n next.style.backgroundImage = \"\";\n next.classList.remove(\"show\");\n prev.classList.remove(\"show\");\n }\n }\n\n \/\/ ===== iTunes =====\n async function itunesSearch(artist, title){\n const q = encodeURIComponent(`${artist} ${title}`.trim());\n const url = `https:\/\/itunes.apple.com\/search?term=${q}&entity=song&limit=1`;\n const r = await fetch(url, { cache:\"no-store\" });\n const j = await r.json();\n return j?.results?.[0] || null;\n }\n\n async function previewFromITunes(artist, title){\n try{\n const item = await itunesSearch(artist, title);\n return item?.previewUrl || \"\";\n }catch(e){}\n return \"\";\n }\n\n \/\/ ===== Letras =====\n function stripLRC(lrc){\n return lrc\n .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\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\");\n const j = await r.json();\n const raw = j?.plainLyrics || (j?.syncedLyrics ? stripLRC(j.syncedLyrics) : \"\");\n return (raw || \"\").trim();\n }\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\");\n const j = await r.json();\n return (j?.lyrics || \"\").trim();\n }\n\n async function getLyrics(title, artist){\n try{\n const t = await fetchLyricsLRCLIB(title, artist);\n if(t) return t;\n }catch(e){}\n try{\n const t = await fetchLyricsOVH(title, artist);\n if(t) return t;\n }catch(e){}\n return \"\";\n }\n\n function renderLyrics(text){\n lyricsBox.innerHTML = text\n ? text.replace(\/\\n\/g, \"<br>\")\n : `<div class=\"empty\">Letra n\u00e3o encontrada.<\/div>`;\n }\n\n \/\/ ===== XML helpers =====\n function getXmlValue(xmlDoc, tag){\n return xmlDoc.querySelector(tag)?.textContent?.trim() || \"\";\n }\n\n function parseArtistTitle(text){\n const raw = (text || \"\").trim();\n\n if(!raw){\n return { artist: \"Gold Class\", title: \"Ao vivo\" };\n }\n\n const parts = raw.split(\" - \");\n if(parts.length >= 2){\n return {\n artist: parts.shift().trim() || \"Gold Class\",\n title: parts.join(\" - \").trim() || \"Ao vivo\"\n };\n }\n\n return {\n artist: \"Gold Class\",\n title: raw\n };\n }\n\n \/\/ ===== Preview custom =====\n function setPreviewPlayingUI(isPlaying){\n previewIcoPlay.classList.toggle(\"hide\", isPlaying);\n previewIcoPause.classList.toggle(\"hide\", !isPlaying);\n }\n\n function formatPreviewTime(sec){\n const s = Math.floor(sec || 0);\n const m = Math.floor(s \/ 60);\n const r = s % 60;\n return `${m}:${String(r).padStart(2, \"0\")}`;\n }\n\n function resetPreviewPlayer(){\n previewAudio.pause();\n previewAudio.removeAttribute(\"src\");\n previewAudio.load();\n previewSeek.value = 0;\n previewSeek.max = 30;\n previewCurrent.textContent = \"0:00\";\n previewDuration.textContent = \"0:30\";\n setPreviewPlayingUI(false);\n }\n\n previewToggle.addEventListener(\"click\", async ()=>{\n if(!previewAudio.src) return;\n\n if(previewAudio.paused){\n try{\n await previewAudio.play();\n setPreviewPlayingUI(true);\n }catch(e){}\n }else{\n previewAudio.pause();\n setPreviewPlayingUI(false);\n }\n });\n\n previewAudio.addEventListener(\"loadedmetadata\", ()=>{\n const dur = isFinite(previewAudio.duration) && previewAudio.duration > 0 ? previewAudio.duration : 30;\n previewSeek.max = dur;\n previewDuration.textContent = formatPreviewTime(dur);\n });\n\n previewAudio.addEventListener(\"timeupdate\", ()=>{\n previewSeek.value = previewAudio.currentTime || 0;\n previewCurrent.textContent = formatPreviewTime(previewAudio.currentTime || 0);\n });\n\n previewAudio.addEventListener(\"ended\", ()=>{\n previewSeek.value = 0;\n previewCurrent.textContent = \"0:00\";\n setPreviewPlayingUI(false);\n });\n\n previewAudio.addEventListener(\"pause\", ()=>{\n setPreviewPlayingUI(false);\n });\n\n previewAudio.addEventListener(\"play\", ()=>{\n setPreviewPlayingUI(true);\n });\n\n previewSeek.addEventListener(\"input\", ()=>{\n if(previewAudio.src){\n previewAudio.currentTime = Number(previewSeek.value || 0);\n }\n });\n\n \/\/ ===== Estado =====\n let lastNowKey = \"\";\n\n \/\/ ===== Atualiza\u00e7\u00e3o principal =====\n async function refresh(){\n try{\n const res = await fetch(METADATA_URL, { cache:\"no-store\" });\n const xmlText = await res.text();\n\n const parser = new DOMParser();\n const xmlDoc = parser.parseFromString(xmlText, \"text\/xml\");\n\n const musicaAtual = getXmlValue(xmlDoc, \"musica_atual\");\n const capaMusica = getXmlValue(xmlDoc, \"capa_musica\");\n const tituloRadio = getXmlValue(xmlDoc, \"titulo\") || \"Gold Class\";\n\n const parsed = parseArtistTitle(musicaAtual);\n const artist = parsed.artist || tituloRadio;\n const title = parsed.title || \"Ao vivo\";\n const nowKey = `${artist} - ${title}`;\n\n if(nowKey !== lastNowKey){\n lastNowKey = nowKey;\n\n applyMarquee(songTitleEl, title);\n applyMarquee(artistEl, artist);\n\n previewBox.style.display = \"none\";\n resetPreviewPlayer();\n\n let previewUrl = \"\";\n try{\n previewUrl = await previewFromITunes(artist, title);\n }catch(e){}\n\n if(previewUrl){\n previewTitle.textContent = `${artist} \u2014 ${title}`;\n previewAudio.src = previewUrl;\n previewBox.style.display = \"flex\";\n }\n\n let newCover = capaMusica || \"\";\n if(!newCover){\n try{\n const item = await itunesSearch(artist, title);\n const art100 = item?.artworkUrl100;\n newCover = art100\n ? art100.replace(\/100x100bb\\.jpg\/, \"1000x1000bb.jpg\").replace(\"100x100\", \"1000x1000\")\n : DEFAULT_COVER;\n }catch(e){\n newCover = DEFAULT_COVER;\n }\n }\n\n const temp = new Image();\n temp.onload = ()=>{\n coverImg.style.opacity = 0;\n coverImg.style.transform = \"scale(0.98)\";\n setTimeout(()=>{\n coverImg.src = newCover;\n coverImg.style.opacity = 1;\n coverImg.style.transform = \"scale(1)\";\n }, 130);\n };\n temp.onerror = ()=>{\n coverImg.src = DEFAULT_COVER;\n };\n temp.src = newCover;\n\n setBackground(newCover || DEFAULT_COVER);\n\n lyricsBox.innerHTML = `<div class=\"empty\">Buscando letra\u2026<\/div>`;\n const lyr = await getLyrics(title, artist);\n renderLyrics(lyr);\n }\n\n lastList.innerHTML = `\n <div class=\"last-item enter\">\n <img decoding=\"async\" src=\"${(capaMusica || coverImg.src || DEFAULT_COVER)}\" alt=\"capa\">\n <div class=\"last-meta\">\n <strong>${title}<\/strong>\n <span>${artist}<\/span>\n <\/div>\n <div class=\"last-time\">AO VIVO<\/div>\n <\/div>\n `;\n\n }catch(err){\n applyMarquee(songTitleEl, \"Ao vivo\");\n applyMarquee(artistEl, \"Gold Class\");\n coverImg.src = DEFAULT_COVER;\n setBackground(\"\");\n previewBox.style.display = \"none\";\n resetPreviewPlayer();\n lyricsBox.innerHTML = `<div class=\"empty\">N\u00e3o foi poss\u00edvel carregar letra agora.<\/div>`;\n lastList.innerHTML = `\n <div class=\"last-item\">\n <div class=\"last-meta\">\n <strong>N\u00e3o foi poss\u00edvel carregar os metadados<\/strong>\n <span>Tente novamente em instantes<\/span>\n <\/div>\n <\/div>\n `;\n }\n }\n\n refresh();\n setInterval(refresh, 20000);\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\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>Gold Class \u2014 Player Profissional Carregando m\u00fasica… Carregando artista… Preview (iTunes) \u2014 0:00 0:30 Letra Buscando letra\u2026 \u00daltima m\u00fasica detectada atualiza automaticamente Carregando m\u00fasica\u2026 aguarde Gold Class \u2014 M\u00fasica de Classe GL TEC Tecnologia & Comunica\u00e7\u00e3o Site e Player desenvolvido por Gabriel L Garcia glaudiotecnology.com.br<\/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-167","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":13,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/media?parent=167"}],"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\nGold Class \u2014 Player Profissional<\/title>\n\n<style>\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:root{\n --bg:#0b0f16;\n --ink:#fff;\n --muted:#cbd5e1;\n --line:rgba(255,255,255,.10);\n --card:rgba(255,255,255,.06);\n --shadow:0 18px 48px rgba(0,0,0,.35);\n --radius:20px;\n --pad:24px;\n --gold:#d4af37;\n --gold2:#ffdf6b;\n}\n\n*{box-sizing:border-box}\nhtml,body{margin:0;height:100%}\nbody{\n color:var(--ink);\n background:var(--bg);\n font-family:\"SF Pro Display\",-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Arial,sans-serif;\n min-height:100vh;\n}\n\n\/* ===== BG blur animado ===== *\/\n.bg-stack{position:fixed; inset:0; z-index:0; overflow:hidden}\n.bg-layer{\n position:absolute; inset:0;\n background-position:center; background-size:cover;\n filter:blur(60px) saturate(140%);\n transform:scale(1.25);\n opacity:0;\n transition:opacity .8s ease;\n}\n.bg-layer.show{opacity:.55}\n.bg-overlay{\n position:fixed; inset:0; z-index:1;\n background:linear-gradient(180deg, rgba(5,8,20,.82) 0%, rgba(5,8,20,.65) 40%, rgba(5,8,20,.88) 100%);\n}\n\n\/* ===== Layout ===== *\/\n.wrapper{\n position:relative; z-index:2;\n width:100%; max-width:1100px; margin:0 auto;\n padding:var(--pad);\n display:grid; gap:24px;\n}\n@media (min-width:900px){\n .wrapper{grid-template-columns:minmax(320px,420px) 1fr}\n}\n\n\/* Pain\u00e9is *\/\n.panel{\n background:var(--card);\n border:1px solid var(--line);\n border-radius:var(--radius);\n box-shadow:var(--shadow);\n backdrop-filter:blur(12px);\n}\n\n\/* ===== Topo ===== *\/\n.topbar{\n position:relative; z-index:2;\n max-width:1100px; margin:0 auto;\n padding:22px var(--pad) 0;\n display:flex; align-items:center; justify-content:center;\n}\n.topbar img{max-height:74px; width:auto; display:block}\n\n\/* ===== Player ===== *\/\n.card{padding:20px; display:flex; flex-direction:column; gap:14px}\n.cover{\n position:relative;\n width:100%;\n aspect-ratio:1\/1;\n border-radius:16px;\n overflow:hidden;\n background:#111;\n box-shadow:0 20px 55px rgba(0,0,0,.42);\n}\n.cover::after{\n content:\"\";\n position:absolute; inset:-2px;\n border-radius:18px;\n padding:2px;\n background:linear-gradient(120deg, rgba(212,175,55,.15), rgba(255,223,107,.15));\n pointer-events:none;\n}\n.cover img{\n width:100%; height:100%;\n object-fit:cover;\n display:block;\n transition:opacity .35s ease, transform .35s ease;\n}\n\n\/* Linha: Play + meta ao lado *\/\n.nowplaying{display:flex; align-items:center; gap:14px; padding-top:2px}\n.play-btn{\n width:72px; height:72px; border:none; border-radius:50%;\n background:transparent !important; color:#fff;\n display:grid; place-items:center; cursor:pointer;\n -webkit-tap-highlight-color:transparent;\n}\n.play-btn:hover{filter:drop-shadow(0 0 18px rgba(212,175,55,.25))}\n.play-btn .icon{\n width:42px; height:42px;\n display:inline-block; background:currentColor;\n -webkit-mask-size:contain; mask-size:contain;\n -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;\n -webkit-mask-position:center; mask-position:center;\n}\n.i-play{\n -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>\");\n 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}\n.i-pause{\n -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>\");\n 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}\n.hide{display:none !important}\n\n.meta{min-width:0; display:flex; flex-direction:column; gap:2px}\n.title{\n font-weight:900;\n font-size:22px;\n line-height:1.15;\n letter-spacing:.2px;\n min-width:0;\n color:var(--gold2);\n text-shadow:0 2px 18px rgba(212,175,55,.18);\n}\n.sub{color:var(--muted); font-size:14px; min-width:0}\n\n\/* Marquee *\/\n.marquee{position:relative; display:block; overflow:hidden; white-space:nowrap; max-width:100%}\n.marquee .track{display:inline-block; padding-right:48px; animation:marq 12s linear infinite}\n@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}\n\n\/* ===== Letra ===== *\/\n.lyrics{padding:16px; display:flex; flex-direction:column; overflow:hidden}\n.lyrics .heading{font-weight:900; opacity:.92; margin-bottom:8px; color:var(--gold2)}\n.lyrics .content{white-space:pre-wrap; color:#e5e7eb; line-height:1.55; flex:1 1 auto; min-height:0; overflow:auto}\n.lyrics .empty{opacity:.65; font-style:italic}\n\n\/* Alturas iguais *\/\n@media (min-width:900px){\n .equalize{\n height:min(860px, calc(100svh - (var(--pad)*2) - 110px));\n height:min(860px, calc(100vh - (var(--pad)*2) - 110px));\n min-height:560px;\n }\n .card{height:100%}\n .cover{flex:1 1 auto; min-height:0}\n}\n\n\/* ===== \u00daltimas tocadas ===== *\/\n.last-played{\n position:relative; z-index:2;\n width:100%; max-width:1100px; margin:0 auto 18px;\n padding:0 var(--pad);\n}\n.last-panel{padding:16px}\n.last-title{\n font-weight:900;\n margin:0 0 12px;\n color:var(--gold2);\n display:flex; align-items:center; gap:10px;\n}\n.badge-live{\n font-size:12px;\n padding:4px 10px;\n border-radius:999px;\n border:1px solid rgba(255,223,107,.35);\n background:rgba(212,175,55,.10);\n color:var(--gold2);\n}\n\n.last-scroll{\n max-height:260px;\n overflow:auto;\n display:flex;\n flex-direction:column;\n gap:10px;\n padding-right:6px;\n}\n\n@media (max-width:700px){\n .last-scroll{\n max-height:none;\n overflow-x:auto;\n overflow-y:hidden;\n flex-direction:row;\n gap:12px;\n padding-bottom:8px;\n scroll-snap-type:x mandatory;\n }\n .last-item{min-width:280px; scroll-snap-align:start;}\n}\n\n.last-item{\n display:flex;\n gap:12px;\n align-items:center;\n padding:10px;\n border-radius:14px;\n background:rgba(255,255,255,.04);\n border:1px solid var(--line);\n transition:transform .25s ease, border-color .25s ease, background .25s ease;\n}\n.last-item:hover{\n transform:translateY(-2px);\n border-color:rgba(255,223,107,.35);\n background:rgba(255,255,255,.06);\n}\n.last-item.enter{\n animation:pop .45s ease;\n}\n@keyframes pop{\n 0%{transform:translateY(6px); opacity:.0}\n 100%{transform:translateY(0); opacity:1}\n}\n\n.last-item img{\n width:56px; height:56px;\n border-radius:10px;\n object-fit:cover;\n flex-shrink:0;\n border:1px solid rgba(255,255,255,.10);\n}\n\n.last-meta{min-width:0; flex:1}\n.last-meta strong{\n display:block;\n font-size:15px;\n white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n}\n.last-meta span{\n display:block;\n font-size:13px;\n color:var(--muted);\n white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n}\n\n.last-time{\n font-size:12px;\n color:rgba(255,255,255,.75);\n padding-left:10px;\n border-left:1px solid rgba(255,255,255,.10);\n white-space:nowrap;\n}\n\n\/* ===== Preview custom ===== *\/\n.preview-wrap{\n margin-top:10px;\n padding:12px;\n border-radius:14px;\n border:1px solid rgba(255,255,255,.10);\n background:rgba(255,255,255,.04);\n display:flex;\n flex-direction:column;\n gap:10px;\n}\n\n.preview-head{\n min-width:0;\n}\n\n.preview-wrap .label{\n font-size:12px;\n color:rgba(255,255,255,.72);\n margin-bottom:4px;\n}\n\n.preview-wrap .mini-title{\n font-weight:800;\n color:var(--gold2);\n font-size:13px;\n line-height:1.35;\n display:-webkit-box;\n -webkit-line-clamp:2;\n -webkit-box-orient:vertical;\n overflow:hidden;\n}\n\n.mini-player{\n display:flex;\n align-items:center;\n gap:12px;\n}\n\n.mini-play-btn{\n width:44px;\n height:44px;\n border:none;\n border-radius:50%;\n background:linear-gradient(135deg, rgba(212,175,55,.22), rgba(255,223,107,.10));\n border:1px solid rgba(255,223,107,.20);\n color:var(--gold2);\n display:grid;\n place-items:center;\n cursor:pointer;\n flex-shrink:0;\n transition:transform .2s ease, filter .2s ease, border-color .2s ease;\n}\n.mini-play-btn:hover{\n transform:translateY(-1px);\n filter:brightness(1.05);\n border-color:rgba(255,223,107,.40);\n}\n.mini-play-btn .icon{\n width:20px;\n height:20px;\n}\n\n.mini-progress-wrap{\n min-width:0;\n flex:1;\n display:flex;\n flex-direction:column;\n gap:6px;\n}\n\n.mini-seek{\n width:100%;\n appearance:none;\n height:4px;\n border-radius:999px;\n background:rgba(255,255,255,.16);\n outline:none;\n cursor:pointer;\n}\n.mini-seek::-webkit-slider-thumb{\n appearance:none;\n width:12px;\n height:12px;\n border-radius:50%;\n background:var(--gold2);\n border:none;\n}\n.mini-seek::-moz-range-thumb{\n width:12px;\n height:12px;\n border-radius:50%;\n background:var(--gold2);\n border:none;\n}\n\n.mini-time{\n display:flex;\n justify-content:space-between;\n gap:8px;\n font-size:11px;\n color:rgba(255,255,255,.68);\n}\n\n#previewAudio{\n display:none;\n}\n\n\/* ===== Rodap\u00e9 ===== *\/\nfooter{\n position:relative; z-index:2;\n max-width:1100px;\n margin:12px auto 26px;\n padding:16px var(--pad);\n background:rgba(255,255,255,.08);\n border:1px solid var(--line);\n border-radius:16px;\n backdrop-filter:blur(12px);\n text-align:center;\n color:#f7f9ff;\n text-shadow:0 1px 2px rgba(0,0,0,.55);\n line-height:1.6;\n}\nfooter strong{color:#fff}\nsmall.credit{display:block; opacity:.95}\na.clean{color:#fff; text-decoration:none}\na.clean:hover{text-decoration:underline}\n<\/style>\n<\/head>\n\n<body>\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=\"bg-overlay\" aria-hidden=\"true\"><\/div>\n\n<header class=\"topbar\">\n <img decoding=\"async\" src=\"https:\/\/glaudiotecnology.com.br\/radio\/wp-content\/uploads\/2025\/12\/gold-ultra-topo.png\" alt=\"Gold Class\">\n<\/header>\n\n<section class=\"wrapper\">\n <div class=\"panel equalize\">\n <div class=\"card\">\n <div class=\"cover\">\n <img decoding=\"async\" id=\"album-cover\" alt=\"Capa \/ Logo\" src=\"https:\/\/glaudiotecnology.com.br\/radio\/wp-content\/uploads\/2025\/12\/Cradio-gold.png\">\n <\/div>\n\n <div class=\"nowplaying\">\n <button id=\"togglePlay\" class=\"play-btn\" aria-label=\"Tocar \/ Pausar\">\n <span id=\"icoPlay\" class=\"icon i-play\"><\/span>\n <span id=\"icoPause\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n\n <div class=\"meta\">\n <div id=\"song-title\" class=\"title\">Carregando m\u00fasica...<\/div>\n <div id=\"artist-name\" class=\"sub\">Carregando artista...<\/div>\n <\/div>\n <\/div>\n\n <div id=\"previewBox\" class=\"preview-wrap\" style=\"display:none;\">\n <div class=\"preview-head\">\n <div class=\"label\">Preview (iTunes)<\/div>\n <div id=\"previewTitle\" class=\"mini-title\">\u2014<\/div>\n <\/div>\n\n <div class=\"mini-player\">\n <button id=\"previewToggle\" class=\"mini-play-btn\" aria-label=\"Tocar preview\">\n <span id=\"previewIcoPlay\" class=\"icon i-play\"><\/span>\n <span id=\"previewIcoPause\" class=\"icon i-pause hide\"><\/span>\n <\/button>\n\n <div class=\"mini-progress-wrap\">\n <input id=\"previewSeek\" class=\"mini-seek\" type=\"range\" min=\"0\" max=\"30\" value=\"0\" step=\"0.1\">\n <div class=\"mini-time\">\n <span id=\"previewCurrent\">0:00<\/span>\n <span id=\"previewDuration\">0:30<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <audio id=\"previewAudio\" preload=\"none\"><\/audio>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"panel lyrics equalize\">\n <div class=\"heading\">Letra<\/div>\n <div id=\"lyricsBox\" class=\"content\"><div class=\"empty\">Buscando letra\u2026<\/div><\/div>\n <\/div>\n<\/section>\n\n<section class=\"last-played\">\n <div class=\"panel last-panel\">\n <div class=\"last-title\">\n \u00daltima m\u00fasica detectada\n <span class=\"badge-live\">atualiza automaticamente<\/span>\n <\/div>\n <div id=\"lastPlayedList\" class=\"last-scroll\">\n <div class=\"last-item\">\n <div class=\"last-meta\">\n <strong>Carregando m\u00fasica\u2026<\/strong>\n <span>aguarde<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<footer>\n <div style=\"margin-bottom:8px; font-size:22px; font-weight:900; color:var(--gold2);\">\n <a class=\"clean\" href=\"https:\/\/glaudiotecnology.com.br\" target=\"_blank\" rel=\"noopener noreferrer\">Gold Class \u2014 M\u00fasica de Classe<\/a>\n <\/div>\n <strong>GL TEC Tecnologia & Comunica\u00e7\u00e3o<\/strong><br>\n <small class=\"credit\">Site e Player desenvolvido por <strong>Gabriel L Garcia<\/strong><\/small>\n <a class=\"clean\" href=\"https:\/\/glaudiotecnology.com.br\" target=\"_blank\" rel=\"noopener noreferrer\">glaudiotecnology.com.br<\/a>\n<\/footer>\n\n<audio id=\"audio\" preload=\"none\" crossorigin=\"anonymous\">\n <source src=\"https:\/\/glaudiotecnology.srv.br\/listen\/r%C3%A1dio_f%C3%A1cil\/radio.mp3\" type=\"audio\/mpeg\" \/>\n<\/audio>\n\n<script>\n(function(){\n \/\/ ===== URLs =====\n const METADATA_URL = \"https:\/\/glaudiotecnology.uk\/api\/TnpBNE9BPT0rWg==\";\n const STREAM_URL = \"https:\/\/glaudiotecnology.srv.br\/listen\/r%C3%A1dio_f%C3%A1cil\/radio.mp3\";\n\n \/\/ ===== Elementos =====\n const audio = document.getElementById(\"audio\");\n const coverImg = document.getElementById(\"album-cover\");\n const songTitleEl = document.getElementById(\"song-title\");\n const artistEl = document.getElementById(\"artist-name\");\n const playBtn = document.getElementById(\"togglePlay\");\n const icoPlay = document.getElementById(\"icoPlay\");\n const icoPause = document.getElementById(\"icoPause\");\n const lyricsBox = document.getElementById(\"lyricsBox\");\n const lastList = document.getElementById(\"lastPlayedList\");\n\n const previewBox = document.getElementById(\"previewBox\");\n const previewAudio = document.getElementById(\"previewAudio\");\n const previewTitle = document.getElementById(\"previewTitle\");\n const previewToggle = document.getElementById(\"previewToggle\");\n const previewIcoPlay = document.getElementById(\"previewIcoPlay\");\n const previewIcoPause = document.getElementById(\"previewIcoPause\");\n const previewSeek = document.getElementById(\"previewSeek\");\n const previewCurrent = document.getElementById(\"previewCurrent\");\n const previewDuration = document.getElementById(\"previewDuration\");\n\n const bgA = document.getElementById(\"bgA\");\n const bgB = document.getElementById(\"bgB\");\n let bgToggle = false;\n\n \/\/ ===== Config =====\n const DEFAULT_COVER = \"https:\/\/glaudiotecnology.com.br\/radio\/wp-content\/uploads\/2025\/12\/Cradio-gold.png\";\n\n \/\/ ===== Play\/Pause principal =====\n let armed = false;\n function arm(){\n if(!armed){\n audio.src = STREAM_URL;\n audio.load();\n armed = true;\n }\n }\n\n function setPlayingUI(isPlaying){\n icoPlay.classList.toggle(\"hide\", isPlaying);\n icoPause.classList.toggle(\"hide\", !isPlaying);\n }\n\n async function toggle(){\n arm();\n if(audio.paused){\n try{\n await audio.play();\n setPlayingUI(true);\n }catch(e){}\n }else{\n audio.pause();\n setPlayingUI(false);\n }\n }\n\n playBtn.addEventListener(\"click\", toggle);\n audio.addEventListener(\"play\", ()=>setPlayingUI(true));\n audio.addEventListener(\"pause\", ()=>setPlayingUI(false));\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 || \"\")\n .replace(\/&\/g,\"&\")\n .replace(\/<\/g,\"<\")\n .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 \/\/ ===== Background blur =====\n function setBackground(url){\n const next = (bgToggle ? bgA : bgB);\n const prev = (bgToggle ? bgB : bgA);\n bgToggle = !bgToggle;\n\n if(url){\n next.style.backgroundImage = `url('${url}')`;\n void next.offsetWidth;\n next.classList.add(\"show\");\n prev.classList.remove(\"show\");\n }else{\n next.style.backgroundImage = \"\";\n next.classList.remove(\"show\");\n prev.classList.remove(\"show\");\n }\n }\n\n \/\/ ===== iTunes =====\n async function itunesSearch(artist, title){\n const q = encodeURIComponent(`${artist} ${title}`.trim());\n const url = `https:\/\/itunes.apple.com\/search?term=${q}&entity=song&limit=1`;\n const r = await fetch(url, { cache:\"no-store\" });\n const j = await r.json();\n return j?.results?.[0] || null;\n }\n\n async function previewFromITunes(artist, title){\n try{\n const item = await itunesSearch(artist, title);\n return item?.previewUrl || \"\";\n }catch(e){}\n return \"\";\n }\n\n \/\/ ===== Letras =====\n function stripLRC(lrc){\n return lrc\n .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\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\");\n const j = await r.json();\n const raw = j?.plainLyrics || (j?.syncedLyrics ? stripLRC(j.syncedLyrics) : \"\");\n return (raw || \"\").trim();\n }\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\");\n const j = await r.json();\n return (j?.lyrics || \"\").trim();\n }\n\n async function getLyrics(title, artist){\n try{\n const t = await fetchLyricsLRCLIB(title, artist);\n if(t) return t;\n }catch(e){}\n try{\n const t = await fetchLyricsOVH(title, artist);\n if(t) return t;\n }catch(e){}\n return \"\";\n }\n\n function renderLyrics(text){\n lyricsBox.innerHTML = text\n ? text.replace(\/\\n\/g, \"<br>\")\n : `<div class=\"empty\">Letra n\u00e3o encontrada.<\/div>`;\n }\n\n \/\/ ===== XML helpers =====\n function getXmlValue(xmlDoc, tag){\n return xmlDoc.querySelector(tag)?.textContent?.trim() || \"\";\n }\n\n function parseArtistTitle(text){\n const raw = (text || \"\").trim();\n\n if(!raw){\n return { artist: \"Gold Class\", title: \"Ao vivo\" };\n }\n\n const parts = raw.split(\" - \");\n if(parts.length >= 2){\n return {\n artist: parts.shift().trim() || \"Gold Class\",\n title: parts.join(\" - \").trim() || \"Ao vivo\"\n };\n }\n\n return {\n artist: \"Gold Class\",\n title: raw\n };\n }\n\n \/\/ ===== Preview custom =====\n function setPreviewPlayingUI(isPlaying){\n previewIcoPlay.classList.toggle(\"hide\", isPlaying);\n previewIcoPause.classList.toggle(\"hide\", !isPlaying);\n }\n\n function formatPreviewTime(sec){\n const s = Math.floor(sec || 0);\n const m = Math.floor(s \/ 60);\n const r = s % 60;\n return `${m}:${String(r).padStart(2, \"0\")}`;\n }\n\n function resetPreviewPlayer(){\n previewAudio.pause();\n previewAudio.removeAttribute(\"src\");\n previewAudio.load();\n previewSeek.value = 0;\n previewSeek.max = 30;\n previewCurrent.textContent = \"0:00\";\n previewDuration.textContent = \"0:30\";\n setPreviewPlayingUI(false);\n }\n\n previewToggle.addEventListener(\"click\", async ()=>{\n if(!previewAudio.src) return;\n\n if(previewAudio.paused){\n try{\n await previewAudio.play();\n setPreviewPlayingUI(true);\n }catch(e){}\n }else{\n previewAudio.pause();\n setPreviewPlayingUI(false);\n }\n });\n\n previewAudio.addEventListener(\"loadedmetadata\", ()=>{\n const dur = isFinite(previewAudio.duration) && previewAudio.duration > 0 ? previewAudio.duration : 30;\n previewSeek.max = dur;\n previewDuration.textContent = formatPreviewTime(dur);\n });\n\n previewAudio.addEventListener(\"timeupdate\", ()=>{\n previewSeek.value = previewAudio.currentTime || 0;\n previewCurrent.textContent = formatPreviewTime(previewAudio.currentTime || 0);\n });\n\n previewAudio.addEventListener(\"ended\", ()=>{\n previewSeek.value = 0;\n previewCurrent.textContent = \"0:00\";\n setPreviewPlayingUI(false);\n });\n\n previewAudio.addEventListener(\"pause\", ()=>{\n setPreviewPlayingUI(false);\n });\n\n previewAudio.addEventListener(\"play\", ()=>{\n setPreviewPlayingUI(true);\n });\n\n previewSeek.addEventListener(\"input\", ()=>{\n if(previewAudio.src){\n previewAudio.currentTime = Number(previewSeek.value || 0);\n }\n });\n\n \/\/ ===== Estado =====\n let lastNowKey = \"\";\n\n \/\/ ===== Atualiza\u00e7\u00e3o principal =====\n async function refresh(){\n try{\n const res = await fetch(METADATA_URL, { cache:\"no-store\" });\n const xmlText = await res.text();\n\n const parser = new DOMParser();\n const xmlDoc = parser.parseFromString(xmlText, \"text\/xml\");\n\n const musicaAtual = getXmlValue(xmlDoc, \"musica_atual\");\n const capaMusica = getXmlValue(xmlDoc, \"capa_musica\");\n const tituloRadio = getXmlValue(xmlDoc, \"titulo\") || \"Gold Class\";\n\n const parsed = parseArtistTitle(musicaAtual);\n const artist = parsed.artist || tituloRadio;\n const title = parsed.title || \"Ao vivo\";\n const nowKey = `${artist} - ${title}`;\n\n if(nowKey !== lastNowKey){\n lastNowKey = nowKey;\n\n applyMarquee(songTitleEl, title);\n applyMarquee(artistEl, artist);\n\n previewBox.style.display = \"none\";\n resetPreviewPlayer();\n\n let previewUrl = \"\";\n try{\n previewUrl = await previewFromITunes(artist, title);\n }catch(e){}\n\n if(previewUrl){\n previewTitle.textContent = `${artist} \u2014 ${title}`;\n previewAudio.src = previewUrl;\n previewBox.style.display = \"flex\";\n }\n\n let newCover = capaMusica || \"\";\n if(!newCover){\n try{\n const item = await itunesSearch(artist, title);\n const art100 = item?.artworkUrl100;\n newCover = art100\n ? art100.replace(\/100x100bb\\.jpg\/, \"1000x1000bb.jpg\").replace(\"100x100\", \"1000x1000\")\n : DEFAULT_COVER;\n }catch(e){\n newCover = DEFAULT_COVER;\n }\n }\n\n const temp = new Image();\n temp.onload = ()=>{\n coverImg.style.opacity = 0;\n coverImg.style.transform = \"scale(0.98)\";\n setTimeout(()=>{\n coverImg.src = newCover;\n coverImg.style.opacity = 1;\n coverImg.style.transform = \"scale(1)\";\n }, 130);\n };\n temp.onerror = ()=>{\n coverImg.src = DEFAULT_COVER;\n };\n temp.src = newCover;\n\n setBackground(newCover || DEFAULT_COVER);\n\n lyricsBox.innerHTML = `<div class=\"empty\">Buscando letra\u2026<\/div>`;\n const lyr = await getLyrics(title, artist);\n renderLyrics(lyr);\n }\n\n lastList.innerHTML = `\n <div class=\"last-item enter\">\n <img decoding=\"async\" src=\"${(capaMusica || coverImg.src || DEFAULT_COVER)}\" alt=\"capa\">\n <div class=\"last-meta\">\n <strong>${title}<\/strong>\n <span>${artist}<\/span>\n <\/div>\n <div class=\"last-time\">AO VIVO<\/div>\n <\/div>\n `;\n\n }catch(err){\n applyMarquee(songTitleEl, \"Ao vivo\");\n applyMarquee(artistEl, \"Gold Class\");\n coverImg.src = DEFAULT_COVER;\n setBackground(\"\");\n previewBox.style.display = \"none\";\n resetPreviewPlayer();\n lyricsBox.innerHTML = `<div class=\"empty\">N\u00e3o foi poss\u00edvel carregar letra agora.<\/div>`;\n lastList.innerHTML = `\n <div class=\"last-item\">\n <div class=\"last-meta\">\n <strong>N\u00e3o foi poss\u00edvel carregar os metadados<\/strong>\n <span>Tente novamente em instantes<\/span>\n <\/div>\n <\/div>\n `;\n }\n }\n\n refresh();\n setInterval(refresh, 20000);\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\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>Gold Class \u2014 Player Profissional Carregando m\u00fasica… Carregando artista… Preview (iTunes) \u2014 0:00 0:30 Letra Buscando letra\u2026 \u00daltima m\u00fasica detectada atualiza automaticamente Carregando m\u00fasica\u2026 aguarde Gold Class \u2014 M\u00fasica de Classe GL TEC Tecnologia & Comunica\u00e7\u00e3o Site e Player desenvolvido por Gabriel L Garcia glaudiotecnology.com.br<\/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-167","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":13,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/glaudiotecnology.com.br\/radio\/index.php\/wp-json\/wp\/v2\/media?parent=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}