{"id":262,"date":"2026-04-02T03:45:15","date_gmt":"2026-04-02T03:45:15","guid":{"rendered":"https:\/\/radiomachali.cl\/?page_id=262"},"modified":"2026-04-02T03:47:09","modified_gmt":"2026-04-02T03:47:09","slug":"en-vivo","status":"publish","type":"page","link":"https:\/\/radiomachali.cl\/?page_id=262","title":{"rendered":"EN VIVO"},"content":{"rendered":"\n<div style=\"height:96px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<script id='sonic_js' data-port='8150' src='https:\/\/sp001.servidoresph.com\/cp\/widgets.js?r=990'><\/script>\n\n\n<div class=\"radio-player\">\n\n  <!-- VINILO -->\n  <div class=\"vinyl-container\">\n    <div id=\"vinyl\" class=\"vinyl\">\n\n      <div class=\"disc\"><\/div>\n\n      <!-- CAR\u00c1TULA -->\n      <div id=\"sonic_art_full\" class=\"label\"><\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- INFO -->\n  <div class=\"info\">\n\n    <div class=\"live\">\n      <span class=\"dot\"><\/span> EN VIVO\n    <\/div>\n\n    <div id=\"sonic_title\" class=\"title\">\n      Conectando&#8230;\n    <\/div>\n\n    <audio id=\"radio\">\n      <source src=\"https:\/\/sp001.servidoresph.com:8150\/stream\" type=\"audio\/mpeg\">\n    <\/audio>\n\n    <button onclick=\"toggleRadio()\" id=\"btn\" class=\"play-btn\">\n      \u25b6 ESCUCHAR\n    <\/button>\n\n    <div id=\"loader\" class=\"loader hidden\"><\/div>\n\n    <!-- ECUALIZADOR PRO COMPACTO -->\n    <div id=\"equalizer\" class=\"equalizer\">\n      <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n      <span><\/span><span><\/span><span><\/span><span><\/span>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<!-- SONIC -->\n<script id=\"sonic_js\" data-port=\"8150\" src=\"https:\/\/sp001.servidoresph.com\/cp\/widgets.js?r=990\"><\/script>\n\n<style>\n.radio-player{\n  max-width:950px;\n  margin:auto;\n  background:linear-gradient(135deg,#702e84,#4b1d5e);\n  color:white;\n  border-radius:20px;\n  padding:20px;\n  display:flex;\n  gap:30px;\n  align-items:center;\n  flex-wrap:wrap;\n  font-family:Arial, sans-serif;\n  box-shadow:0 10px 30px rgba(0,0,0,0.3);\n}\n\n\/* VINILO *\/\n.vinyl-container{\n  width:260px;\n  height:260px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n}\n\n.vinyl{\n  width:100%;\n  height:100%;\n  position:relative;\n  border-radius:50%;\n}\n\n\/* DISCO *\/\n.disc{\n  position:absolute;\n  width:100%;\n  height:100%;\n  border-radius:50%;\n  background:\n    radial-gradient(circle at center, #111 0%, #000 60%, #222 100%);\n  box-shadow:0 0 25px rgba(0,0,0,0.8);\n}\n\n\/* SURCOS *\/\n.disc::after{\n  content:\"\";\n  position:absolute;\n  width:100%;\n  height:100%;\n  border-radius:50%;\n  background:repeating-radial-gradient(\n    circle,\n    rgba(255,255,255,0.04) 0px,\n    rgba(255,255,255,0.04) 2px,\n    transparent 2px,\n    transparent 6px\n  );\n}\n\n\/* CAR\u00c1TULA CENTRO *\/\n.label{\n  position:absolute;\n  width:95px;\n  height:95px;\n  border-radius:50%;\n  top:50%;\n  left:50%;\n  transform:translate(-50%,-50%);\n  z-index:2;\n  border:4px solid #fff;\n  overflow:hidden;\n}\n\n\/* IMAGEN SONIC *\/\n.label img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  border-radius:50%;\n}\n\n\/* AGUJERO VINILO *\/\n.label::after{\n  content:\"\";\n  position:absolute;\n  width:12px;\n  height:12px;\n  background:#111;\n  border-radius:50%;\n  top:50%;\n  left:50%;\n  transform:translate(-50%,-50%);\n}\n\n\/* GIRO *\/\n.spin{\n  animation:spin 3s linear infinite;\n}\n\n@keyframes spin{\n  from{ transform:rotate(0deg); }\n  to{ transform:rotate(360deg); }\n}\n\n\/* INFO *\/\n.info{ flex:1; min-width:280px; }\n\n.live{\n  font-size:13px;\n  opacity:0.8;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.dot{\n  width:8px;\n  height:8px;\n  background:#ff3b3b;\n  border-radius:50%;\n  animation:pulse 1.2s infinite;\n}\n\n@keyframes pulse{\n  0%{transform:scale(1);}\n  50%{transform:scale(1.6);}\n  100%{transform:scale(1);}\n}\n\n.title{\n  font-size:22px;\n  font-weight:bold;\n  margin:10px 0;\n}\n\n\/* BOT\u00d3N *\/\n.play-btn{\n  background:white;\n  color:#702e84;\n  border:none;\n  padding:12px 22px;\n  border-radius:30px;\n  cursor:pointer;\n  font-weight:bold;\n  transition:0.3s;\n}\n\n.play-btn:hover{\n  transform:scale(1.05);\n}\n\n\/* LOADER *\/\n.loader{\n  width:25px;\n  height:25px;\n  border:3px solid rgba(255,255,255,0.3);\n  border-top:3px solid white;\n  border-radius:50%;\n  animation:spinloader 1s linear infinite;\n  margin-top:10px;\n}\n\n.hidden{display:none;}\n\n@keyframes spinloader{\n  to{transform:rotate(360deg);}\n}\n\n\/* ECUALIZADOR PRO *\/\n.equalizer{\n  display:flex;\n  align-items:flex-end;\n  height:30px;\n  margin-top:12px;\n  max-width:220px;\n}\n\n.equalizer span{\n  flex:1;\n  margin:0 2px;\n  height:6px;\n  background:white;\n  border-radius:2px;\n  opacity:0.8;\n}\n\n.playing span{\n  animation:bounce 0.8s infinite ease-in-out;\n}\n\n@keyframes bounce{\n  0%,100%{height:6px;}\n  50%{height:28px;}\n}\n\n\/* RESPONSIVE *\/\n@media(max-width:600px){\n  .radio-player{\n    flex-direction:column;\n    text-align:center;\n  }\n\n  .vinyl-container{\n    width:200px;\n    height:200px;\n  }\n}\n<\/style>\n\n<script>\nconst audio = document.getElementById(\"radio\");\nconst eq = document.getElementById(\"equalizer\");\nconst btn = document.getElementById(\"btn\");\nconst loader = document.getElementById(\"loader\");\nconst vinyl = document.getElementById(\"vinyl\");\n\nfunction toggleRadio(){\n  if(audio.paused){\n    loader.classList.remove(\"hidden\");\n    btn.innerText = \"CARGANDO...\";\n\n    audio.play()\n    .then(()=>{\n      loader.classList.add(\"hidden\");\n      eq.classList.add(\"playing\");\n      vinyl.classList.add(\"spin\");\n      btn.innerText = \"\u23f8 PAUSAR\";\n    })\n    .catch(()=>{\n      loader.classList.add(\"hidden\");\n      btn.innerText = \"\u26a0 ERROR\";\n    });\n\n  } else {\n    audio.pause();\n    eq.classList.remove(\"playing\");\n    vinyl.classList.remove(\"spin\");\n    btn.innerText = \"\u25b6 ESCUCHAR\";\n  }\n}\n<\/script>\n\n\n\n<div style=\"height:140px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>EN VIVO Conectando&#8230; \u25b6 ESCUCHAR<\/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-262","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/radiomachali.cl\/?author=1"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"EN VIVO Conectando&#8230; \u25b6 ESCUCHAR","_links":{"self":[{"href":"https:\/\/radiomachali.cl\/index.php?rest_route=\/wp\/v2\/pages\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/radiomachali.cl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radiomachali.cl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radiomachali.cl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radiomachali.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=262"}],"version-history":[{"count":2,"href":"https:\/\/radiomachali.cl\/index.php?rest_route=\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":266,"href":"https:\/\/radiomachali.cl\/index.php?rest_route=\/wp\/v2\/pages\/262\/revisions\/266"}],"wp:attachment":[{"href":"https:\/\/radiomachali.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}