Auto commit: 2026-01-31T13:42:16.808Z

index.php

@@ -140,6 +140,7 @@ try {
       text-align: center;
       box-shadow: 0 25px 50px rgba(0,0,0,0.8);
       position: relative;
+      overflow: hidden;
     }
 
     .right-content {
@@ -257,6 +258,8 @@ try {
       animation: pulse 3s infinite;
       overflow: hidden;
       border: 4px solid rgba(255,255,255,0.25);
+      position: relative;
+      z-index: 2;
     }
 
     .radio-logo img {
@@ -283,6 +286,8 @@ try {
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
+      position: relative;
+      z-index: 2;
     }
 
     .btn-play:hover {
@@ -369,6 +374,29 @@ try {
       text-transform: uppercase;
       letter-spacing: 2px;
       box-shadow: 0 5px 15px rgba(255, 45, 85, 0.5);
+      z-index: 3;
+    }
+
+    /* Visualizer Canvas */
+    #visualizer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 120px;
+        z-index: 1;
+        opacity: 0.8;
+        pointer-events: none;
+    }
+
+    .song-info {
+        position: relative;
+        z-index: 2;
+    }
+
+    .player-controls-row {
+        position: relative;
+        z-index: 2;
     }
   </style>
 </head>
@@ -400,8 +428,10 @@ try {
                 </div>
             </div>
 
+            <canvas id="visualizer"></canvas>
+
             <?php if ($isAdmin): ?>
-            <div class="mt-4 pt-4 border-top border-white border-opacity-10">
+            <div class="mt-4 pt-4 border-top border-white border-opacity-10 position-relative" style="z-index: 2;">
                 <div class="mb-2 small text-primary fw-bold"><i class="fas fa-user-shield me-1"></i> PANEL ADMINISTRADOR</div>
                 <a href="?logout=1" class="btn btn-sm btn-outline-danger px-4 rounded-pill mt-2">Cerrar Sesión</a>
             </div>
@@ -557,16 +587,99 @@ try {
     const volumeSlider = document.getElementById('volumeSlider');
     const songTitle = document.getElementById('songTitle');
     const artistName = document.getElementById('artistName');
+    const canvas = document.getElementById('visualizer');
+    const ctx = canvas.getContext('2d');
 
     let isPlaying = false;
+    let audioContext;
+    let analyser;
+    let source;
+    let dataArray;
+    let animationId;
+
+    function initVisualizer() {
+        if (!audioContext) {
+            try {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioContext.createAnalyser();
+                source = audioContext.createMediaElementSource(audio);
+                source.connect(analyser);
+                analyser.connect(audioContext.destination);
+                analyser.fftSize = 256; 
+                const bufferLength = analyser.frequencyBinCount;
+                dataArray = new Uint8Array(bufferLength);
+            } catch (e) {
+                console.warn("Visualizer failed to init:", e);
+            }
+        }
+    }
+
+    function draw() {
+        animationId = requestAnimationFrame(draw);
+        if (!analyser) return;
+
+        analyser.getByteFrequencyData(dataArray);
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        const width = canvas.width;
+        const height = canvas.height;
+        
+        ctx.beginPath();
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = '#ff2d55';
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+
+        const sliceWidth = width / dataArray.length;
+        let x = 0;
+
+        for (let i = 0; i < dataArray.length; i++) {
+            const v = dataArray[i] / 128.0;
+            const y = (v * height) / 2;
+
+            if (i === 0) {
+                ctx.moveTo(x, height - y);
+            } else {
+                ctx.lineTo(x, height - y);
+            }
+
+            x += sliceWidth;
+        }
+
+        ctx.lineTo(canvas.width, height);
+        
+        // Fill area under the wave
+        const gradient = ctx.createLinearGradient(0, 0, 0, height);
+        gradient.addColorStop(0, 'rgba(255, 45, 85, 0.5)');
+        gradient.addColorStop(1, 'rgba(255, 45, 85, 0)');
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        
+        ctx.stroke();
+    }
+
+    function resizeCanvas() {
+        canvas.width = canvas.parentElement.offsetWidth;
+        canvas.height = 120;
+    }
+
+    window.addEventListener('resize', resizeCanvas);
+    resizeCanvas();
 
     playBtn.addEventListener('click', () => {
       if (isPlaying) {
         audio.pause();
         playIcon.classList.replace('fa-pause', 'fa-play');
+        if (animationId) cancelAnimationFrame(animationId);
       } else {
+        initVisualizer();
+        if (audioContext && audioContext.state === 'suspended') {
+            audioContext.resume();
+        }
         audio.play().catch(e => console.error("Error playing audio:", e));
         playIcon.classList.replace('fa-play', 'fa-pause');
+        draw();
       }
       isPlaying = !isPlaying;
     });