\u03a7\u03a1\u03a9\u039c\u0391 FM Player<\/title>\n <style>\n\/* Global *\/\nhtml, body {\n margin: 0; padding: 0;\n width: 100%; height: 100%;\n background: #000;\n overflow: hidden;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n#background-art {\n position: fixed; inset: 0;\n width: 100%; height: 100%;\n background: #0a0f1f center\/cover no-repeat;\n filter: blur(20px) brightness(0.5);\n z-index: -1;\n}\n\n\/* Layout using grid *\/\n.layout {\n display: grid;\n grid-template-columns: 280px 1fr;\n grid-template-rows: auto 1fr 100px; \/* header, content, player *\/\n height: 100vh;\n}\n\n\/* Station Header *\/\n.station-header {\n position: fixed; \/* stick to top-left *\/\n top: 15px;\n left: 0;\n width: 280px; \/* same width as history *\/\n height: 50px; \/* adjust if needed *\/\n margin: 0;\n padding: 10px 0;\n text-align: center;\n font-size: 28px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 3px;\n background: linear-gradient(90deg,#ff7a18,#af002d,#319197);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-size: 200% auto;\n animation: shine 5s linear infinite;\n z-index: 11;\n}\n\n@keyframes shine {\n from { background-position: 0% 50%; }\n to { background-position: 200% 50%; }\n}\n\n\/* History Sidebar *\/\n.history {\n position: fixed; \/* fixed so it doesn\u2019t scroll with content *\/\n top: 70px; \/* height of the station header *\/\n left: 0;\n width: 280px;\n bottom: 0; \/* stretch to bottom *\/\n display: flex;\n flex-direction: column;\n background: linear-gradient(90deg, #5C0B1A, #731022);\n z-index: 10;\n}\n\n.logo-top {\n text-align: center; \n padding: 10px 0; \n}\n.logo-top img {\n width: 100px; height: 100px;\n border-radius: 50%;\n border: 3px solid #fff;\n box-shadow: 0 0 20px rgba(255,255,255,0.6);\n}\n\n.history h3 {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: center;\n background: linear-gradient(90deg, #b0b0b0, #c0c0c0, #b0b0b0);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n font-weight: 900;\n letter-spacing: 2px;\n}\n\n#historyList {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px 12px;\n}\n\n.song-item {\n display: flex;\n gap: 10px;\n align-items: center;\n margin: 6px 0;\n}\n.song-item img {\n width: 40px; height: 40px;\n border-radius: 6px;\n object-fit: cover;\n}\n.song-title { font-weight: bold; font-size: 14px; color: #fff; }\n.song-artist { font-size: 13px; color: #b0c4de; }\n\n\/* Center content *\/\n.center {\n position: absolute; \/* position relative to viewport *\/\n top: 40%; \/* center vertically *\/\n left: 55%; \/* center horizontally *\/\n transform: translate(-50%, -50%); \/* shift by half its own width\/height *\/\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 5; \/* below header and player if needed *\/\n}\n\n.next-wrap { text-align: center; perspective: 1000px; }\n.eyebrow {\n font-size: 18px; font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #ffd369;\n margin-bottom: 14px;\n text-shadow: 0 0 6px rgba(0,0,0,0.6),\n 0 0 12px rgba(255,211,105,0.7);\n}\n\n.card {\n width: 280px; height: 340px;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.5s;\n animation: peek60 60s linear infinite;\n}\n\n@keyframes peek60 {\n 0% { transform: rotateY(0deg); }\n 0.833% { transform: rotateY(180deg); }\n 5.833% { transform: rotateY(180deg); }\n 6.667% { transform: rotateY(0deg); }\n 100% { transform: rotateY(0deg); }\n}\n\n.card.flip { transform: rotateY(180deg); }\n\n.front, .back {\n position: absolute; inset: 0;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n width: 100%; height: 100%;\n backface-visibility: hidden;\n background: rgba(20,20,20,0.7);\n border-radius: 12px;\n overflow: hidden;\n}\n.back { transform: rotateY(180deg); }\n\n.next-cover { width: 220px; height: 220px; margin-bottom: 15px; }\n.next-cover img {\n width: 100%; height: 100%;\n object-fit: cover;\n border-radius: 12px;\n}\n.next-title { font-size: 20px; font-weight: bold; margin-top: 5px; color: #fff; }\n.next-artist { font-size: 14px; color: #b0c4de; }\n\n\/* Player *\/\n.player {\n position: fixed;\n bottom: 0;\n left: 280px; \/* aligns to right edge of history *\/\n width: calc(100% - 280px); \/* fills remaining width *\/\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px;\n background: linear-gradient(90deg, #0a0a0a, #1a1a1a, #2a2a2a);\n color: #fff;\n backdrop-filter: blur(10px);\n z-index: 9;\n}\n\n.play {\n width: 60px; height: 60px;\n border-radius: 50%; border: none;\n background: linear-gradient(135deg, #5C0B1A, #731022);\n cursor: pointer;\n box-shadow: 0 0 15px rgba(115,16,34,0.7);\n}\n\n.now {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n}\n.now-logo img {\n width: 60px; height: 60px;\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 0 10px rgba(0,0,0,0.5);\n animation: spin 5s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.now-text { text-align: left; }\n.now small {\n font-size: 12px;\n color: #ffd369;\n display: block;\n}\n.title { font-weight: bold; font-size: 18px; color: #fff; }\n.artist { font-size: 15px; color: #4facfe; }\n\n.controls { display: flex; align-items: center; gap: 10px; }\n.mutebtn {\n width: 42px; height: 42px;\n border-radius: 8px; border: none;\n background: #444; color: #fff;\n cursor: pointer;\n}\n.vol input { width: 120px; }\n\n.live-badge {\n background: red; color: #fff;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n margin-left: 5px;\n}\n\n\/* Song Banner *\/\n.song-banner {\n position: fixed;\n bottom: 120px; left: 50%;\n transform: translateX(-50%) translateY(100%);\n width: 80%; max-width: 600px;\n padding: 20px;\n background: rgba(15,32,39,0.95);\n color: #fff;\n border-radius: 12px;\n font-size: 15px; font-weight: 600;\n line-height: 1.5; text-align: left;\n opacity: 0;\n transition: opacity 0.7s ease, transform 0.7s ease;\n z-index: 9998;\n box-shadow: 0 6px 16px rgba(0,0,0,0.5);\n display: flex; flex-direction: column; gap: 10px;\n}\n.song-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n.song-banner-header {\n display: flex; align-items: center; gap: 8px;\n font-size: 16px; font-weight: bold;\n}\n.song-banner-header .icon { color: #ffd369; font-size: 18px; }\n\n.song-banner-links {\n display: flex; flex-direction: column; gap: 6px;\n margin-top: 10px;\n}\n.song-banner-links a {\n display: inline-block;\n padding: 6px 12px;\n font-size: 13px; font-weight: bold;\n color: #ffd369;\n background: rgba(255,255,255,0.1);\n border-radius: 6px;\n text-decoration: none;\n}\n.song-banner-links a:hover { background: rgba(255,255,255,0.2); }\n\n.song-banner-close {\n position: absolute; top: 8px; right: 12px;\n font-size: 18px; font-weight: bold;\n background: transparent; border: none;\n color: #fff; cursor: pointer;\n}\n.song-banner-close:hover { color: #ffd369; }\n\n\/* Volume Slider *\/\n.vol input[type=\"range\"] {\n -webkit-appearance: none;\n width: 120px; height: 6px;\n background: #731022; border-radius: 3px; outline: none;\n}\n.vol input[type=\"range\"]::-moz-range-track { background: #731022; border-radius: 3px; }\n.vol input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px; height: 16px;\n background: #ff5151; border-radius: 50%;\n cursor: pointer; border: none;\n box-shadow: 0 0 6px rgba(255,81,81,0.7);\n margin-top: -1px;\n}\n.vol input[type=\"range\"]::-moz-range-thumb {\n width: 16px; height: 16px;\n background: #ff5151; border-radius: 50%;\n cursor: pointer; border: none;\n box-shadow: 0 0 6px rgba(255,81,81,0.7);\n}\n\n#iconVol { transform: translateY(4px); }\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n body { overflow: auto; }\n\n .layout {\n grid-template-columns: 1fr;\n grid-template-rows: auto auto 1fr; \/* header, player, content *\/\n }\n\n .station-header, .history, .center {\n grid-column: 1 \/ 2;\n grid-row: auto;\n }\n\n .player {\n left: 0;\n width: 100%;\n flex-direction: column;\n height: auto;\n padding: 10px;\n gap: 10px;\n }\n\n .center { margin: 20px 0; }\n .card { width: 200px; height: 260px; }\n .next-cover { width: 160px; height: 160px; }\n\n .now { flex-direction: column; gap: 8px; }\n .controls { width: 100%; justify-content: center; }\n .vol input { width: 100px; }\n\n .song-banner {\n width: 90%; max-width: 90%;\n font-size: 13px;\n bottom: 130px;\n }\n\n .station-header { font-size: 22px; }\n .eyebrow { font-size: 14px; }\n .next-title { font-size: 16px; }\n .next-artist, .song-artist { font-size: 13px; }\n .title { font-size: 16px; }\n .artist { font-size: 13px; }\n .song-title { font-size: 13px; }\n .song-banner-header { font-size: 14px; }\n}\n\n@media (max-width: 768px) {\n \/* Prevent scrolling on mobile *\/\n body {\n overflow: hidden;\n }\n\n \/* Hide the history sidebar *\/\n .history {\n display: none;\n }\n\n \/* Center the station header *\/\n .station-header {\n left: 50%;\n transform: translateX(-50%);\n width: auto;\n text-align: center;\n }\n\n \/* Layout adjustments *\/\n .layout {\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr 100px; \/* header, content, player *\/\n }\n\n .center {\n top: 25%; \/* adjust vertical centering for mobile *\/\n left: 50%;\n transform: translate(-50%, -50%);\n margin: 0;\n }\n\n \/* Player adjustments for mobile *\/\n .player {\n left: 0;\n width: 100%;\n flex-direction: column;\n height: auto;\n padding: 10px;\n gap: 10px;\n }\n\n \/* Card sizing for mobile *\/\n .card {\n width: 200px;\n height: 260px;\n }\n\n .next-cover {\n width: 160px;\n height: 160px;\n }\n\n \/* Now playing section *\/\n .now {\n flex-direction: column;\n gap: 8px;\n }\n\n .controls {\n width: 100%;\n justify-content: center;\n }\n\n .vol input {\n width: 100px;\n }\n\n \/* Song banner adjustments *\/\n .song-banner {\n width: 90%;\n max-width: 90%;\n font-size: 13px;\n bottom: 130px;\n }\n\n \/* Font adjustments *\/\n .station-header { font-size: 22px; }\n .eyebrow { font-size: 14px; }\n .next-title { font-size: 16px; }\n .next-artist, .song-artist { font-size: 13px; }\n .title { font-size: 16px; }\n .artist { font-size: 13px; }\n .song-title { font-size: 13px; }\n .song-banner-header { font-size: 14px; }\n}\n\n\n<\/style>\n <\/head>\n<body>\n\n <div id=\"background-art\"><\/div>\n\n <div class=\"layout\">\n <div class=\"station-header\">\u03a7\u03a1\u03a9\u039c\u0391 FM<\/div>\n\n <aside class=\"history\">\n <div class=\"logo-top\">\n <img decoding=\"async\" src=\"https:\/\/xromafm.com\/wp-content\/uploads\/2025\/09\/cropped-album_art.1757840215.jpg\" alt=\"FM Xroma Logo\">\n <\/div>\n <h3>\u0399\u03c3\u03c4\u03bf\u03c1\u03b9\u03ba\u03cc<\/h3>\n <div id=\"historyList\"><\/div>\n <\/aside>\n\n <main class=\"center\">\n <div class=\"next-wrap\">\n <div class=\"eyebrow\">\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf \u03a4\u03c1\u03b1\u03b3\u03bf\u03cd\u03b4\u03b9<\/div>\n <div class=\"card\" id=\"nextCard\">\n <div class=\"front\">\n <div class=\"next-cover\"><img decoding=\"async\" id=\"nextCoverFront\" src=\"\" alt=\"\"><\/div>\n <div class=\"next-title\" id=\"nextTitleFront\">\u2014<\/div>\n <div class=\"next-artist\" id=\"nextArtistFront\">\u2014<\/div>\n <\/div>\n <div class=\"back\">\n <div class=\"next-cover\"><img decoding=\"async\" id=\"nextCoverBack\" src=\"\" alt=\"\"><\/div>\n <div class=\"next-title\" id=\"nextTitleBack\">\u2014<\/div>\n <div class=\"next-artist\" id=\"nextArtistBack\">\u2014<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <footer class=\"player\">\n <button id=\"playBtn\" class=\"play\" aria-label=\"Play\/Pause\">\n <svg id=\"iconPlay\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <svg id=\"iconPause\" viewBox=\"0 0 24 24\" style=\"display:none\"><path d=\"M6 5h4v14H6zm8 0h4v14h-4z\"\/><\/svg>\n <\/button>\n <div class=\"now\">\n <div class=\"now-logo\">\n <a href=\"https:\/\/xromafm.com\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/xromafm.com\/wp-content\/uploads\/2025\/09\/cropped-album_art.1757840215.jpg\" alt=\"FM Xroma Logo\">\n <\/a>\n <\/div>\n <div class=\"now-text\">\n <small>\u03a0\u03b1\u03af\u03b6\u03b5\u03b9 \u03c4\u03ce\u03c1\u03b1 <span id=\"liveBadge\" class=\"live-badge\" style=\"display:none\">LIVE<\/span><\/small>\n <div class=\"title\" id=\"nowTitle\">\u2014<\/div>\n <div class=\"artist\" id=\"nowArtist\">\u2014<\/div>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <button id=\"muteBtn\" class=\"mutebtn\" aria-label=\"Mute\/Unmute\" style=\"background: none; border: none;\">\n \n <svg id=\"iconVol\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5C0B1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"38\" height=\"38\">\n \n <polygon points=\"3 9 7 9 12 4 12 20 7 15 3 15\"\/>\n \n <line x1=\"15\" y1=\"8\" x2=\"18\" y2=\"5\"\/>\n <line x1=\"15\" y1=\"12\" x2=\"20\" y2=\"12\"\/>\n <line x1=\"15\" y1=\"16\" x2=\"18\" y2=\"19\"\/>\n <\/svg>\n\n \n <svg id=\"iconMute\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5C0B1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"32\" height=\"32\" style=\"display:none\">\n \n <polygon points=\"3 9 7 9 12 4 12 20 7 15 3 15\"\/>\n \n <line x1=\"15\" y1=\"8\" x2=\"20\" y2=\"16\"\/>\n <line x1=\"20\" y1=\"8\" x2=\"15\" y2=\"16\"\/>\n <\/svg>\n <\/button>\n <div class=\"vol\">\n <input id=\"vol\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.9\" \/>\n <\/div>\n<\/div>\n <\/footer>\n <\/div>\n\n<audio id=\"audio\" preload=\"none\" crossorigin=\"anonymous\"\n src=\"https:\/\/azuralive.streams.ovh\/listen\/fmxroma\/radio.mp3\"><\/audio>\n\n<script>\nconst STREAM_URL = \"https:\/\/azuralive.streams.ovh\/listen\/fmxroma\/radio.mp3\";\nconst NP_URL = \"https:\/\/azuralive.streams.ovh\/api\/nowplaying\/fmxroma\";\n\nconst audio = document.getElementById('audio');\nconst playBtn = document.getElementById('playBtn');\nconst iconPlay = document.getElementById('iconPlay');\nconst iconPause = document.getElementById('iconPause');\nconst muteBtn = document.getElementById('muteBtn');\nconst iconVol = document.getElementById('iconVol');\nconst iconMute = document.getElementById('iconMute');\nconst vol = document.getElementById('vol');\n\nconst nowTitle = document.getElementById('nowTitle');\nconst nowArtist = document.getElementById('nowArtist');\nconst liveBadge = document.getElementById('liveBadge');\n\nconst nextCard = document.getElementById('nextCard');\nconst nextTitleFront = document.getElementById('nextTitleFront');\nconst nextArtistFront = document.getElementById('nextArtistFront');\nconst nextCoverFront = document.getElementById('nextCoverFront');\nconst nextTitleBack = document.getElementById('nextTitleBack');\nconst nextArtistBack = document.getElementById('nextArtistBack');\nconst nextCoverBack = document.getElementById('nextCoverBack');\n\nconst bgArt = document.getElementById('background-art');\nconst historyList = document.getElementById('historyList');\nconst songBanner = document.getElementById('songBanner');\n\nlet lastSong = \"\";\n\n\/\/ Player controls\nplayBtn.addEventListener('click', async () => {\n if (audio.paused) {\n try {\n if (audio.src !== STREAM_URL) audio.src = STREAM_URL;\n await audio.play();\n iconPlay.style.display='none'; iconPause.style.display='block';\n } catch(e){ console.warn('Autoplay blocked', e); }\n } else {\n audio.pause();\n iconPlay.style.display='block'; iconPause.style.display='none';\n }\n});\nvol.addEventListener('input', () => audio.volume = +vol.value);\nmuteBtn.addEventListener('click', () => {\n audio.muted = !audio.muted;\n iconVol.style.display = audio.muted ? 'none' : 'block';\n iconMute.style.display = audio.muted ? 'block' : 'none';\n});\n\n\/\/ Wikipedia fetch\nasync function fetchWikipediaInfo(query) {\n try {\n const url = `https:\/\/en.wikipedia.org\/api\/rest_v1\/page\/summary\/${encodeURIComponent(query)}`;\n const res = await fetch(url);\n if (!res.ok) return null;\n const data = await res.json();\n return {\n extract: data.extract ? data.extract : null,\n link: `https:\/\/en.wikipedia.org\/wiki\/${encodeURIComponent(query)}`\n };\n } catch(e) {\n console.warn(\"Wiki error:\", e);\n return null;\n }\n}\n\n\/\/ Banner\nasync function showBanner(artist, title) {\n let html = `\n <button class=\"song-banner-close\" onclick=\"hideBanner()\">\u00d7<\/button>\n <div class=\"song-banner-header\">\n <span class=\"icon\">\ud83d\udcd6<\/span> Now Playing: ${artist} - ${title}\n <\/div>\n `;\n\n const wikiData = await fetchWikipediaInfo(artist);\n if (wikiData?.extract) {\n html += `<div class=\"song-banner-text\">${wikiData.extract}<\/div>`;\n }\n\n const artistLink = `https:\/\/en.wikipedia.org\/wiki\/${encodeURIComponent(artist)}`;\n const songLink = `https:\/\/en.wikipedia.org\/wiki\/${encodeURIComponent(title)}_(song)`;\n\n html += `\n <div class=\"song-banner-links\">\n <a href=\"${artistLink}\" target=\"_blank\" rel=\"noopener noreferrer\">\ud83d\udcce Read more about ${artist}<\/a>\n <a href=\"${songLink}\" target=\"_blank\" rel=\"noopener noreferrer\">\ud83c\udfb5 Read more about \"${title}\"<\/a>\n <\/div>\n `;\n\n songBanner.innerHTML = html;\n songBanner.classList.add('show');\n\n setTimeout(() => {\n hideBanner();\n }, 20000);\n}\n\nfunction hideBanner() {\n songBanner.classList.remove('show');\n}\n\n\/\/ Flip update\nfunction updateNext(song) {\n nextTitleBack.textContent = song.title || '\u2014';\n nextArtistBack.textContent = song.artist || '\u2014';\n if (song.art) nextCoverBack.src = song.art;\n nextCard.classList.add('flip');\n setTimeout(() => {\n nextTitleFront.textContent = song.title || '\u2014';\n nextArtistFront.textContent = song.artist || '\u2014';\n nextCoverFront.src = song.art || '';\n nextCard.classList.remove('flip');\n }, 500); \/\/ \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf flip\n}\n\n\/\/ Fetch NP\nasync function fetchNP(){\n try {\n const res = await fetch(NP_URL, { cache: \"no-store\" });\n const data = await res.json();\n\n if (data?.now_playing?.song) {\n const newTitle = data.now_playing.song.title || '\u2014';\n const newArtist = data.now_playing.song.artist || '\u2014';\n const songKey = newArtist + \" - \" + newTitle;\n\n if (lastSong !== songKey) {\n lastSong = songKey;\n showBanner(newArtist, newTitle);\n }\n\n nowTitle.textContent = newTitle;\n nowArtist.textContent = newArtist;\n\n if (data.now_playing.song.art) {\n bgArt.style.backgroundImage = `url('${data.now_playing.song.art}')`;\n }\n }\n\n liveBadge.style.display = (data?.live?.is_live) ? 'inline-flex' : 'none';\n\n if (data?.playing_next?.song) {\n updateNext(data.playing_next.song);\n }\n\n historyList.innerHTML = \"\";\n if (Array.isArray(data?.song_history)) {\n data.song_history.slice(0,10).forEach(item => {\n const div = document.createElement('div');\n div.className = 'song-item';\n const img = document.createElement('img');\n img.src = (item.song?.art) ? item.song.art : '';\n if (!item.song?.art) img.style.display = 'none';\n const meta = document.createElement('div');\n meta.innerHTML = `<div class=\"song-title\">${item.song?.title || '\u2014'}<\/div>\n <div class=\"song-artist\">${item.song?.artist || '\u2014'}<\/div>`;\n div.appendChild(img);\n div.appendChild(meta);\n historyList.appendChild(div);\n });\n }\n } catch(err){ console.error('API error', err); }\n}\nfetchNP();\nsetInterval(fetchNP, 5000);\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03a7\u03a1\u03a9\u039c\u0391 FM Player \u03a7\u03a1\u03a9\u039c\u0391 FM \u0399\u03c3\u03c4\u03bf\u03c1\u03b9\u03ba\u03cc \u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf \u03a4\u03c1\u03b1\u03b3\u03bf\u03cd\u03b4\u03b9 \u2014 \u2014 \u2014 \u2014 \u03a0\u03b1\u03af\u03b6\u03b5\u03b9 \u03c4\u03ce\u03c1\u03b1 LIVE \u2014 \u2014<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-788","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages\/788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xromafm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=788"}],"version-history":[{"count":47,"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages\/788\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages\/788\/revisions\/1311"}],"wp:attachment":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":788,"date":"2025-09-15T11:54:57","date_gmt":"2025-09-15T11:54:57","guid":{"rendered":"https:\/\/xromafm.com\/?page_id=788"},"modified":"2025-10-08T14:30:20","modified_gmt":"2025-10-08T14:30:20","slug":"%cf%87%cf%81%cf%89%ce%bc%ce%b1-fm","status":"publish","type":"page","link":"https:\/\/xromafm.com\/","title":{"rendered":"xromafm"},"content":{"rendered":"\n\n\n\n \n \u03a7\u03a1\u03a9\u039c\u0391 FM Player<\/title>\n <style>\n\/* Global *\/\nhtml, body {\n margin: 0; padding: 0;\n width: 100%; height: 100%;\n background: #000;\n overflow: hidden;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n#background-art {\n position: fixed; inset: 0;\n width: 100%; height: 100%;\n background: #0a0f1f center\/cover no-repeat;\n filter: blur(20px) brightness(0.5);\n z-index: -1;\n}\n\n\/* Layout using grid *\/\n.layout {\n display: grid;\n grid-template-columns: 280px 1fr;\n grid-template-rows: auto 1fr 100px; \/* header, content, player *\/\n height: 100vh;\n}\n\n\/* Station Header *\/\n.station-header {\n position: fixed; \/* stick to top-left *\/\n top: 15px;\n left: 0;\n width: 280px; \/* same width as history *\/\n height: 50px; \/* adjust if needed *\/\n margin: 0;\n padding: 10px 0;\n text-align: center;\n font-size: 28px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 3px;\n background: linear-gradient(90deg,#ff7a18,#af002d,#319197);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-size: 200% auto;\n animation: shine 5s linear infinite;\n z-index: 11;\n}\n\n@keyframes shine {\n from { background-position: 0% 50%; }\n to { background-position: 200% 50%; }\n}\n\n\/* History Sidebar *\/\n.history {\n position: fixed; \/* fixed so it doesn\u2019t scroll with content *\/\n top: 70px; \/* height of the station header *\/\n left: 0;\n width: 280px;\n bottom: 0; \/* stretch to bottom *\/\n display: flex;\n flex-direction: column;\n background: linear-gradient(90deg, #5C0B1A, #731022);\n z-index: 10;\n}\n\n.logo-top {\n text-align: center; \n padding: 10px 0; \n}\n.logo-top img {\n width: 100px; height: 100px;\n border-radius: 50%;\n border: 3px solid #fff;\n box-shadow: 0 0 20px rgba(255,255,255,0.6);\n}\n\n.history h3 {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: center;\n background: linear-gradient(90deg, #b0b0b0, #c0c0c0, #b0b0b0);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n font-weight: 900;\n letter-spacing: 2px;\n}\n\n#historyList {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px 12px;\n}\n\n.song-item {\n display: flex;\n gap: 10px;\n align-items: center;\n margin: 6px 0;\n}\n.song-item img {\n width: 40px; height: 40px;\n border-radius: 6px;\n object-fit: cover;\n}\n.song-title { font-weight: bold; font-size: 14px; color: #fff; }\n.song-artist { font-size: 13px; color: #b0c4de; }\n\n\/* Center content *\/\n.center {\n position: absolute; \/* position relative to viewport *\/\n top: 40%; \/* center vertically *\/\n left: 55%; \/* center horizontally *\/\n transform: translate(-50%, -50%); \/* shift by half its own width\/height *\/\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 5; \/* below header and player if needed *\/\n}\n\n.next-wrap { text-align: center; perspective: 1000px; }\n.eyebrow {\n font-size: 18px; font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #ffd369;\n margin-bottom: 14px;\n text-shadow: 0 0 6px rgba(0,0,0,0.6),\n 0 0 12px rgba(255,211,105,0.7);\n}\n\n.card {\n width: 280px; height: 340px;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.5s;\n animation: peek60 60s linear infinite;\n}\n\n@keyframes peek60 {\n 0% { transform: rotateY(0deg); }\n 0.833% { transform: rotateY(180deg); }\n 5.833% { transform: rotateY(180deg); }\n 6.667% { transform: rotateY(0deg); }\n 100% { transform: rotateY(0deg); }\n}\n\n.card.flip { transform: rotateY(180deg); }\n\n.front, .back {\n position: absolute; inset: 0;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n width: 100%; height: 100%;\n backface-visibility: hidden;\n background: rgba(20,20,20,0.7);\n border-radius: 12px;\n overflow: hidden;\n}\n.back { transform: rotateY(180deg); }\n\n.next-cover { width: 220px; height: 220px; margin-bottom: 15px; }\n.next-cover img {\n width: 100%; height: 100%;\n object-fit: cover;\n border-radius: 12px;\n}\n.next-title { font-size: 20px; font-weight: bold; margin-top: 5px; color: #fff; }\n.next-artist { font-size: 14px; color: #b0c4de; }\n\n\/* Player *\/\n.player {\n position: fixed;\n bottom: 0;\n left: 280px; \/* aligns to right edge of history *\/\n width: calc(100% - 280px); \/* fills remaining width *\/\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px;\n background: linear-gradient(90deg, #0a0a0a, #1a1a1a, #2a2a2a);\n color: #fff;\n backdrop-filter: blur(10px);\n z-index: 9;\n}\n\n.play {\n width: 60px; height: 60px;\n border-radius: 50%; border: none;\n background: linear-gradient(135deg, #5C0B1A, #731022);\n cursor: pointer;\n box-shadow: 0 0 15px rgba(115,16,34,0.7);\n}\n\n.now {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n}\n.now-logo img {\n width: 60px; height: 60px;\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 0 10px rgba(0,0,0,0.5);\n animation: spin 5s linear infinite;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.now-text { text-align: left; }\n.now small {\n font-size: 12px;\n color: #ffd369;\n display: block;\n}\n.title { font-weight: bold; font-size: 18px; color: #fff; }\n.artist { font-size: 15px; color: #4facfe; }\n\n.controls { display: flex; align-items: center; gap: 10px; }\n.mutebtn {\n width: 42px; height: 42px;\n border-radius: 8px; border: none;\n background: #444; color: #fff;\n cursor: pointer;\n}\n.vol input { width: 120px; }\n\n.live-badge {\n background: red; color: #fff;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n margin-left: 5px;\n}\n\n\/* Song Banner *\/\n.song-banner {\n position: fixed;\n bottom: 120px; left: 50%;\n transform: translateX(-50%) translateY(100%);\n width: 80%; max-width: 600px;\n padding: 20px;\n background: rgba(15,32,39,0.95);\n color: #fff;\n border-radius: 12px;\n font-size: 15px; font-weight: 600;\n line-height: 1.5; text-align: left;\n opacity: 0;\n transition: opacity 0.7s ease, transform 0.7s ease;\n z-index: 9998;\n box-shadow: 0 6px 16px rgba(0,0,0,0.5);\n display: flex; flex-direction: column; gap: 10px;\n}\n.song-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n.song-banner-header {\n display: flex; align-items: center; gap: 8px;\n font-size: 16px; font-weight: bold;\n}\n.song-banner-header .icon { color: #ffd369; font-size: 18px; }\n\n.song-banner-links {\n display: flex; flex-direction: column; gap: 6px;\n margin-top: 10px;\n}\n.song-banner-links a {\n display: inline-block;\n padding: 6px 12px;\n font-size: 13px; font-weight: bold;\n color: #ffd369;\n background: rgba(255,255,255,0.1);\n border-radius: 6px;\n text-decoration: none;\n}\n.song-banner-links a:hover { background: rgba(255,255,255,0.2); }\n\n.song-banner-close {\n position: absolute; top: 8px; right: 12px;\n font-size: 18px; font-weight: bold;\n background: transparent; border: none;\n color: #fff; cursor: pointer;\n}\n.song-banner-close:hover { color: #ffd369; }\n\n\/* Volume Slider *\/\n.vol input[type=\"range\"] {\n -webkit-appearance: none;\n width: 120px; height: 6px;\n background: #731022; border-radius: 3px; outline: none;\n}\n.vol input[type=\"range\"]::-moz-range-track { background: #731022; border-radius: 3px; }\n.vol input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px; height: 16px;\n background: #ff5151; border-radius: 50%;\n cursor: pointer; border: none;\n box-shadow: 0 0 6px rgba(255,81,81,0.7);\n margin-top: -1px;\n}\n.vol input[type=\"range\"]::-moz-range-thumb {\n width: 16px; height: 16px;\n background: #ff5151; border-radius: 50%;\n cursor: pointer; border: none;\n box-shadow: 0 0 6px rgba(255,81,81,0.7);\n}\n\n#iconVol { transform: translateY(4px); }\n\n\/* Responsive *\/\n@media (max-width: 768px) {\n body { overflow: auto; }\n\n .layout {\n grid-template-columns: 1fr;\n grid-template-rows: auto auto 1fr; \/* header, player, content *\/\n }\n\n .station-header, .history, .center {\n grid-column: 1 \/ 2;\n grid-row: auto;\n }\n\n .player {\n left: 0;\n width: 100%;\n flex-direction: column;\n height: auto;\n padding: 10px;\n gap: 10px;\n }\n\n .center { margin: 20px 0; }\n .card { width: 200px; height: 260px; }\n .next-cover { width: 160px; height: 160px; }\n\n .now { flex-direction: column; gap: 8px; }\n .controls { width: 100%; justify-content: center; }\n .vol input { width: 100px; }\n\n .song-banner {\n width: 90%; max-width: 90%;\n font-size: 13px;\n bottom: 130px;\n }\n\n .station-header { font-size: 22px; }\n .eyebrow { font-size: 14px; }\n .next-title { font-size: 16px; }\n .next-artist, .song-artist { font-size: 13px; }\n .title { font-size: 16px; }\n .artist { font-size: 13px; }\n .song-title { font-size: 13px; }\n .song-banner-header { font-size: 14px; }\n}\n\n@media (max-width: 768px) {\n \/* Prevent scrolling on mobile *\/\n body {\n overflow: hidden;\n }\n\n \/* Hide the history sidebar *\/\n .history {\n display: none;\n }\n\n \/* Center the station header *\/\n .station-header {\n left: 50%;\n transform: translateX(-50%);\n width: auto;\n text-align: center;\n }\n\n \/* Layout adjustments *\/\n .layout {\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr 100px; \/* header, content, player *\/\n }\n\n .center {\n top: 25%; \/* adjust vertical centering for mobile *\/\n left: 50%;\n transform: translate(-50%, -50%);\n margin: 0;\n }\n\n \/* Player adjustments for mobile *\/\n .player {\n left: 0;\n width: 100%;\n flex-direction: column;\n height: auto;\n padding: 10px;\n gap: 10px;\n }\n\n \/* Card sizing for mobile *\/\n .card {\n width: 200px;\n height: 260px;\n }\n\n .next-cover {\n width: 160px;\n height: 160px;\n }\n\n \/* Now playing section *\/\n .now {\n flex-direction: column;\n gap: 8px;\n }\n\n .controls {\n width: 100%;\n justify-content: center;\n }\n\n .vol input {\n width: 100px;\n }\n\n \/* Song banner adjustments *\/\n .song-banner {\n width: 90%;\n max-width: 90%;\n font-size: 13px;\n bottom: 130px;\n }\n\n \/* Font adjustments *\/\n .station-header { font-size: 22px; }\n .eyebrow { font-size: 14px; }\n .next-title { font-size: 16px; }\n .next-artist, .song-artist { font-size: 13px; }\n .title { font-size: 16px; }\n .artist { font-size: 13px; }\n .song-title { font-size: 13px; }\n .song-banner-header { font-size: 14px; }\n}\n\n\n<\/style>\n <\/head>\n<body>\n\n <div id=\"background-art\"><\/div>\n\n <div class=\"layout\">\n <div class=\"station-header\">\u03a7\u03a1\u03a9\u039c\u0391 FM<\/div>\n\n <aside class=\"history\">\n <div class=\"logo-top\">\n <img decoding=\"async\" src=\"https:\/\/xromafm.com\/wp-content\/uploads\/2025\/09\/cropped-album_art.1757840215.jpg\" alt=\"FM Xroma Logo\">\n <\/div>\n <h3>\u0399\u03c3\u03c4\u03bf\u03c1\u03b9\u03ba\u03cc<\/h3>\n <div id=\"historyList\"><\/div>\n <\/aside>\n\n <main class=\"center\">\n <div class=\"next-wrap\">\n <div class=\"eyebrow\">\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf \u03a4\u03c1\u03b1\u03b3\u03bf\u03cd\u03b4\u03b9<\/div>\n <div class=\"card\" id=\"nextCard\">\n <div class=\"front\">\n <div class=\"next-cover\"><img decoding=\"async\" id=\"nextCoverFront\" src=\"\" alt=\"\"><\/div>\n <div class=\"next-title\" id=\"nextTitleFront\">\u2014<\/div>\n <div class=\"next-artist\" id=\"nextArtistFront\">\u2014<\/div>\n <\/div>\n <div class=\"back\">\n <div class=\"next-cover\"><img decoding=\"async\" id=\"nextCoverBack\" src=\"\" alt=\"\"><\/div>\n <div class=\"next-title\" id=\"nextTitleBack\">\u2014<\/div>\n <div class=\"next-artist\" id=\"nextArtistBack\">\u2014<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <footer class=\"player\">\n <button id=\"playBtn\" class=\"play\" aria-label=\"Play\/Pause\">\n <svg id=\"iconPlay\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <svg id=\"iconPause\" viewBox=\"0 0 24 24\" style=\"display:none\"><path d=\"M6 5h4v14H6zm8 0h4v14h-4z\"\/><\/svg>\n <\/button>\n <div class=\"now\">\n <div class=\"now-logo\">\n <a href=\"https:\/\/xromafm.com\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/xromafm.com\/wp-content\/uploads\/2025\/09\/cropped-album_art.1757840215.jpg\" alt=\"FM Xroma Logo\">\n <\/a>\n <\/div>\n <div class=\"now-text\">\n <small>\u03a0\u03b1\u03af\u03b6\u03b5\u03b9 \u03c4\u03ce\u03c1\u03b1 <span id=\"liveBadge\" class=\"live-badge\" style=\"display:none\">LIVE<\/span><\/small>\n <div class=\"title\" id=\"nowTitle\">\u2014<\/div>\n <div class=\"artist\" id=\"nowArtist\">\u2014<\/div>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <button id=\"muteBtn\" class=\"mutebtn\" aria-label=\"Mute\/Unmute\" style=\"background: none; border: none;\">\n \n <svg id=\"iconVol\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5C0B1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"38\" height=\"38\">\n \n <polygon points=\"3 9 7 9 12 4 12 20 7 15 3 15\"\/>\n \n <line x1=\"15\" y1=\"8\" x2=\"18\" y2=\"5\"\/>\n <line x1=\"15\" y1=\"12\" x2=\"20\" y2=\"12\"\/>\n <line x1=\"15\" y1=\"16\" x2=\"18\" y2=\"19\"\/>\n <\/svg>\n\n \n <svg id=\"iconMute\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5C0B1A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"32\" height=\"32\" style=\"display:none\">\n \n <polygon points=\"3 9 7 9 12 4 12 20 7 15 3 15\"\/>\n \n <line x1=\"15\" y1=\"8\" x2=\"20\" y2=\"16\"\/>\n <line x1=\"20\" y1=\"8\" x2=\"15\" y2=\"16\"\/>\n <\/svg>\n <\/button>\n <div class=\"vol\">\n <input id=\"vol\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.9\" \/>\n <\/div>\n<\/div>\n <\/footer>\n <\/div>\n\n<audio id=\"audio\" preload=\"none\" crossorigin=\"anonymous\"\n src=\"https:\/\/azuralive.streams.ovh\/listen\/fmxroma\/radio.mp3\"><\/audio>\n\n<script>\nconst STREAM_URL = \"https:\/\/azuralive.streams.ovh\/listen\/fmxroma\/radio.mp3\";\nconst NP_URL = \"https:\/\/azuralive.streams.ovh\/api\/nowplaying\/fmxroma\";\n\nconst audio = document.getElementById('audio');\nconst playBtn = document.getElementById('playBtn');\nconst iconPlay = document.getElementById('iconPlay');\nconst iconPause = document.getElementById('iconPause');\nconst muteBtn = document.getElementById('muteBtn');\nconst iconVol = document.getElementById('iconVol');\nconst iconMute = document.getElementById('iconMute');\nconst vol = document.getElementById('vol');\n\nconst nowTitle = document.getElementById('nowTitle');\nconst nowArtist = document.getElementById('nowArtist');\nconst liveBadge = document.getElementById('liveBadge');\n\nconst nextCard = document.getElementById('nextCard');\nconst nextTitleFront = document.getElementById('nextTitleFront');\nconst nextArtistFront = document.getElementById('nextArtistFront');\nconst nextCoverFront = document.getElementById('nextCoverFront');\nconst nextTitleBack = document.getElementById('nextTitleBack');\nconst nextArtistBack = document.getElementById('nextArtistBack');\nconst nextCoverBack = document.getElementById('nextCoverBack');\n\nconst bgArt = document.getElementById('background-art');\nconst historyList = document.getElementById('historyList');\nconst songBanner = document.getElementById('songBanner');\n\nlet lastSong = \"\";\n\n\/\/ Player controls\nplayBtn.addEventListener('click', async () => {\n if (audio.paused) {\n try {\n if (audio.src !== STREAM_URL) audio.src = STREAM_URL;\n await audio.play();\n iconPlay.style.display='none'; iconPause.style.display='block';\n } catch(e){ console.warn('Autoplay blocked', e); }\n } else {\n audio.pause();\n iconPlay.style.display='block'; iconPause.style.display='none';\n }\n});\nvol.addEventListener('input', () => audio.volume = +vol.value);\nmuteBtn.addEventListener('click', () => {\n audio.muted = !audio.muted;\n iconVol.style.display = audio.muted ? 'none' : 'block';\n iconMute.style.display = audio.muted ? 'block' : 'none';\n});\n\n\/\/ Wikipedia fetch\nasync function fetchWikipediaInfo(query) {\n try {\n const url = `https:\/\/en.wikipedia.org\/api\/rest_v1\/page\/summary\/${encodeURIComponent(query)}`;\n const res = await fetch(url);\n if (!res.ok) return null;\n const data = await res.json();\n return {\n extract: data.extract ? data.extract : null,\n link: `https:\/\/en.wikipedia.org\/wiki\/${encodeURIComponent(query)}`\n };\n } catch(e) {\n console.warn(\"Wiki error:\", e);\n return null;\n }\n}\n\n\/\/ Banner\nasync function showBanner(artist, title) {\n let html = `\n <button class=\"song-banner-close\" onclick=\"hideBanner()\">\u00d7<\/button>\n <div class=\"song-banner-header\">\n <span class=\"icon\">\ud83d\udcd6<\/span> Now Playing: ${artist} - ${title}\n <\/div>\n `;\n\n const wikiData = await fetchWikipediaInfo(artist);\n if (wikiData?.extract) {\n html += `<div class=\"song-banner-text\">${wikiData.extract}<\/div>`;\n }\n\n const artistLink = `https:\/\/en.wikipedia.org\/wiki\/${encodeURIComponent(artist)}`;\n const songLink = `https:\/\/en.wikipedia.org\/wiki\/${encodeURIComponent(title)}_(song)`;\n\n html += `\n <div class=\"song-banner-links\">\n <a href=\"${artistLink}\" target=\"_blank\" rel=\"noopener noreferrer\">\ud83d\udcce Read more about ${artist}<\/a>\n <a href=\"${songLink}\" target=\"_blank\" rel=\"noopener noreferrer\">\ud83c\udfb5 Read more about \"${title}\"<\/a>\n <\/div>\n `;\n\n songBanner.innerHTML = html;\n songBanner.classList.add('show');\n\n setTimeout(() => {\n hideBanner();\n }, 20000);\n}\n\nfunction hideBanner() {\n songBanner.classList.remove('show');\n}\n\n\/\/ Flip update\nfunction updateNext(song) {\n nextTitleBack.textContent = song.title || '\u2014';\n nextArtistBack.textContent = song.artist || '\u2014';\n if (song.art) nextCoverBack.src = song.art;\n nextCard.classList.add('flip');\n setTimeout(() => {\n nextTitleFront.textContent = song.title || '\u2014';\n nextArtistFront.textContent = song.artist || '\u2014';\n nextCoverFront.src = song.art || '';\n nextCard.classList.remove('flip');\n }, 500); \/\/ \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf flip\n}\n\n\/\/ Fetch NP\nasync function fetchNP(){\n try {\n const res = await fetch(NP_URL, { cache: \"no-store\" });\n const data = await res.json();\n\n if (data?.now_playing?.song) {\n const newTitle = data.now_playing.song.title || '\u2014';\n const newArtist = data.now_playing.song.artist || '\u2014';\n const songKey = newArtist + \" - \" + newTitle;\n\n if (lastSong !== songKey) {\n lastSong = songKey;\n showBanner(newArtist, newTitle);\n }\n\n nowTitle.textContent = newTitle;\n nowArtist.textContent = newArtist;\n\n if (data.now_playing.song.art) {\n bgArt.style.backgroundImage = `url('${data.now_playing.song.art}')`;\n }\n }\n\n liveBadge.style.display = (data?.live?.is_live) ? 'inline-flex' : 'none';\n\n if (data?.playing_next?.song) {\n updateNext(data.playing_next.song);\n }\n\n historyList.innerHTML = \"\";\n if (Array.isArray(data?.song_history)) {\n data.song_history.slice(0,10).forEach(item => {\n const div = document.createElement('div');\n div.className = 'song-item';\n const img = document.createElement('img');\n img.src = (item.song?.art) ? item.song.art : '';\n if (!item.song?.art) img.style.display = 'none';\n const meta = document.createElement('div');\n meta.innerHTML = `<div class=\"song-title\">${item.song?.title || '\u2014'}<\/div>\n <div class=\"song-artist\">${item.song?.artist || '\u2014'}<\/div>`;\n div.appendChild(img);\n div.appendChild(meta);\n historyList.appendChild(div);\n });\n }\n } catch(err){ console.error('API error', err); }\n}\nfetchNP();\nsetInterval(fetchNP, 5000);\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03a7\u03a1\u03a9\u039c\u0391 FM Player \u03a7\u03a1\u03a9\u039c\u0391 FM \u0399\u03c3\u03c4\u03bf\u03c1\u03b9\u03ba\u03cc \u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03bf \u03a4\u03c1\u03b1\u03b3\u03bf\u03cd\u03b4\u03b9 \u2014 \u2014 \u2014 \u2014 \u03a0\u03b1\u03af\u03b6\u03b5\u03b9 \u03c4\u03ce\u03c1\u03b1 LIVE \u2014 \u2014<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-788","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages\/788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xromafm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=788"}],"version-history":[{"count":47,"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages\/788\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/xromafm.com\/index.php?rest_route=\/wp\/v2\/pages\/788\/revisions\/1311"}],"wp:attachment":[{"href":"https:\/\/xromafm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}