{"id":10,"date":"2026-01-26T15:59:17","date_gmt":"2026-01-26T18:59:17","guid":{"rendered":"https:\/\/radioestiloformosa.com.ar\/?page_id=10"},"modified":"2026-01-29T21:26:30","modified_gmt":"2026-01-30T00:26:30","slug":"radio-en-vivo","status":"publish","type":"page","link":"https:\/\/radioestiloformosa.com.ar\/index.php\/radio-en-vivo\/","title":{"rendered":"Radio en vivo"},"content":{"rendered":"\n<!-- ============================= -->\n<!-- REPRODUCTOR RADIO MINIMALISTA -->\n<!-- ============================= -->\n\n<div class=\"radio-card\">\n  <!-- ===== LOGO DE LA RADIO ===== -->\n  <!-- SE PUEDE CAMBIAR EL SVG POR OTRO, PERO NO HACE FALTA SUBIR IMAGEN -->\n  <div class=\"radio-logo-wrapper\">\n    <div class=\"radio-logo\">\n      <!-- ICONO DE PARLANTE MINIMALISTA -->\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 64 64\">\n        <!-- CUERPO DEL PARLANTE -->\n        <path\n          d=\"M20 26h10l12-10v32l-12-10H20z\"\n          fill=\"#ffffff\"\n          stroke=\"#143a6e\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        \/>\n        <!-- ONDA SONORA PEQUE\u00d1A -->\n        <path\n          d=\"M44 28c2 2 2 6 0 8\"\n          fill=\"none\"\n          stroke=\"#143a6e\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        \/>\n        <!-- ONDA SONORA GRANDE -->\n        <path\n          d=\"M48 24c4 4 4 12 0 16\"\n          fill=\"none\"\n          stroke=\"#143a6e\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        \/>\n      <\/svg>\n    <\/div>\n  <\/div>\n\n  <!-- ===== NOMBRE DE LA RADIO ===== -->\n  <!-- CAMBIAR TEXTO AQU\u00cd -->\n  <div class=\"radio-name\">Radio en VIVO !<\/div>\n\n  <!-- ===== INDICADOR DE EN VIVO ===== -->\n  <div class=\"radio-live\">\n    <span class=\"badge-live\">LIVE<\/span>\n    <span class=\"live-dot\"><\/span>\n  <\/div>\n\n  <!-- ===== CONTROLES ===== -->\n  <div class=\"radio-controls\">\n\n    <!-- BOT\u00d3N PLAY \/ PAUSE -->\n    <button\n      class=\"radio-play-btn\"\n      id=\"radio-play-btn\"\n      aria-label=\"Reproducir \/ Pausar\"\n      type=\"button\"\n    >\n      <span class=\"play-icon\"><\/span>\n    <\/button>\n\n    <!-- CONTROL DE VOLUMEN -->\n    <div class=\"radio-volume-wrapper\">\n\n      <!-- BOT\u00d3N MUTE -->\n      <button\n        class=\"radio-volume-btn\"\n        id=\"radio-volume-btn\"\n        aria-label=\"Silenciar \/ Activar volumen\"\n        type=\"button\"\n      >\n        <span class=\"volume-icon\"><\/span>\n      <\/button>\n\n      <!-- SLIDER -->\n      <input\n        type=\"range\"\n        id=\"radio-volume-range\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.01\"\n        value=\"0.8\"\n      \/>\n    <\/div>\n  <\/div>\n\n  <!-- ===== ETIQUETA DE ESTADO ===== -->\n  \n  <div class=\"radio-status\" id=\"radio-status\">Detenido<\/div>\n\n  <!-- ===== AUDIO (CAMBIAR STREAM AQU\u00cd) ===== -->\n  <!-- CAMBIAR SOLO EL VALOR DE \"src\" PARA USAR TU STREAM -->\n  <!-- https:\/\/devnec.com:8001\/radio10 -->\n  \n  \n  <audio\n    id=\"radio-audio\"\n    preload=\"none\"\n    src=\"https:\/\/devnec.com:8001\/radio85\"\n  ><\/audio>\n<\/div>\n\n<style>\n  .radio-card {\n    width: 360px;\n    border-radius: 22px;\n    padding: 18px 22px;\n    box-sizing: border-box;\n    background: linear-gradient(135deg, #e3fff4 0%, #f4f7ff 45%, #ffe6f5 100%);\n    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15);\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    color: #1b2a3a;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .radio-logo-wrapper {\n    margin-top: 4px;\n    margin-bottom: 4px;\n  }\n\n  .radio-logo {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: #ffffff;\n    padding: 10px;\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .radio-logo svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .radio-name {\n    font-size: 16px;\n    font-weight: 600;\n    color: #00427b;\n    margin-top: 2px;\n    margin-bottom: 4px;\n  }\n\n  .radio-live {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 4px;\n  }\n\n  .badge-live {\n    font-size: 11px;\n    font-weight: 700;\n    padding: 2px 8px;\n    border-radius: 999px;\n    background: #ff1744;\n    color: #ffffff;\n  }\n\n  .live-dot {\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: #ff1744;\n    box-shadow: 0 0 6px rgba(255, 23, 68, 0.8);\n  }\n\n  .radio-controls {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    margin-top: 10px;\n  }\n\n  .radio-play-btn {\n    border: none;\n    background: #ffffff;\n    border-radius: 16px;\n    width: 64px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);\n    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;\n  }\n\n  .radio-play-btn:hover {\n    transform: translateY(-1px) scale(1.03);\n    filter: brightness(1.03);\n    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);\n  }\n\n  .radio-play-btn:active {\n    transform: translateY(1px) scale(0.97);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);\n  }\n\n  .play-icon {\n    width: 42px;\n    height: 42px;\n    border-radius: 50%;\n    background: #143a6e;\n    position: relative;\n  }\n\n  .play-icon::before {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-38%, -50%);\n    border-top: 9px solid transparent;\n    border-bottom: 9px solid transparent;\n    border-left: 15px solid #ffffff;\n  }\n\n  .radio-play-btn.is-playing .play-icon::before {\n    content: none;\n  }\n\n  .radio-play-btn.is-playing .play-icon::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 16px;\n    height: 16px;\n    transform: translate(-50%, -50%);\n    box-shadow: -4px 0 0 0 #ffffff, 4px 0 0 0 #ffffff;\n  }\n\n  .radio-volume-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .radio-volume-btn {\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    width: 26px;\n    height: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .volume-icon {\n    position: relative;\n    width: 16px;\n    height: 14px;\n  }\n\n  .volume-icon::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 4px;\n    width: 6px;\n    height: 6px;\n    border-radius: 2px;\n    background: #143a6e;\n  }\n\n  .volume-icon::after {\n    content: \"\";\n    position: absolute;\n    left: 6px;\n    top: 2px;\n    border-top: 5px solid transparent;\n    border-bottom: 5px solid transparent;\n    border-left: 8px solid #143a6e;\n  }\n\n  #radio-volume-range {\n    width: 110px;\n    -webkit-appearance: none;\n    height: 4px;\n    background: rgba(20, 58, 110, 0.2);\n    border-radius: 999px;\n  }\n\n  #radio-volume-range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    background: #143a6e;\n    box-shadow: 0 0 0 3px rgba(20, 58, 110, 0.3);\n  }\n\n  .radio-status {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #35506e;\n    opacity: 0.85;\n  }\n<\/style>\n\n<script>\n  (function () {\n    const audio = document.getElementById(\"radio-audio\");\n    const playBtn = document.getElementById(\"radio-play-btn\");\n    const status = document.getElementById(\"radio-status\");\n    const volumeBtn = document.getElementById(\"radio-volume-btn\");\n    const volumeRange = document.getElementById(\"radio-volume-range\");\n\n    let isPlaying = false;\n    let previousVolume = parseFloat(volumeRange.value) || 0.8;\n\n    \/\/ ===== PLAY \/ PAUSE =====\n    playBtn.addEventListener(\"click\", async () => {\n      try {\n        if (!isPlaying) {\n          await audio.play();\n          isPlaying = true;\n          playBtn.classList.add(\"is-playing\");\n          status.textContent = \"Reproduciendo\";\n        } else {\n          audio.pause();\n          isPlaying = false;\n          playBtn.classList.remove(\"is-playing\");\n          status.textContent = \"Pausado\";\n        }\n      } catch (err) {\n        console.error(err);\n        status.textContent = \"Error al reproducir\";\n      }\n    });\n\n    \/\/ ===== CUANDO TERMINA =====\n    audio.addEventListener(\"ended\", () => {\n      isPlaying = false;\n      playBtn.classList.remove(\"is-playing\");\n      status.textContent = \"Detenido\";\n    });\n\n    \/\/ ===== SLIDER DE VOLUMEN =====\n    volumeRange.addEventListener(\"input\", () => {\n      audio.volume = parseFloat(volumeRange.value);\n      previousVolume = audio.volume;\n    });\n\n    \/\/ ===== BOT\u00d3N MUTE \/ UNMUTE =====\n    volumeBtn.addEventListener(\"click\", () => {\n      if (audio.volume > 0) {\n        previousVolume = audio.volume;\n        audio.volume = 0;\n        volumeRange.value = 0;\n        status.textContent = isPlaying ? \"Reproduciendo (silenciado)\" : \"Silenciado\";\n      } else {\n        audio.volume = previousVolume || 0.8;\n        volumeRange.value = audio.volume;\n        status.textContent = isPlaying ? \"Reproduciendo\" : \"Pausado\";\n      }\n    });\n\n    \/\/ ===== VOLUMEN INICIAL =====\n    audio.volume = parseFloat(volumeRange.value) || 0.8;\n  })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Radio en VIVO ! LIVE Detenido<\/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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":2,"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/radioestiloformosa.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}