{"id":568,"date":"2025-02-27T01:26:22","date_gmt":"2025-02-27T00:26:22","guid":{"rendered":"https:\/\/roa.be\/?page_id=568"},"modified":"2025-09-15T16:13:26","modified_gmt":"2025-09-15T14:13:26","slug":"the-live","status":"publish","type":"page","link":"https:\/\/roa.be\/?page_id=568","title":{"rendered":"The Live !"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"radio-roa-widget\" style=\"\n  background-color: #5581A4;\n  border: 2px solid #000;\n  border-radius: 10px;\n  padding: 10px;\n  width: 500px;\n  height: 420px;\n  margin: 0 auto;\n  text-align: center;\n\">\n  <!-- Conteneur de la jaquette -->\n  <div style=\"position: relative; display: inline-block;border: 2px solid #000;\n  border-radius: 10px;\">\n    <img decoding=\"async\"\n      id=\"roa-album-cover\"\n      src=\"\/metadata\/OnAir.jpg\"\n      alt=\"Jaquette du titre en cours\"\n      style=\"width: 400px; height: 400px; border-radius: 5px;\"\n    >\n    \n    <!-- Logo en bas \u00e0 droite -->\n    <img decoding=\"async\"\n      src=\"\/wp-content\/uploads\/2025\/02\/logoOfficiel2022-modified.png\"\n      alt=\"Logo de la cha\u00eene\"\n      style=\"\n        position: absolute;\n        bottom: 5px;\n        right: 5px;\n        width: 80px;\n        height: 80px;\n        border-radius: 50%;\n        border: 2px solid #fd3;\n      \"\n    >\n  <\/div>\n \n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  function updateMetadata() {\n    console.log('? Mise \u00e0 jour des m\u00e9tadonn\u00e9es en cours...');\n\n    \/\/ R\u00e9cup\u00e9ration du titre et artiste\n    fetch('\/metadata\/OnAir.txt')\n      .then(response => {\n        if (!response.ok) {\n          throw new Error(`Erreur HTTP : ${response.status}`);\n        }\n        return response.text();\n      })\n      .then(text => {\n        console.log('\u2705 Donn\u00e9es OnAir.txt re\u00e7ues :', text);\n        const parts = text.trim().split(' - ');\n        if (parts.length >= 2) {\n          document.getElementById('roa-current-track').textContent = `${parts[0]}\\n${parts[1]}`;\n        } else {\n          document.getElementById('roa-current-track').textContent = \"Aucune information disponible\";\n        }\n      })\n      .catch(err => {\n        console.error('\u274c Erreur lors de la r\u00e9cup\u00e9ration des m\u00e9tadonn\u00e9es :', err);\n        document.getElementById('roa-current-track').textContent = \"Erreur de chargement...\";\n      });\n  \n    \/\/ R\u00e9cup\u00e9ration du titre de l'\u00e9mission\n    fetch('\/metadata\/TitreEmission.txt')\n      .then(response => {\n        if (!response.ok) {\n          throw new Error(`Erreur HTTP : ${response.status}`);\n        }\n        return response.text();\n      })\n      .then(text => {\n        console.log('\u2705 Donn\u00e9es TitreEmission.txt re\u00e7ues :', text);\n        const emission = text.trim();\n        if (emission) {\n          document.getElementById('roa-emission').textContent = emission;\n        } else {\n          document.getElementById('roa-emission').textContent = \"\u00c9mission inconnue\";\n        }\n      })\n      .catch(err => {\n        console.error('\u274c Erreur lors de la r\u00e9cup\u00e9ration du titre de l\\'\u00e9mission :', err);\n        document.getElementById('roa-emission').textContent = \"Erreur de chargement...\";\n      });\n  \n    \/\/ Rafra\u00eechissement de la jaquette en \u00e9vitant le cache navigateur\n    document.getElementById('roa-album-cover').src = '\/metadata\/OnAir.jpg?' + new Date().getTime();\n  }\n\n  function updateTime() {\n    const now = new Date();\n    document.getElementById('local-time').textContent = now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n  }\n\n  setInterval(updateMetadata, 15000);\n  setInterval(updateTime, 1000);\n  updateMetadata();\n  updateTime();\n});\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"playlist-widget\">\n    <h3 id=\"show-name\"><\/h3>\n    <p><strong><span id=\"current-song\"><\/span><\/strong><\/p>\n    \n    <h4>\u00c0 venir :<\/h4>\n    <ul id=\"upcoming-songs\"><\/ul>\n\n    <h4>La suite :<\/h4>\n    <table>\n        <thead>\n            <tr>\n                <th style=\"width: 60px;\">Heure<\/th>  <!-- Largeur fixe pour l'heure -->\n                <th style=\"width: 230px;\">Titre<\/th> <!-- Largeur fixe pour le titre -->\n            <\/tr>\n        <\/thead>\n        <tbody id=\"last-songs\"><\/tbody>\n    <\/table>\n<\/div>\n\n<style>\n    #playlist-widget {\n        font-family: Arial, sans-serif;\n        padding: 10px;\n        border: 1px solid #ccc;\n        border-radius: 5px;\n        background: #f9f9f9;\n        width: 400px; \/* Largeur fixe du widget *\/\n    }\n    h3, h4 { color: #d9534f; }\n    table {\n        width: 100%;\n        border-collapse: collapse;\n        table-layout: fixed; \/* Fixe la largeur des colonnes *\/\n    }\n    th, td {\n        border: 1px solid #ddd;\n        padding: 8px;\n        text-align: left;\n        overflow: hidden;\n        white-space: nowrap; \/* Emp\u00eache le retour \u00e0 la ligne *\/\n        text-overflow: ellipsis; \/* Ajoute \"...\" si le texte est trop long *\/\n    }\n    th {\n        background-color: #f2f2f2;\n    }\n<\/style>\n\n<script>\nfunction fetchPlaylist() {\n    fetch('\/metadata\/Playlist.txt.txt')\n        .then(response => response.text())\n        .then(data => {\n            let lines = data.split(\"\\n\").map(line => line.trim());\n\n            if (lines.length < 7) {\n                console.error(\"Fichier trop court pour contenir toutes les informations n\u00e9cessaires.\");\n                return;\n            }\n\n            \/\/ Extraction des informations principales\n            let showName = lines[0]; \/\/ Nom de l'\u00e9mission\n            let currentFullTitle = lines[3].replace(\/\\|\/g, ''); \/\/ Titre complet avec ON AIR (suppression des '|')\n            \n            \/\/ Mise \u00e0 jour de l'affichage\n            document.getElementById(\"show-name\").textContent = showName;\n            document.getElementById(\"current-song\").textContent = currentFullTitle;\n\n            \/\/ Mise \u00e0 jour des morceaux \u00e0 venir\n            let upcomingList = document.getElementById(\"upcoming-songs\");\n            upcomingList.innerHTML = \"\"; \/\/ Efface l'ancienne liste\n\n            for (let i = 4; i < lines.length - 5; i++) { \/\/ Exclure les 5 derniers titres pass\u00e9s\n                let parts = lines[i].split(\"|\").map(part => part.trim());\n                if (parts.length >= 2) {\n                    let time = parts[0]; \/\/ Heure\n                    let title = parts.slice(1).join(\" \"); \/\/ Reste de la ligne (titre + interpr\u00e8te)\n                    let li = document.createElement(\"li\");\n                    li.textContent = `${time} - ${title}`;\n                    upcomingList.appendChild(li);\n                }\n            }\n\n            \/\/ Mise \u00e0 jour des derniers morceaux pass\u00e9s\n            let lastSongsTable = document.getElementById(\"last-songs\");\n            lastSongsTable.innerHTML = \"\"; \/\/ Efface l'ancien tableau\n\n            for (let i = lines.length - 5; i < lines.length; i++) {\n                if (lines[i].trim() === \"\") continue;\n                let parts = lines[i].split(\"|\").map(part => part.trim());\n                if (parts.length >= 2) {\n                    let time = parts[0]; \/\/ Heure\n                    let title = parts.slice(1).join(\" \"); \/\/ Reste de la ligne (titre + interpr\u00e8te)\n                    let tr = document.createElement(\"tr\");\n                    tr.innerHTML = `<td>${time}<\/td><td>${title}<\/td>`;\n                    lastSongsTable.appendChild(tr);\n                }\n            }\n        })\n        .catch(error => console.error(\"Erreur de chargement du fichier :\", error));\n}\n\n\/\/ Charger les donn\u00e9es imm\u00e9diatement\nfetchPlaylist();\n\n\/\/ Mettre \u00e0 jour toutes les 10 secondes\nsetInterval(fetchPlaylist, 10000);\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"aligncenter\"><div class=\"radio_player\" data-player-type=\"shortcode\" data-data=\"eyJpZCI6MSwidGl0bGUiOiJQbGF5ZXIgVGl0bGUiLCJzdGlja3kiOmZhbHNlLCJzdGF0dXMiOnRydWUsInNraW4iOiJza2luMiIsInN0YXRpb25zIjpbeyJ0aXRsZSI6IlJhZGlvIE91cnRoZSBBbWJsZXZlIiwic3RyZWFtIjoiaHR0cHM6XC9cL3JhZGlvb3VydGhlYW1ibGV2ZS5yYWRpb2NhLnN0XC87IiwidGh1bWJuYWlsIjoiaHR0cHM6XC9cL3JvYS5iZVwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyNVwvMDJcL2xvZ29PZmZpY2llbDIwMjItbW9kaWZpZWQucG5nIiwic291cmNlX3R5cGUiOiJzdHJlYW0ifV0sInBvcHVwX2ljb24iOmZhbHNlLCJwbGF5bGlzdF9pY29uIjpmYWxzZSwiaGlzdG9yeV9pY29uIjpmYWxzZSwidm9sdW1lX2NvbnRyb2wiOnRydWUsInBsYXllcl9zdGF0dXMiOnRydWUsInNob3dfYXJ0aXN0IjpmYWxzZSwic2hvd19hcnR3b3JrIjpmYWxzZSwicGxheWVyX3RleHQiOiJMaXN0ZW4gTGl2ZSIsIndpZHRoIjozNTAsIndpZHRoX21vYmlsZSI6MzIwLCJib3JkZXJfcmFkaXVzIjoxMCwiYmdfY29sb3IiOiIjNTU4MUE0IiwiYmdfaW1hZ2UiOiJodHRwczpcL1wvcm9hLmJlXC9iaXNcL3dwLWNvbnRlbnRcL3BsdWdpbnNcL3JhZGlvLXBsYXllclwvYXNzZXRzXC9pbWFnZXNcL3BsYXllci1iZy5wbmciLCJiZ190eXBlIjoiY29sb3IiLCJjb2xvcl90eXBlIjoic29saWQiLCJ0ZXh0X2NvbG9yIjoiI2ZmZiIsImJveF9zaGFkb3ciOnRydWUsImJveF9zaGFkb3dfaCI6MCwiYm94X3NoYWRvd192IjoyNSwiYm94X3NoYWRvd19ibHVyIjoyMCwiYm94X3NoYWRvd19zcHJlYWQiOi0yNSwiYm94X3NoYWRvd19jb2xvciI6InJnYmEoMCwgMCwgMCwgMC40NSkiLCJib3hfc2hhZG93X3R5cGUiOiIiLCJzaG93X3Byb2dyZXNzYmFyIjp0cnVlfQ==\"><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background:linear-gradient(180deg,rgb(2,3,129) 0%,rgb(248,252,40) 100%)\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"225\" src=\"https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/Sangyubhntre.png\" alt=\"\" class=\"wp-image-575\" srcset=\"https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/Sangyubhntre.png 225w, https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/Sangyubhntre-150x150.png 150w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-medium-font-size wp-block-paragraph\"><strong>TuneIn<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background:linear-gradient(180deg,rgb(2,3,129) 0%,rgb(252,236,40) 100%)\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"225\" src=\"https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/images.jpg\" alt=\"\" class=\"wp-image-576\" srcset=\"https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/images.jpg 225w, https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/images-150x150.jpg 150w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/player.roa.be\/\">https:\/\/player.roa.be\/<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-medium-font-size wp-block-paragraph\"><strong>Radio player<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background:linear-gradient(180deg,rgb(2,3,129) 0%,rgb(233,252,40) 100%)\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"225\" src=\"https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/vtbgyuhn.jpg\" alt=\"\" class=\"wp-image-577\" srcset=\"https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/vtbgyuhn.jpg 225w, https:\/\/roa.be\/wp-content\/uploads\/2025\/02\/vtbgyuhn-150x150.jpg 150w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-medium-font-size wp-block-paragraph\"><strong>Radio Belgique<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>\u00c0 venir : La suite : Heure Titre TuneIn Radio player Radio Belgique<\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-full.php","meta":{"footnotes":""},"class_list":["post-568","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roa.be\/index.php?rest_route=\/wp\/v2\/pages\/568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roa.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roa.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roa.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roa.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=568"}],"version-history":[{"count":55,"href":"https:\/\/roa.be\/index.php?rest_route=\/wp\/v2\/pages\/568\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/roa.be\/index.php?rest_route=\/wp\/v2\/pages\/568\/revisions\/1156"}],"wp:attachment":[{"href":"https:\/\/roa.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}