{"id":33,"date":"2018-12-24T19:58:56","date_gmt":"2018-12-24T19:58:56","guid":{"rendered":"http:\/\/www.radiopresidenteibanez.cl\/web\/?page_id=33"},"modified":"2025-12-27T00:15:21","modified_gmt":"2025-12-27T03:15:21","slug":"radio-online","status":"publish","type":"page","link":"https:\/\/www.radiopresidenteibanez.cl\/web\/radio-online\/","title":{"rendered":"RADIO ONLINE"},"content":{"rendered":"\n<div class=\"modern-radio-player\">\n    <div class=\"player-card\">\n        <!-- Encabezado del reproductor -->\n        <div class=\"player-header\">\n            <div class=\"radio-logo\">\n                <div class=\"radio-icon\">\ud83d\udcfb<\/div>\n                <div class=\"radio-waves\">\n                    <div class=\"wave\"><\/div>\n                    <div class=\"wave\"><\/div>\n                    <div class=\"wave\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"radio-info\">\n                <h2 class=\"radio-title\">Radio Presidente Iba\u00f1ez<\/h2>\n                <p class=\"radio-slogan\">Se\u00f1al en vivo 24\/7<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Controles principales -->\n        <div class=\"player-controls\">\n            <button class=\"control-btn btn-secondary\" id=\"stopBtn\" title=\"Detener\">\n                <span class=\"btn-icon\">\u23f9<\/span>\n            <\/button>\n            \n            <button class=\"control-btn btn-primary\" id=\"toggleBtn\" title=\"Reproducir\">\n                <span class=\"btn-icon\">\u25b6<\/span>\n            <\/button>\n            \n            <button class=\"control-btn btn-secondary\" id=\"muteBtn\" title=\"Silenciar\">\n                <span class=\"btn-icon\">\ud83d\udd0a<\/span>\n            <\/button>\n        <\/div>\n\n        <!-- Barra de progreso y tiempo -->\n        <div class=\"progress-container\">\n            <div class=\"time-display\">\n                <span id=\"currentTime\">&#8211;:&#8211;<\/span>\n                <span id=\"duration\">EN VIVO<\/span>\n            <\/div>\n            <div class=\"progress-bar\">\n                <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n                <div class=\"live-indicator\">\u25cf LIVE<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Control de volumen -->\n        <div class=\"volume-container\">\n            <span class=\"volume-icon\">\ud83d\udd0a<\/span>\n            <input type=\"range\" \n                   id=\"volumeControl\" \n                   class=\"volume-slider\" \n                   min=\"0\" \n                   max=\"100\" \n                   value=\"80\">\n            <span class=\"volume-percent\" id=\"volumePercent\">80%<\/span>\n        <\/div>\n\n        <!-- Estado y informaci\u00f3n -->\n        <div class=\"player-status\">\n            <div class=\"status-indicator\">\n                <div class=\"status-dot\" id=\"statusDot\"><\/div>\n                <span id=\"statusText\">Conectando&#8230;<\/span>\n            <\/div>\n            <div class=\"bitrate-info\">\n                <span class=\"info-badge\">MP3<\/span>\n                <span class=\"info-badge\">128kbps<\/span>\n                <span class=\"info-badge\">STREAM<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Audio element (oculto) -->\n        <audio id=\"radioStream\" \n               preload=\"none\" \n               crossorigin=\"anonymous\">\n            <source src=\"https:\/\/ibanez.servercl.com:8000\/ibanez\" type=\"audio\/mpeg\">\n            Tu navegador no soporta audio HTML5.\n        <\/audio>\n    <\/div>\n<\/div>\n\n<style>\n.modern-radio-player {\n    max-width: 420px;\n    margin: 30px auto;\n    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n}\n\n.player-card {\n    background: linear-gradient(145deg, #1e293b, #0f172a);\n    border-radius: 20px;\n    padding: 25px;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),\n                0 0 0 1px rgba(255, 255, 255, 0.1);\n    color: #f8fafc;\n    position: relative;\n    overflow: hidden;\n}\n\n.player-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);\n    border-radius: 20px 20px 0 0;\n}\n\n.player-header {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    margin-bottom: 30px;\n}\n\n.radio-logo {\n    position: relative;\n    width: 60px;\n    height: 60px;\n    background: linear-gradient(135deg, #3b82f6, #8b5cf6);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 28px;\n}\n\n.radio-waves {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 80px;\n    height: 80px;\n}\n\n.wave {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 2px solid rgba(59, 130, 246, 0.5);\n    border-radius: 50%;\n    animation: pulse 2s infinite;\n}\n\n.wave:nth-child(2) {\n    width: 60px;\n    height: 60px;\n    animation-delay: 0.5s;\n}\n\n.wave:nth-child(3) {\n    width: 80px;\n    height: 80px;\n    animation-delay: 1s;\n}\n\n@keyframes pulse {\n    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }\n}\n\n.radio-info {\n    flex: 1;\n}\n\n.radio-title {\n    margin: 0;\n    font-size: 1.5rem;\n    font-weight: 700;\n    background: linear-gradient(90deg, #60a5fa, #a78bfa);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n.radio-slogan {\n    margin: 5px 0 0;\n    font-size: 0.9rem;\n    color: #94a3b8;\n}\n\n.player-controls {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 20px;\n    margin: 25px 0;\n}\n\n.control-btn {\n    width: 56px;\n    height: 56px;\n    border: none;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    font-size: 24px;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    position: relative;\n    overflow: hidden;\n}\n\n.control-btn::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 50%;\n    transform: translate(-50%, -50%) scale(0);\n    transition: transform 0.3s;\n}\n\n.control-btn:active::after {\n    transform: translate(-50%, -50%) scale(1);\n}\n\n.btn-primary {\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\n    color: white;\n    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);\n    width: 64px;\n    height: 64px;\n    font-size: 28px;\n}\n\n.btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 12px 25px rgba(59, 130, 246, 0.4);\n}\n\n.btn-secondary {\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(10px);\n    color: #cbd5e1;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.btn-secondary:hover {\n    background: rgba(255, 255, 255, 0.15);\n    transform: translateY(-2px);\n}\n\n.progress-container {\n    margin: 25px 0;\n}\n\n.time-display {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.85rem;\n    color: #94a3b8;\n    margin-bottom: 8px;\n}\n\n.progress-bar {\n    height: 6px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 3px;\n    position: relative;\n    overflow: hidden;\n}\n\n.progress-fill {\n    height: 100%;\n    background: linear-gradient(90deg, #3b82f6, #8b5cf6);\n    border-radius: 3px;\n    width: 0%;\n    transition: width 0.1s;\n}\n\n.live-indicator {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    background: #ef4444;\n    color: white;\n    font-size: 0.7rem;\n    padding: 2px 8px;\n    border-radius: 10px;\n    animation: livePulse 2s infinite;\n}\n\n@keyframes livePulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n}\n\n.volume-container {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 25px 0;\n    padding: 15px;\n    background: rgba(255, 255, 255, 0.05);\n    border-radius: 12px;\n}\n\n.volume-icon {\n    font-size: 20px;\n    color: #60a5fa;\n}\n\n.volume-slider {\n    flex: 1;\n    height: 6px;\n    -webkit-appearance: none;\n    appearance: none;\n    background: linear-gradient(90deg, #3b82f6, #8b5cf6);\n    border-radius: 3px;\n    outline: none;\n}\n\n.volume-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 20px;\n    height: 20px;\n    background: white;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n}\n\n.volume-percent {\n    min-width: 40px;\n    text-align: right;\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: #60a5fa;\n}\n\n.player-status {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-top: 20px;\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.status-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #64748b;\n    transition: background 0.3s;\n}\n\n.status-dot.connecting { animation: blink 1.5s infinite; }\n.status-dot.playing { background: #10b981; }\n.status-dot.paused { background: #f59e0b; }\n.status-dot.error { background: #ef4444; }\n\n@keyframes blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.3; }\n}\n\n#statusText {\n    font-size: 0.9rem;\n    color: #cbd5e1;\n}\n\n.bitrate-info {\n    display: flex;\n    gap: 8px;\n}\n\n.info-badge {\n    padding: 4px 10px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 12px;\n    font-size: 0.75rem;\n    color: #94a3b8;\n}\n\n\/* Estados del reproductor *\/\n.playing .radio-waves .wave {\n    animation-play-state: running;\n}\n\n.paused .radio-waves .wave {\n    animation-play-state: paused;\n}\n\n\/* Responsive *\/\n@media (max-width: 480px) {\n    .player-card {\n        padding: 20px;\n    }\n    \n    .player-header {\n        flex-direction: column;\n        text-align: center;\n    }\n    \n    .radio-info {\n        text-align: center;\n    }\n    \n    .player-controls {\n        gap: 15px;\n    }\n    \n    .player-status {\n        flex-direction: column;\n        gap: 15px;\n        align-items: flex-start;\n    }\n}\n<\/style>\n\n<script>\nclass ModernRadioPlayer {\n    constructor() {\n        this.audio = document.getElementById('radioStream');\n        this.isPlaying = false;\n        this.isMuted = false;\n        this.lastVolume = 80;\n        this.init();\n    }\n\n    init() {\n        this.bindElements();\n        this.setupEventListeners();\n        this.setupAudioEvents();\n        this.updateVisualizer();\n    }\n\n    bindElements() {\n        this.elements = {\n            toggleBtn: document.getElementById('toggleBtn'),\n            stopBtn: document.getElementById('stopBtn'),\n            muteBtn: document.getElementById('muteBtn'),\n            volumeControl: document.getElementById('volumeControl'),\n            volumePercent: document.getElementById('volumePercent'),\n            statusDot: document.getElementById('statusDot'),\n            statusText: document.getElementById('statusText'),\n            progressFill: document.getElementById('progressFill'),\n            currentTime: document.getElementById('currentTime')\n        };\n    }\n\n    setupEventListeners() {\n        \/\/ Bot\u00f3n play\/pause\n        this.elements.toggleBtn.addEventListener('click', () => this.togglePlay());\n        \n        \/\/ Bot\u00f3n stop\n        this.elements.stopBtn.addEventListener('click', () => this.stop());\n        \n        \/\/ Bot\u00f3n mute\n        this.elements.muteBtn.addEventListener('click', () => this.toggleMute());\n        \n        \/\/ Control de volumen\n        this.elements.volumeControl.addEventListener('input', (e) => {\n            const volume = parseInt(e.target.value);\n            this.setVolume(volume);\n            this.elements.volumePercent.textContent = `${volume}%`;\n            \n            \/\/ Actualizar \u00edcono del bot\u00f3n de mute\n            if (volume === 0) {\n                this.elements.muteBtn.querySelector('.btn-icon').textContent = '\ud83d\udd07';\n            } else {\n                this.elements.muteBtn.querySelector('.btn-icon').textContent = '\ud83d\udd0a';\n            }\n        });\n        \n        \/\/ Intentar reproducir autom\u00e1ticamente\n        setTimeout(() => {\n            this.audio.play().catch(e => {\n                console.log('Autoplay bloqueado:', e);\n                this.updateStatus('Esperando interacci\u00f3n...', 'paused');\n            });\n        }, 1000);\n    }\n\n    setupAudioEvents() {\n        this.audio.addEventListener('play', () => {\n            this.isPlaying = true;\n            this.updateUIState();\n            this.updateStatus('Reproduciendo en vivo', 'playing');\n        });\n\n        this.audio.addEventListener('pause', () => {\n            this.isPlaying = false;\n            this.updateUIState();\n            this.updateStatus('Pausado', 'paused');\n        });\n\n        this.audio.addEventListener('ended', () => {\n            this.updateStatus('Transmisi\u00f3n finalizada', 'paused');\n        });\n\n        this.audio.addEventListener('error', (e) => {\n            console.error('Error de audio:', e);\n            this.updateStatus('Error de conexi\u00f3n', 'error');\n        });\n\n        this.audio.addEventListener('waiting', () => {\n            this.updateStatus('Buffering...', 'connecting');\n        });\n\n        this.audio.addEventListener('canplay', () => {\n            if (this.isPlaying) {\n                this.updateStatus('Reproduciendo en vivo', 'playing');\n            }\n        });\n\n        \/\/ Simulaci\u00f3n de progreso para stream en vivo\n        setInterval(() => {\n            if (this.isPlaying) {\n                const now = new Date();\n                this.elements.currentTime.textContent = \n                    now.getHours().toString().padStart(2, '0') + ':' + \n                    now.getMinutes().toString().padStart(2, '0');\n                \n                \/\/ Efecto de barra de progreso \"viva\"\n                this.elements.progressFill.style.width = \n                    `${(now.getSeconds() % 60) * 100 \/ 60}%`;\n            }\n        }, 1000);\n    }\n\n    togglePlay() {\n        if (this.isPlaying) {\n            this.audio.pause();\n        } else {\n            this.audio.play().catch(e => {\n                console.log('Error al reproducir:', e);\n                this.updateStatus('Click para reproducir', 'paused');\n            });\n        }\n    }\n\n    stop() {\n        this.audio.pause();\n        this.audio.currentTime = 0;\n        this.isPlaying = false;\n        this.updateUIState();\n        this.updateStatus('Detenido', 'paused');\n    }\n\n    toggleMute() {\n        if (this.isMuted) {\n            this.audio.volume = this.lastVolume \/ 100;\n            this.elements.volumeControl.value = this.lastVolume;\n            this.elements.volumePercent.textContent = `${this.lastVolume}%`;\n            this.elements.muteBtn.querySelector('.btn-icon').textContent = '\ud83d\udd0a';\n        } else {\n            this.lastVolume = this.audio.volume * 100;\n            this.audio.volume = 0;\n            this.elements.volumeControl.value = 0;\n            this.elements.volumePercent.textContent = '0%';\n            this.elements.muteBtn.querySelector('.btn-icon').textContent = '\ud83d\udd07';\n        }\n        this.isMuted = !this.isMuted;\n    }\n\n    setVolume(percent) {\n        const volume = percent \/ 100;\n        this.audio.volume = volume;\n        this.isMuted = volume === 0;\n        \n        if (volume > 0) {\n            this.lastVolume = percent;\n            this.elements.muteBtn.querySelector('.btn-icon').textContent = '\ud83d\udd0a';\n        } else {\n            this.elements.muteBtn.querySelector('.btn-icon').textContent = '\ud83d\udd07';\n        }\n    }\n\n    updateUIState() {\n        const icon = this.elements.toggleBtn.querySelector('.btn-icon');\n        const playerCard = document.querySelector('.player-card');\n        \n        if (this.isPlaying) {\n            icon.textContent = '\u23f8';\n            this.elements.toggleBtn.title = 'Pausar';\n            playerCard.classList.add('playing');\n            playerCard.classList.remove('paused');\n        } else {\n            icon.textContent = '\u25b6';\n            this.elements.toggleBtn.title = 'Reproducir';\n            playerCard.classList.add('paused');\n            playerCard.classList.remove('playing');\n        }\n    }\n\n    updateStatus(text, state) {\n        this.elements.statusText.textContent = text;\n        \n        \/\/ Actualizar clases del estado\n        const states = ['connecting', 'playing', 'paused', 'error'];\n        states.forEach(s => this.elements.statusDot.classList.remove(s));\n        \n        if (state) {\n            this.elements.statusDot.classList.add(state);\n        }\n    }\n\n    updateVisualizer() {\n        \/\/ Crear contexto de audio para visualizaci\u00f3n\n        const AudioContext = window.AudioContext || window.webkitAudioContext;\n        if (AudioContext) {\n            try {\n                const audioContext = new AudioContext();\n                const source = audioContext.createMediaElementSource(this.audio);\n                const analyser = audioContext.createAnalyser();\n                \n                source.connect(analyser);\n                analyser.connect(audioContext.destination);\n                \n                \/\/ Configurar analizador\n                analyser.fftSize = 256;\n                const bufferLength = analyser.frequencyBinCount;\n                const dataArray = new Uint8Array(bufferLength);\n                \n                \/\/ Funci\u00f3n para dibujar el visualizador\n                const draw = () => {\n                    requestAnimationFrame(draw);\n                    \n                    analyser.getByteFrequencyData(dataArray);\n                    \n                    \/\/ Aqu\u00ed podr\u00edas actualizar una visualizaci\u00f3n gr\u00e1fica\n                    \/\/ Por ahora solo mantenemos el efecto de ondas\n                };\n                \n                draw();\n            } catch (e) {\n                console.log('Visualizador no disponible:', e);\n            }\n        }\n    }\n}\n\n\/\/ Inicializar el reproductor cuando el DOM est\u00e9 listo\ndocument.addEventListener('DOMContentLoaded', () => {\n    new ModernRadioPlayer();\n});\n\n\/\/ Manejar visibilidad de la p\u00e1gina\ndocument.addEventListener('visibilitychange', () => {\n    if (document.hidden) {\n        \/\/ Pausar cuando la pesta\u00f1a no est\u00e1 visible\n        const audio = document.getElementById('radioStream');\n        if (audio && !audio.paused) {\n            audio.pause();\n        }\n    }\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcfb Radio Presidente Iba\u00f1ez Se\u00f1al en vivo 24\/7 \u23f9 \u25b6 \ud83d\udd0a &#8211;:&#8211; EN VIVO \u25cf LIVE \ud83d\udd0a 80% Conectando&#8230; MP3 128kbps STREAM Tu navegador no soporta audio HTML5.<\/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-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":0,"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.radiopresidenteibanez.cl\/web\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}