Auto commit: 2026-02-15T14:31:12.994Z

index.php

@@ -171,15 +171,36 @@ $whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_numbe
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: transform 0.2s, background 0.2s;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
         }
 
+        .play-btn.playing {
+            background: #ff4444 !important;
+            box-shadow: 0 4px 20px rgba(255, 68, 68, 0.5);
+            transform: scale(1.1);
+        }
+
         .play-btn:hover {
             transform: scale(1.05);
             background: #0ea5e9;
         }
 
+        .visualizer-container {
+            width: 100%;
+            height: 60px;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        #visualizer {
+            width: 100%;
+            height: 100%;
+        }
+
         .volume-slider {
             flex: 1;
             height: 6px;
@@ -389,11 +410,15 @@ $whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_numbe
                 </header>
 
                 <div class="radio-player">
+                    <div class="visualizer-container">
+                        <canvas id="visualizer"></canvas>
+                    </div>
                     <div class="now-playing">
                         <i class="bi bi-broadcast"></i>
                         <div class="track-info">
                             <div class="track-status">EN VIVO</div>
                             <div id="track-title" class="track-title">Cargando stream...</div>
+                        </div>
                     </div>
 
                     <div class="controls">
@@ -443,23 +468,80 @@ $whatsapp_link = "https://wa.me/" . preg_replace('/[^0-9]/', '', $whatsapp_numbe
         <i class="bi bi-whatsapp"></i>
     </a>
 
-    <audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="none"></audio>
+    <audio id="radio-audio" src="https://listen.radioking.com/radio/828046/stream/897251" preload="none" crossorigin="anonymous"></audio>
 
     <script>
         const audio = document.getElementById('radio-audio');
         const playBtn = document.getElementById('play-pause');
         const playIcon = document.getElementById('play-icon');
         const trackTitle = document.getElementById('track-title');
+        const canvas = document.getElementById('visualizer');
+        const ctx = canvas.getContext('2d');
+
+        let audioCtx;
+        let analyzer;
+        let source;
+        let animationId;
+
+        function initVisualizer() {
+            if (audioCtx) return;
+            
+            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            analyzer = audioCtx.createAnalyser();
+            source = audioCtx.createMediaElementSource(audio);
+            source.connect(analyzer);
+            analyzer.connect(audioCtx.destination);
+            
+            analyzer.fftSize = 64;
+            const bufferLength = analyzer.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+
+            function draw() {
+                animationId = requestAnimationFrame(draw);
+                analyzer.getByteFrequencyData(dataArray);
+
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+                const barWidth = (canvas.width / bufferLength) * 2.5;
+                let barHeight;
+                let x = 0;
+
+                for (let i = 0; i < bufferLength; i++) {
+                    barHeight = dataArray[i] / 2;
+                    
+                    // Create gradient for bars
+                    const gradient = ctx.createLinearGradient(0, canvas.height, 0, 0);
+                    gradient.addColorStop(0, '#38bdf8');
+                    gradient.addColorStop(1, '#ff4444');
+
+                    ctx.fillStyle = gradient;
+                    ctx.fillRect(x, canvas.height - barHeight, barWidth - 2, barHeight);
+
+                    x += barWidth;
+                }
+            }
+            draw();
+        }
 
         function togglePlay() {
+            if (audioCtx && audioCtx.state === 'suspended') {
+                audioCtx.resume();
+            }
+
             if (audio.paused) {
+                initVisualizer();
                 audio.play();
                 playIcon.classList.remove('bi-play-fill');
                 playIcon.classList.add('bi-pause-fill');
+                playBtn.classList.add('playing');
             } else {
                 audio.pause();
                 playIcon.classList.remove('bi-pause-fill');
                 playIcon.classList.add('bi-play-fill');
+                playBtn.classList.remove('playing');
             }
         }