Radio Libre | Live Stream<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n color: white;\n }\n\n \/* Spinning Animation *\/\n @keyframes spin {\n 100% { transform: rotate(360deg); }\n }\n\n .spin-anim {\n animation: spin 4s linear infinite;\n }\n\n \/* Paused animation state *\/\n .paused {\n animation-play-state: paused;\n }\n\n \/* Vinyl Record Texture & Shadows *\/\n .vinyl-record {\n \/* Simulating the grooves of a vinyl record *\/\n background: linear-gradient(30deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%),\n repeating-radial-gradient(#111 0, #111 3px, #0a0a0a 4px, #0a0a0a 5px);\n box-shadow: \n 0 0 30px rgba(0,0,0,0.8),\n inset 0 0 20px rgba(0,0,0,0.9);\n position: relative;\n }\n\n \/* Center Hole in the Label *\/\n .vinyl-hole {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 15px;\n height: 15px;\n background-color: #1a1a1a; \/* Matches a dark spindle\/background *\/\n border-radius: 50%;\n z-index: 20;\n box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);\n }\n\n \/* Glassmorphism utility *\/\n .glass-panel {\n background: rgba(25, 25, 30, 0.4);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n \/* Overriding injected widget styles to ensure they look good in our dark UI *\/\n #sonic_art {\n display: flex;\n justify-content: center;\n margin-bottom: 1.5rem;\n }\n\n #sonic_art img {\n width: 100%;\n max-width: 240px;\n border-radius: 16px;\n box-shadow: 0 15px 35px -5px rgba(0,0,0,0.6);\n object-fit: cover;\n aspect-ratio: 1 \/ 1;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n #sonic_history {\n font-size: 0.9rem;\n color: #d1d5db;\n max-height: 250px;\n overflow-y: auto;\n padding-right: 10px;\n }\n\n \/* Scrollbar styling for history *\/\n #sonic_history::-webkit-scrollbar {\n width: 6px;\n }\n #sonic_history::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 10px;\n }\n #sonic_history::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n }\n\n \/* Cleanup injected table\/list from sonic widget if applicable *\/\n #sonic_history table, #sonic_history ul {\n width: 100%;\n border-collapse: collapse;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n #sonic_history td, #sonic_history li {\n padding: 10px 5px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n line-height: 1.4;\n }\n #sonic_history td:last-child, #sonic_history li:last-child {\n border-bottom: none;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen relative flex items-center justify-center py-10\">\n\n \n <div class=\"fixed inset-0 z-[-2] bg-[url('http:\/\/fromanotherplace.org\/wp-content\/uploads\/2020\/10\/finalvideo.fw_.png')] bg-cover bg-center bg-no-repeat\"><\/div>\n \n \n <div class=\"fixed inset-0 z-[-1] bg-black opacity-[0.69]\"><\/div>\n\n \n <audio id=\"audioStream\" preload=\"none\">\n <source src=\"https:\/\/radios.miservidor.cloud\/8018\/;\" type=\"audio\/mpeg\">\n Your browser does not support the audio element.\n <\/audio>\n\n <div class=\"container mx-auto px-4 max-w-6xl z-10\">\n \n \n <div class=\"text-center mb-10\">\n <h1 class=\"text-4xl md:text-6xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-gray-100 to-gray-400 drop-shadow-lg\">RADIO LIBRE<\/h1>\n <p class=\"text-gray-300 mt-2 tracking-widest uppercase text-sm md:text-base\">Transmisi\u00f3n en Vivo<\/p>\n <\/div>\n\n <div class=\"flex flex-col lg:flex-row gap-12 lg:gap-16 items-center lg:items-start justify-center\">\n \n \n <div class=\"flex flex-col items-center glass-panel rounded-3xl p-8 shadow-2xl w-full max-w-md\">\n \n \n <div id=\"vinylRecord\" class=\"vinyl-record w-64 h-64 md:w-80 md:h-80 rounded-full flex items-center justify-center spin-anim paused relative\">\n \n <div class=\"vinyl-hole\"><\/div>\n \n \n <div class=\"w-1\/3 h-1\/3 rounded-full overflow-hidden border-2 border-[#111] z-10 relative shadow-[0_0_15px_rgba(0,0,0,0.5)]\">\n <img decoding=\"async\" src=\"http:\/\/fromanotherplace.org\/wp-content\/uploads\/2020\/08\/player2.jpg\" alt=\"Radio Libre Cover\" class=\"w-full h-full object-cover\">\n <\/div>\n <\/div>\n\n \n <div class=\"mt-10 mb-4 flex items-center justify-center w-full\">\n <button id=\"playBtn\" class=\"group relative flex items-center justify-center w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full shadow-[0_0_20px_rgba(99,102,241,0.4)] hover:shadow-[0_0_30px_rgba(99,102,241,0.6)] hover:scale-105 transition-all duration-300 ease-in-out border-2 border-white\/20\">\n <i id=\"playIcon\" class=\"fa-solid fa-play text-2xl text-white ml-1 transition-transform group-hover:scale-110\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"flex items-center space-x-3 mt-4\">\n <div class=\"flex space-x-1 items-center h-4\">\n \n <div class=\"w-1 bg-indigo-400 h-2 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-4 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-1 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-3 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-2 rounded-full visualizer-bar\"><\/div>\n <\/div>\n <span id=\"statusText\" class=\"text-sm font-semibold text-indigo-300 tracking-wide uppercase\">En Pausa<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col w-full max-w-md lg:max-w-lg glass-panel rounded-3xl p-8 shadow-2xl relative overflow-hidden\">\n \n <div class=\"absolute top-0 right-0 p-4 opacity-10\">\n <i class=\"fa-solid fa-music text-9xl\"><\/i>\n <\/div>\n \n <h2 class=\"text-2xl font-bold mb-6 text-white border-b border-white\/10 pb-4 relative z-10\">\n <i class=\"fa-solid fa-compact-disc mr-2 text-indigo-400\"><\/i> Sonando Ahora\n <\/h2>\n\n \n <div class=\"relative z-10 w-full\">\n \n <div id='sonic_art'><\/div>\n \n <h3 class=\"text-lg font-semibold text-gray-200 mt-6 mb-3\">Historial de Canciones<\/h3>\n \n <div id='sonic_history' class=\"bg-black\/30 rounded-xl p-4 border border-white\/5\"><\/div>\n <\/div>\n\n \n <script id='sonic_js' data-port='8018' src='https:\/\/radios.miservidor.cloud\/cp\/widgets.js?r=527'><\/script>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const audio = document.getElementById('audioStream');\n const playBtn = document.getElementById('playBtn');\n const playIcon = document.getElementById('playIcon');\n const vinyl = document.getElementById('vinylRecord');\n const statusText = document.getElementById('statusText');\n \n \/\/ Set initial volume slightly lowered just in case\n audio.volume = 0.8;\n\n let isPlaying = false;\n\n \/\/ Handle Play\/Pause logic\n playBtn.addEventListener('click', () => {\n if (isPlaying) {\n \/\/ Pause actions\n audio.pause();\n playIcon.classList.remove('fa-pause');\n playIcon.classList.add('fa-play');\n playIcon.classList.add('ml-1'); \/\/ Adjust icon centering for play button\n vinyl.classList.add('paused');\n statusText.textContent = 'En Pausa';\n statusText.classList.remove('text-green-400');\n statusText.classList.add('text-indigo-300');\n isPlaying = false;\n } else {\n \/\/ Play actions\n \/\/ Resetting load to ensure we get the live stream and avoid heavy caching\n audio.load();\n \n \/\/ The play() promise handles cases where browsers block autoplay\n audio.play().then(() => {\n playIcon.classList.remove('fa-play');\n playIcon.classList.remove('ml-1');\n playIcon.classList.add('fa-pause');\n vinyl.classList.remove('paused');\n statusText.textContent = 'En Vivo';\n statusText.classList.remove('text-indigo-300');\n statusText.classList.add('text-green-400');\n isPlaying = true;\n }).catch(error => {\n console.error(\"Playback failed:\", error);\n \/\/ Provide a fallback UI notice using DOM (No alert)\n statusText.textContent = 'Error al reproducir';\n statusText.classList.add('text-red-400');\n });\n }\n });\n\n \/\/ Handle errors thrown by the audio element itself\n audio.addEventListener('error', () => {\n console.error(\"Audio stream error\");\n statusText.textContent = 'Stream no disponible';\n statusText.classList.remove('text-indigo-300', 'text-green-400');\n statusText.classList.add('text-red-400');\n \n \/\/ Revert UI to paused state\n playIcon.classList.remove('fa-pause');\n playIcon.classList.add('fa-play', 'ml-1');\n vinyl.classList.add('paused');\n isPlaying = false;\n });\n \n \/\/ Animation for visualizer bars\n const bars = document.querySelectorAll('.visualizer-bar');\n setInterval(() => {\n if (isPlaying) {\n bars.forEach(bar => {\n const randomHeight = Math.floor(Math.random() * 16) + 4; \/\/ 4px to 20px\n bar.style.height = `${randomHeight}px`;\n bar.style.transition = 'height 0.2s ease';\n });\n } else {\n \/\/ Reset bars to default when paused\n bars.forEach((bar, index) => {\n const defaultHeights = [8, 16, 4, 12, 8];\n bar.style.height = `${defaultHeights[index]}px`;\n });\n }\n }, 200);\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Radio Libre | Live Stream Your browser does not support the audio element. RADIO LIBRE Transmisi\u00f3n en Vivo En Pausa Sonando Ahora Historial de Canciones<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-396","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":22,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages\/396\/revisions"}],"predecessor-version":[{"id":7532,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages\/396\/revisions\/7532"}],"wp:attachment":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/media?parent=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

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

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

\n\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Radio Libre | Live Stream<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n color: white;\n }\n\n \/* Spinning Animation *\/\n @keyframes spin {\n 100% { transform: rotate(360deg); }\n }\n\n .spin-anim {\n animation: spin 4s linear infinite;\n }\n\n \/* Paused animation state *\/\n .paused {\n animation-play-state: paused;\n }\n\n \/* Vinyl Record Texture & Shadows *\/\n .vinyl-record {\n \/* Simulating the grooves of a vinyl record *\/\n background: linear-gradient(30deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%),\n repeating-radial-gradient(#111 0, #111 3px, #0a0a0a 4px, #0a0a0a 5px);\n box-shadow: \n 0 0 30px rgba(0,0,0,0.8),\n inset 0 0 20px rgba(0,0,0,0.9);\n position: relative;\n }\n\n \/* Center Hole in the Label *\/\n .vinyl-hole {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 15px;\n height: 15px;\n background-color: #1a1a1a; \/* Matches a dark spindle\/background *\/\n border-radius: 50%;\n z-index: 20;\n box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);\n }\n\n \/* Glassmorphism utility *\/\n .glass-panel {\n background: rgba(25, 25, 30, 0.4);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n \/* Overriding injected widget styles to ensure they look good in our dark UI *\/\n #sonic_art {\n display: flex;\n justify-content: center;\n margin-bottom: 1.5rem;\n }\n\n #sonic_art img {\n width: 100%;\n max-width: 240px;\n border-radius: 16px;\n box-shadow: 0 15px 35px -5px rgba(0,0,0,0.6);\n object-fit: cover;\n aspect-ratio: 1 \/ 1;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n #sonic_history {\n font-size: 0.9rem;\n color: #d1d5db;\n max-height: 250px;\n overflow-y: auto;\n padding-right: 10px;\n }\n\n \/* Scrollbar styling for history *\/\n #sonic_history::-webkit-scrollbar {\n width: 6px;\n }\n #sonic_history::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 10px;\n }\n #sonic_history::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n }\n\n \/* Cleanup injected table\/list from sonic widget if applicable *\/\n #sonic_history table, #sonic_history ul {\n width: 100%;\n border-collapse: collapse;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n #sonic_history td, #sonic_history li {\n padding: 10px 5px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n line-height: 1.4;\n }\n #sonic_history td:last-child, #sonic_history li:last-child {\n border-bottom: none;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen relative flex items-center justify-center py-10\">\n\n \n <div class=\"fixed inset-0 z-[-2] bg-[url('http:\/\/fromanotherplace.org\/wp-content\/uploads\/2020\/10\/finalvideo.fw_.png')] bg-cover bg-center bg-no-repeat\"><\/div>\n \n \n <div class=\"fixed inset-0 z-[-1] bg-black opacity-[0.69]\"><\/div>\n\n \n <audio id=\"audioStream\" preload=\"none\">\n <source src=\"https:\/\/radios.miservidor.cloud\/8018\/;\" type=\"audio\/mpeg\">\n Your browser does not support the audio element.\n <\/audio>\n\n <div class=\"container mx-auto px-4 max-w-6xl z-10\">\n \n \n <div class=\"text-center mb-10\">\n <h1 class=\"text-4xl md:text-6xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-gray-100 to-gray-400 drop-shadow-lg\">RADIO LIBRE<\/h1>\n <p class=\"text-gray-300 mt-2 tracking-widest uppercase text-sm md:text-base\">Transmisi\u00f3n en Vivo<\/p>\n <\/div>\n\n <div class=\"flex flex-col lg:flex-row gap-12 lg:gap-16 items-center lg:items-start justify-center\">\n \n \n <div class=\"flex flex-col items-center glass-panel rounded-3xl p-8 shadow-2xl w-full max-w-md\">\n \n \n <div id=\"vinylRecord\" class=\"vinyl-record w-64 h-64 md:w-80 md:h-80 rounded-full flex items-center justify-center spin-anim paused relative\">\n \n <div class=\"vinyl-hole\"><\/div>\n \n \n <div class=\"w-1\/3 h-1\/3 rounded-full overflow-hidden border-2 border-[#111] z-10 relative shadow-[0_0_15px_rgba(0,0,0,0.5)]\">\n <img decoding=\"async\" src=\"http:\/\/fromanotherplace.org\/wp-content\/uploads\/2020\/08\/player2.jpg\" alt=\"Radio Libre Cover\" class=\"w-full h-full object-cover\">\n <\/div>\n <\/div>\n\n \n <div class=\"mt-10 mb-4 flex items-center justify-center w-full\">\n <button id=\"playBtn\" class=\"group relative flex items-center justify-center w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full shadow-[0_0_20px_rgba(99,102,241,0.4)] hover:shadow-[0_0_30px_rgba(99,102,241,0.6)] hover:scale-105 transition-all duration-300 ease-in-out border-2 border-white\/20\">\n <i id=\"playIcon\" class=\"fa-solid fa-play text-2xl text-white ml-1 transition-transform group-hover:scale-110\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"flex items-center space-x-3 mt-4\">\n <div class=\"flex space-x-1 items-center h-4\">\n \n <div class=\"w-1 bg-indigo-400 h-2 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-4 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-1 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-3 rounded-full visualizer-bar\"><\/div>\n <div class=\"w-1 bg-indigo-400 h-2 rounded-full visualizer-bar\"><\/div>\n <\/div>\n <span id=\"statusText\" class=\"text-sm font-semibold text-indigo-300 tracking-wide uppercase\">En Pausa<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col w-full max-w-md lg:max-w-lg glass-panel rounded-3xl p-8 shadow-2xl relative overflow-hidden\">\n \n <div class=\"absolute top-0 right-0 p-4 opacity-10\">\n <i class=\"fa-solid fa-music text-9xl\"><\/i>\n <\/div>\n \n <h2 class=\"text-2xl font-bold mb-6 text-white border-b border-white\/10 pb-4 relative z-10\">\n <i class=\"fa-solid fa-compact-disc mr-2 text-indigo-400\"><\/i> Sonando Ahora\n <\/h2>\n\n \n <div class=\"relative z-10 w-full\">\n \n <div id='sonic_art'><\/div>\n \n <h3 class=\"text-lg font-semibold text-gray-200 mt-6 mb-3\">Historial de Canciones<\/h3>\n \n <div id='sonic_history' class=\"bg-black\/30 rounded-xl p-4 border border-white\/5\"><\/div>\n <\/div>\n\n \n <script id='sonic_js' data-port='8018' src='https:\/\/radios.miservidor.cloud\/cp\/widgets.js?r=527'><\/script>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const audio = document.getElementById('audioStream');\n const playBtn = document.getElementById('playBtn');\n const playIcon = document.getElementById('playIcon');\n const vinyl = document.getElementById('vinylRecord');\n const statusText = document.getElementById('statusText');\n \n \/\/ Set initial volume slightly lowered just in case\n audio.volume = 0.8;\n\n let isPlaying = false;\n\n \/\/ Handle Play\/Pause logic\n playBtn.addEventListener('click', () => {\n if (isPlaying) {\n \/\/ Pause actions\n audio.pause();\n playIcon.classList.remove('fa-pause');\n playIcon.classList.add('fa-play');\n playIcon.classList.add('ml-1'); \/\/ Adjust icon centering for play button\n vinyl.classList.add('paused');\n statusText.textContent = 'En Pausa';\n statusText.classList.remove('text-green-400');\n statusText.classList.add('text-indigo-300');\n isPlaying = false;\n } else {\n \/\/ Play actions\n \/\/ Resetting load to ensure we get the live stream and avoid heavy caching\n audio.load();\n \n \/\/ The play() promise handles cases where browsers block autoplay\n audio.play().then(() => {\n playIcon.classList.remove('fa-play');\n playIcon.classList.remove('ml-1');\n playIcon.classList.add('fa-pause');\n vinyl.classList.remove('paused');\n statusText.textContent = 'En Vivo';\n statusText.classList.remove('text-indigo-300');\n statusText.classList.add('text-green-400');\n isPlaying = true;\n }).catch(error => {\n console.error(\"Playback failed:\", error);\n \/\/ Provide a fallback UI notice using DOM (No alert)\n statusText.textContent = 'Error al reproducir';\n statusText.classList.add('text-red-400');\n });\n }\n });\n\n \/\/ Handle errors thrown by the audio element itself\n audio.addEventListener('error', () => {\n console.error(\"Audio stream error\");\n statusText.textContent = 'Stream no disponible';\n statusText.classList.remove('text-indigo-300', 'text-green-400');\n statusText.classList.add('text-red-400');\n \n \/\/ Revert UI to paused state\n playIcon.classList.remove('fa-pause');\n playIcon.classList.add('fa-play', 'ml-1');\n vinyl.classList.add('paused');\n isPlaying = false;\n });\n \n \/\/ Animation for visualizer bars\n const bars = document.querySelectorAll('.visualizer-bar');\n setInterval(() => {\n if (isPlaying) {\n bars.forEach(bar => {\n const randomHeight = Math.floor(Math.random() * 16) + 4; \/\/ 4px to 20px\n bar.style.height = `${randomHeight}px`;\n bar.style.transition = 'height 0.2s ease';\n });\n } else {\n \/\/ Reset bars to default when paused\n bars.forEach((bar, index) => {\n const defaultHeights = [8, 16, 4, 12, 8];\n bar.style.height = `${defaultHeights[index]}px`;\n });\n }\n }, 200);\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Radio Libre | Live Stream Your browser does not support the audio element. RADIO LIBRE Transmisi\u00f3n en Vivo En Pausa Sonando Ahora Historial de Canciones<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-396","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":22,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages\/396\/revisions"}],"predecessor-version":[{"id":7532,"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/pages\/396\/revisions\/7532"}],"wp:attachment":[{"href":"https:\/\/fromanotherplace.org\/en\/wp-json\/wp\/v2\/media?parent=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}