Spaces:

Merlintxu
/

video-audio

Running

App Files Files Community

Merlintxu commited on Apr 23

Commit

baf2169

verified ·

1 Parent(s): 2a72ea4

Update index.html

Browse files

Files changed (1) hide show

index.html +336 -153

index.html CHANGED Viewed

@@ -3,42 +3,48 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Reactivo al Audio Mejorado</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         /* Estilos personalizados que complementan Tailwind */
-        .video-container {
-            position: relative;
-            width: 100%;
-            max-width: 800px; /* Ancho máximo para el contenedor del video */
-            margin: 0 auto; /* Centrar el contenedor */
-            overflow: hidden;
-            border-radius: 8px; /* Bordes redondeados */
-            /* Transiciones suaves para los efectos visuales */
-            transition: filter 0.3s ease-out, transform 0.3s ease-out;
         }
-        .glitch-effect {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            /* Usar una imagen o patrón para el efecto glitch */
-            background: url('https://getsamplefiles.com/download/webm/sample-2.webm'); /* Podría ser un patrón o ruido */
-            background-size: cover;
-            mix-blend-mode: screen; /* Modo de mezcla para el efecto */
-            opacity: 0; /* Inicialmente invisible */
-            transition: opacity 0.1s ease-in-out; /* Transición para la opacidad */
         }
-        /* Variaciones para las capas del efecto glitch */
-        .glitch-effect:nth-child(2) {
-            transform: translate(2px, -2px);
         }
-        .glitch-effect:nth-child(3) {
-            transform: translate(-2px, 2px);
         }
         .visualizer {
@@ -96,8 +102,9 @@
         /* Estilos responsivos con Media Queries personalizadas si es necesario */
         @media (max-width: 640px) { /* Ejemplo de breakpoint para móviles */
-            .video-container {
-                border-radius: 4px; /* Bordes menos redondeados en pantallas pequeñas */
             }
             .visualizer {
@@ -116,18 +123,14 @@
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
     <div class="text-center mb-8">
-        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2">Video Reactivo al Audio</h1>
-        <p class="text-gray-300 text-sm sm:text-base">Conecta tu micrófono y observa cómo el video reacciona a las frecuencias de tu voz</p>
     </div>
-    <div class="video-container" id="videoContainer">
-        <video id="video" class="w-full h-auto block" loop muted playsinline> <source src="https://getsamplefiles.com/download/webm/sample-2.webm" type="video/webm">
-            Tu navegador no soporta el elemento de video.
-        </video>
-        <div class="glitch-effect"></div>
-        <div class="glitch-effect"></div>
-        <div class="glitch-effect"></div>
-    </div>
     <div class="controls w-full max-w-sm sm:max-w-md lg:max-w-lg mt-8">
         <div class="frequency-label">
@@ -150,20 +153,43 @@
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            const video = document.getElementById('video');
-            const videoContainer = document.getElementById('videoContainer');
             const startButton = document.getElementById('startButton');
             const visualizer = document.getElementById('visualizer');
             const statusText = document.getElementById('status');
-            let audioContext = null; // Inicializado a null
             let analyser = null;
             let microphone = null;
             let dataArray = null;
             let isPlaying = false;
             // Crear barras del visualizador dinámicamente
-            const numberOfBars = 64; // Número de barras para el visualizador
             for (let i = 0; i < numberOfBars; i++) {
                 const bar = document.createElement('div');
                 bar.className = 'bar';
@@ -171,11 +197,10 @@
             }
             const bars = document.querySelectorAll('.bar');
-            // Inicializar el video
-            video.play().catch(error => {
-                console.error('Error al intentar reproducir el video automáticamente:', error);
-                // Manejar el error si la reproducción automática falla (ej. por políticas del navegador)
-                // No cambiamos el statusText aquí para no sobrescribir el mensaje de "Esperando permiso..."
             });
@@ -186,46 +211,41 @@
                         statusText.textContent = 'Solicitando acceso al micrófono...';
                         await initAudio();
                         startButton.textContent = 'Micrófono Activado';
-                        // Cambiar colores del botón usando clases de Tailwind
                         startButton.classList.remove('bg-blue-600', 'hover:bg-blue-700', 'pulse');
                         startButton.classList.add('bg-green-600', 'hover:bg-green-700');
-                        statusText.textContent = 'Micrófono activado. Habla o reproduce música para ver los efectos.';
                         isPlaying = true;
-                        // Si el video no se reprodujo automáticamente, intentar reproducirlo ahora
-                         video.play().catch(error => {
-                            console.error('Error al intentar reproducir el video tras activar micrófono:', error);
-                            // No cambiamos el statusText aquí para no sobrescribir el mensaje de éxito del micrófono
                         });
                     }
                 } catch (err) {
-                    // --- Inicio de la sección de manejo de errores mejorado ---
-                    console.error('Error completo al inicializar el audio:', err); // Loguear el objeto de error completo
                     let userMessage = 'Error desconocido al acceder al micrófono.';
                     if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
                         userMessage = 'Permiso de micrófono denegado. Por favor, permite el acceso al micrófono en la configuración de tu navegador.';
                     } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
                         userMessage = 'No se encontró ningún micrófono. Asegúrate de que uno esté conectado y configurado correctamente.';
                     } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
                         userMessage = 'El micrófono está en uso por otra aplicación o hay un problema de hardware.';
-                    } else if (err.name === 'OverconstrainedError' || err.name === 'ConstraintNotSatisfiedError') {
-                         userMessage = 'Error de configuración del micrófono. Intenta con la configuración predeterminada.';
                     } else if (err.name === 'SecurityError') {
                          userMessage = 'Se requiere una conexión segura (HTTPS) para acceder al micrófono.';
                     } else if (err.message) {
-                        // Si hay un mensaje de error estándar, lo usamos
                         userMessage = `Error al acceder al micrófono: ${err.message}.`;
                     } else {
-                         // Último recurso: intentar stringify el error si no tiene nombre o mensaje
                         userMessage = `Error al acceder al micrófono: ${typeof err === 'object' ? JSON.stringify(err) : err}.`;
                     }
-                    statusText.textContent = userMessage; // Mostrar el mensaje específico al usuario
-                    // --- Fin de la sección de manejo de errores mejorado ---
                     startButton.classList.remove('bg-green-600', 'hover:bg-green-700');
                     startButton.classList.add('bg-red-600', 'hover:bg-red-700');
                     startButton.textContent = 'Error de Micrófono';
@@ -234,152 +254,302 @@
             // Función para inicializar el AudioContext y conectar el micrófono
             async function initAudio() {
-                // Crear AudioContext si no existe
                 if (!audioContext) {
                     audioContext = new (window.AudioContext || window.webkitAudioContext)();
                 }
-                // Crear analizador
                 analyser = audioContext.createAnalyser();
-                analyser.fftSize = 128; // Tamaño del FFT, afecta la granularidad de las frecuencias
-                // Solicitar acceso al micrófono
                 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                 microphone = audioContext.createMediaStreamSource(stream);
-                microphone.connect(analyser); // Conectar el micrófono al analizador
-                // Preparar array para los datos de frecuencia
-                dataArray = new Uint8Array(analyser.frequencyBinCount); // analyser.frequencyBinCount es la mitad del fftSize
                 // Iniciar el procesamiento de audio
                 processAudio();
             }
-            // Bucle principal para procesar el audio y actualizar la visualización/efectos
             function processAudio() {
                 if (!analyser || !isPlaying) {
-                     // Si el analizador no está listo o no estamos reproduciendo, salir
-                    requestAnimationFrame(processAudio); // Seguir intentando en el siguiente frame
                     return;
                 }
-                // Obtener los datos de frecuencia
                 analyser.getByteFrequencyData(dataArray);
-                // Dividir las frecuencias en bandas (aproximadas)
-                // Los índices dependen del fftSize y sampleRate del AudioContext
-                const lowFreq = getAverageVolume(dataArray, 0, Math.floor(dataArray.length * 0.1));    // Graves (aprox. 0-200 Hz)
-                const midFreq = getAverageVolume(dataArray, Math.floor(dataArray.length * 0.1), Math.floor(dataArray.length * 0.4));   // Medios (aprox. 200-1000 Hz)
-                const highFreq = getAverageVolume(dataArray, Math.floor(dataArray.length * 0.4), dataArray.length - 1); // Agudos (aprox. 1000+ Hz)
-                // Aplicar efectos visuales basados en las frecuencias
-                applyLowFrequencyEffect(lowFreq);
-                applyMidFrequencyEffect(midFreq);
-                applyHighFrequencyEffect(highFreq);
                 // Actualizar el visualizador de barras
                 updateVisualizer(dataArray);
-                // Continuar el bucle en el siguiente frame de animación
                 requestAnimationFrame(processAudio);
             }
             // Calcula el volumen promedio en un rango de datos
             function getAverageVolume(data, start, end) {
                 let sum = 0;
                 for (let i = start; i <= end; i++) {
-                    sum += data[i] || 0; // Sumar valores, usar 0 si el índice es inválido
                 }
-                return sum / (end - start + 1);
             }
-            // Aplica efectos basados en las frecuencias graves
-            function applyLowFrequencyEffect(value) {
-                // Los graves cambian el tono y el brillo general
-                const intensity = value / 255; // Normalizar el valor entre 0 y 1
-                // Ajustar la intensidad del filtro para que sea más notable
-                const hue = intensity * 180; // Rotación de tono hasta 180 grados
-                const brightness = 1 + intensity * 0.5; // Brillo hasta 1.5
-                video.style.filter = `hue-rotate(${hue}deg) brightness(${brightness})`;
-            }
-            let lastMidValue = 0; // Para detectar cambios en la frecuencia media
-            // Aplica efectos basados en las frecuencias medias
-            function applyMidFrequencyEffect(value) {
-                // Los medios controlan la rotación
-                const threshold = 10; // Umbral para detectar un cambio significativo
-                const maxRotation = 10; // Rotación máxima en grados
-                const diff = value - lastMidValue;
-                lastMidValue = value;
-                let rotation = 0;
-                if (diff > threshold) {
-                    rotation = maxRotation; // Rotación positiva si sube
-                } else if (diff < -threshold) {
-                    rotation = -maxRotation; // Rotación negativa si baja
-                }
-                // Aplicar la rotación al contenedor del video
-                videoContainer.style.transform = `rotate(${rotation}deg)`;
-            }
-            // Aplica efectos basados en las frecuencias agudas
-            function applyHighFrequencyEffect(value) {
-                // Los agudos activan el efecto glitch
-                const glitchEffects = document.querySelectorAll('.glitch-effect');
-                const activationThreshold = 100; // Umbral para activar el glitch
-                if (value > activationThreshold) {
-                    const intensity = (value - activationThreshold) / (255 - activationThreshold); // Normalizar por encima del umbral
-                     glitchEffects.forEach((effect, index) => {
-                        // Aumentar la opacidad y aplicar un desplazamiento aleatorio basado en la intensidad
-                        effect.style.opacity = intensity * 0.6; // Opacidad máxima del 60%
-                        const maxOffset = intensity * 20; // Desplazamiento máximo basado en la intensidad
-                        effect.style.transform = `translate(${(Math.random() - 0.5) * maxOffset}px, ${(Math.random() - 0.5) * maxOffset}px)`;
-                    });
-                     // Añadir un pequeño efecto de contraste o saturación con los agudos
-                     video.style.filter += ` contrast(${1 + intensity * 0.2}) saturate(${1 + intensity * 0.3})`;
-                } else {
-                    // Desactivar el glitch si los agudos están por debajo del umbral
-                     glitchEffects.forEach(effect => {
-                        effect.style.opacity = 0;
-                    });
-                     // Asegurarse de que los filtros de contraste/saturación vuelvan a la normalidad (se maneja en applyLowFrequencyEffect)
-                }
             }
             // Actualiza la altura y color de las barras del visualizador
             function updateVisualizer(data) {
-                const barWidth = visualizer.offsetWidth / numberOfBars; // Calcular ancho de barra dinámicamente
                  bars.forEach((bar, i) => {
-                    // Mapear los datos de frecuencia a las barras
                     const dataIndex = Math.floor(i * (data.length / numberOfBars));
-                    const value = data[dataIndex] || 0; // Obtener valor, usar 0 si no hay datos
-                    // Calcular la altura de la barra (escalada)
                     const maxHeight = visualizer.offsetHeight;
-                    const height = `${(value / 255) * maxHeight}px`; // Escalar la altura al 100% de la altura del visualizador
                     bar.style.height = height;
-                    bar.style.width = `${barWidth - 1}px`; // Ajustar ancho y restar margen
-                    // Asignar colores basados en la posición (frecuencia) de la barra
-                    if (i < numberOfBars / 3) {
-                        // Graves - azul
                         bar.style.background = `linear-gradient(to top, #60a5fa, #3b82f6)`;
-                    } else if (i < (numberOfBars * 2) / 3) {
-                        // Medios - morado
                         bar.style.background = `linear-gradient(to top, #c084fc, #9333ea)`;
                     } else {
-                        // Agudos - rosa/rojo
                         bar.style.background = `linear-gradient(to top, #f472b6, #ec4899)`;
                     }
                 });
             }
-             // Limpieza al cerrar la página (opcional pero recomendado en aplicaciones más grandes)
             window.addEventListener('beforeunload', () => {
                 if (microphone) {
                     microphone.disconnect();
@@ -387,7 +557,20 @@
                 if (audioContext) {
                     audioContext.close();
                 }
             });
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Reactivo en Cuadrícula</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         /* Estilos personalizados que complementan Tailwind */
+        body {
+            background-color: #1a202c; /* Fondo oscuro */
+            color: #e2e8f0; /* Texto claro */
+            font-family: sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 20px;
+            overflow-x: hidden; /* Prevenir scroll horizontal */
         }
+        h1, p {
+            text-align: center;
         }
+        /* Contenedor de la cuadrícula */
+        .grid-container {
+            display: grid;
+            /* Definir una cuadrícula de 4x4 */
+            grid-template-columns: repeat(4, 1fr);
+            grid-template-rows: repeat(4, 1fr);
+            gap: 5px; /* Espacio entre las celdas de la cuadrícula */
+            width: 100%;
+            max-width: 800px; /* Ancho máximo similar al contenedor de video anterior */
+            margin: 20px auto; /* Centrar con margen */
+            aspect-ratio: 16 / 9; /* Mantener una relación de aspecto común de video */
+            border-radius: 8px;
+            overflow: hidden; /* Asegurar que los bordes redondeados se apliquen */
         }
+        /* Estilo para cada celda de la cuadrícula (canvas) */
+        .grid-cell {
+            width: 100%;
+            height: 100%;
+            background-color: #2d3748; /* Color de fondo por si el video no carga */
+            transition: transform 0.2s ease-out, filter 0.2s ease-out; /* Transiciones para efectos */
         }
         .visualizer {
         /* Estilos responsivos con Media Queries personalizadas si es necesario */
         @media (max-width: 640px) { /* Ejemplo de breakpoint para móviles */
+            .grid-container {
+                gap: 2px; /* Menor espacio en pantallas pequeñas */
+                border-radius: 4px;
             }
             .visualizer {
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
     <div class="text-center mb-8">
+        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2">Video Reactivo en Cuadrícula</h1>
+        <p class="text-gray-300 text-sm sm:text-base">Observa cómo cada sección del video reacciona a la música</p>
     </div>
+    <video id="videoSource" src="https://getsamplefiles.com/download/webm/sample-2.webm" loop muted playsinline class="hidden"></video>
+    <div class="grid-container" id="gridContainer">
+        </div>
     <div class="controls w-full max-w-sm sm:max-w-md lg:max-w-lg mt-8">
         <div class="frequency-label">
     <script>
         document.addEventListener('DOMContentLoaded', () => {
+            const videoSource = document.getElementById('videoSource');
+            const gridContainer = document.getElementById('gridContainer');
             const startButton = document.getElementById('startButton');
             const visualizer = document.getElementById('visualizer');
             const statusText = document.getElementById('status');
+            let audioContext = null;
             let analyser = null;
             let microphone = null;
             let dataArray = null;
             let isPlaying = false;
+            const gridRows = 4;
+            const gridCols = 4;
+            const totalCells = gridRows * gridCols;
+            const canvasElements = []; // Array para almacenar los elementos canvas
+            const canvasContexts = []; // Array para almacenar los contextos 2D
+            // Crear las celdas de la cuadrícula (elementos canvas)
+            function createGridCells() {
+                gridContainer.innerHTML = ''; // Limpiar contenedor por si acaso
+                for (let i = 0; i < totalCells; i++) {
+                    const canvas = document.createElement('canvas');
+                    canvas.classList.add('grid-cell');
+                    // Establecer tamaño inicial para que CSS pueda escalarlos
+                    canvas.width = 200; // Tamaño arbitrario, se ajustará con CSS y drawImage
+                    canvas.height = 112; // Mantener relación de aspecto 16:9
+                    gridContainer.appendChild(canvas);
+                    canvasElements.push(canvas);
+                    canvasContexts.push(canvas.getContext('2d'));
+                }
+            }
+            createGridCells(); // Crear la cuadrícula al cargar la página
             // Crear barras del visualizador dinámicamente
+            const numberOfBars = 64;
             for (let i = 0; i < numberOfBars; i++) {
                 const bar = document.createElement('div');
                 bar.className = 'bar';
             }
             const bars = document.querySelectorAll('.bar');
+            // Intentar reproducir el video fuente (oculto)
+            videoSource.play().catch(error => {
+                console.error('Error al intentar reproducir el video fuente automáticamente:', error);
+                // El video se iniciará al activar el micrófono si falla aquí
             });
                         statusText.textContent = 'Solicitando acceso al micrófono...';
                         await initAudio();
                         startButton.textContent = 'Micrófono Activado';
                         startButton.classList.remove('bg-blue-600', 'hover:bg-blue-700', 'pulse');
                         startButton.classList.add('bg-green-600', 'hover:bg-green-700');
+                        statusText.textContent = 'Micrófono activado. Observa la cuadrícula.';
                         isPlaying = true;
+                        // Asegurarse de que el video fuente esté reproduciéndose
+                         videoSource.play().catch(error => {
+                            console.error('Error al intentar reproducir el video fuente tras activar micrófono:', error);
+                            // Mensaje al usuario si el video no inicia
+                            statusText.textContent = 'Micrófono activado, pero no se pudo reproducir el video. Intenta recargar la página.';
                         });
+                        // Iniciar el bucle de renderizado del canvas
+                        renderGrid();
                     }
                 } catch (err) {
+                    console.error('Error completo al inicializar el audio:', err);
                     let userMessage = 'Error desconocido al acceder al micrófono.';
                     if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
                         userMessage = 'Permiso de micrófono denegado. Por favor, permite el acceso al micrófono en la configuración de tu navegador.';
                     } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
                         userMessage = 'No se encontró ningún micrófono. Asegúrate de que uno esté conectado y configurado correctamente.';
                     } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
                         userMessage = 'El micrófono está en uso por otra aplicación o hay un problema de hardware.';
                     } else if (err.name === 'SecurityError') {
                          userMessage = 'Se requiere una conexión segura (HTTPS) para acceder al micrófono.';
                     } else if (err.message) {
                         userMessage = `Error al acceder al micrófono: ${err.message}.`;
                     } else {
                         userMessage = `Error al acceder al micrófono: ${typeof err === 'object' ? JSON.stringify(err) : err}.`;
                     }
+                    statusText.textContent = userMessage;
                     startButton.classList.remove('bg-green-600', 'hover:bg-green-700');
                     startButton.classList.add('bg-red-600', 'hover:bg-red-700');
                     startButton.textContent = 'Error de Micrófono';
             // Función para inicializar el AudioContext y conectar el micrófono
             async function initAudio() {
                 if (!audioContext) {
                     audioContext = new (window.AudioContext || window.webkitAudioContext)();
                 }
                 analyser = audioContext.createAnalyser();
+                analyser.fftSize = 128; // Tamaño del FFT
+                // Ajustes para suavizar y dar más detalle a la respuesta en frecuencia
+                analyser.smoothingTimeConstant = 0.8;
+                analyser.minDecibels = -90;
+                analyser.maxDecibels = -10;
                 const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                 microphone = audioContext.createMediaStreamSource(stream);
+                microphone.connect(analyser);
+                dataArray = new Uint8Array(analyser.frequencyBinCount);
                 // Iniciar el procesamiento de audio
                 processAudio();
             }
+            // Bucle principal para procesar el audio
             function processAudio() {
                 if (!analyser || !isPlaying) {
+                    requestAnimationFrame(processAudio);
                     return;
                 }
                 analyser.getByteFrequencyData(dataArray);
+                // Dividir las frecuencias en bandas
+                const lowFreq = getAverageVolume(dataArray, 0, Math.floor(dataArray.length * 0.15));
+                const midFreq = getAverageVolume(dataArray, Math.floor(dataArray.length * 0.15), Math.floor(dataArray.length * 0.5));
+                const highFreq = getAverageVolume(dataArray, Math.floor(dataArray.length * 0.5), dataArray.length - 1);
+                // Aplicar efectos a las celdas basado en las frecuencias y otros "canales"
+                applyEffectsToGrid(dataArray, lowFreq, midFreq, highFreq);
                 // Actualizar el visualizador de barras
                 updateVisualizer(dataArray);
                 requestAnimationFrame(processAudio);
             }
             // Calcula el volumen promedio en un rango de datos
             function getAverageVolume(data, start, end) {
                 let sum = 0;
+                let count = 0;
                 for (let i = start; i <= end; i++) {
+                     if (data[i] !== undefined) {
+                        sum += data[i];
+                        count++;
+                     }
                 }
+                return count > 0 ? sum / count : 0;
             }
+            // --- Nueva función para aplicar efectos a la cuadrícula ---
+            function applyEffectsToGrid(frequencyData, low, mid, high) {
+                // Normalizar frecuencias para una intensidad entre 0 y 1
+                const lowIntensity = low / 255;
+                const midIntensity = mid / 255;
+                const highIntensity = high / 255;
+                const overallIntensity = getAverageVolume(frequencyData, 0, frequencyData.length - 1) / 255;
+                canvasContexts.forEach((ctx, index) => {
+                    // Guardar el estado actual del contexto antes de aplicar transformaciones/filtros
+                    ctx.save();
+                    // Limpiar el canvas (opcional, dependiendo del efecto)
+                    // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+                    // Calcular la posición de la celda en la cuadrícula
+                    const row = Math.floor(index / gridCols);
+                    const col = index % gridCols;
+                    // Calcular la porción del video fuente para esta celda
+                    const videoWidth = videoSource.videoWidth;
+                    const videoHeight = videoSource.videoHeight;
+                    const sourceX = (videoWidth / gridCols) * col;
+                    const sourceY = (videoHeight / gridRows) * row;
+                    const sourceWidth = videoWidth / gridCols;
+                    const sourceHeight = videoHeight / gridRows;
+                    // Calcular el tamaño de destino en el canvas
+                    const destWidth = ctx.canvas.width;
+                    const destHeight = ctx.canvas.height;
+                    // --- Aplicar efectos basados en diferentes "canales" (frecuencias, posición, etc.) ---
+                    // Canal 1-3: Frecuencias de Audio (Graves, Medios, Agudos)
+                    // Canal 4: Volumen General
+                    // Efecto de Tono/Color (influenciado por Graves)
+                    const hueRotate = lowIntensity * 360;
+                    // Efecto de Saturación (influenciado por Medios)
+                    const saturate = 1 + midIntensity * 2; // Aumentar saturación hasta 3x
+                    // Efecto de Contraste (influenciado por Agudos)
+                    const contrast = 1 + highIntensity * 1; // Aumentar contraste hasta 2x
+                    // Aplicar filtros CSS al contexto (si es compatible) o simular con manipulación de píxeles
+                    // La propiedad filter en CanvasRenderingContext2D es experimental, usamos CSS filters en el elemento canvas
+                    // ctx.filter = `hue-rotate(${hueRotate}deg) saturate(${saturate}) contrast(${contrast})`;
+                    canvasElements[index].style.filter = `hue-rotate(${hueRotate}deg) saturate(${saturate}) contrast(${contrast})`;
+                    // Canal 5-8: Posición de la Celda en la Cuadrícula
+                    // Usar la posición para modular otros efectos o crear patrones
+                    const positionFactorX = col / (gridCols - 1); // Normalizado entre 0 y 1
+                    const positionFactorY = row / (gridRows - 1); // Normalizado entre 0 y 1
+                    // Canal 9: Índice de la Celda
+                    const indexFactor = index / (totalCells - 1); // Normalizado entre 0 y 1
+                    // Efecto de Rotación (influenciado por Medios y Posición)
+                    const rotation = midIntensity * 30 * (positionFactorX - 0.5) * 2; // Rotación basada en medios y posición X
+                    ctx.translate(destWidth / 2, destHeight / 2); // Mover origen al centro
+                    ctx.rotate(rotation * Math.PI / 180); // Aplicar rotación en radianes
+                    ctx.translate(-destWidth / 2, -destHeight / 2); // Restaurar origen
+                    // Canal 10: Tiempo Actual del Video (para efectos basados en el tiempo)
+                    const videoTime = videoSource.currentTime % 1; // Usar la parte decimal para un ciclo rápido
+                    // Efecto de Escala/Zoom (influenciado por Graves y Tiempo)
+                    const scale = 1 + lowIntensity * 0.2 * Math.sin(videoTime * Math.PI * 2); // Pequeño zoom pulsante
+                    ctx.scale(scale, scale);
+                    // Ajustar traslación después de escalar para mantener centrado
+                    ctx.translate(destWidth * (1 - scale) / 2, destHeight * (1 - scale) / 2);
+                    // Canal 11: Combinación de Frecuencias (ej. Graves + Agudos)
+                    const lowHighCombo = (lowIntensity + highIntensity) / 2;
+                    // Efecto de Opacidad (influenciado por Combinación Graves/Agudos)
+                    const opacity = 0.5 + lowHighCombo * 0.5; // Opacidad entre 0.5 y 1
+                    ctx.globalAlpha = opacity;
+                    // Canal 12: Detección de Picos (simplificado: si el volumen general supera un umbral)
+                    const peakThreshold = 0.6; // Umbral de intensidad general
+                    const isPeak = overallIntensity > peakThreshold;
+                    // Efecto de Glitch/Inversión (activado por Picos)
+                    if (isPeak) {
+                        // Aplicar un filtro de inversión momentáneo o un desplazamiento
+                        canvasElements[index].style.filter += ' invert(1)';
+                        // Podríamos añadir un pequeño desplazamiento aleatorio aquí también
+                         canvasElements[index].style.transform = `translate(${(Math.random() - 0.5) * 5}px, ${(Math.random() - 0.5) * 5}px)`;
+                    } else {
+                         // Asegurarse de que el efecto de pico se desactive
+                         if (canvasElements[index].style.filter.includes('invert')) {
+                             canvasElements[index].style.filter = canvasElements[index].style.filter.replace('invert(1)', '').trim();
+                         }
+                         // Restaurar la transformación si se aplicó desplazamiento por pico
+                         if (canvasElements[index].style.transform !== `rotate(${rotation}deg)`) {
+                             canvasElements[index].style.transform = `rotate(${rotation}deg)`; // Volver a la rotación normal
+                         }
+                    }
+                    // Canal 13: Frecuencia Específica (ej. una banda estrecha de medios)
+                    // Esto requeriría un análisis más detallado del dataArray o múltiples analizadores
+                    // Por ahora, lo simulamos usando una combinación de medios y posición
+                    const specificFreqInfluence = midIntensity * (1 - Math.abs(positionFactorX - 0.5) * 2); // Más influencia en el centro horizontal
+                    // Efecto de Desenfoque (influenciado por Frecuencia Específica)
+                    const blurAmount = specificFreqInfluence * 5; // Desenfoque máximo de 5px
+                    canvasElements[index].style.filter += ` blur(${blurAmount}px)`;
+                    // Canal 14: Alternancia Basada en el Tiempo (ej. cada segundo)
+                    const timeBasedToggle = Math.floor(videoSource.currentTime) % 2 === 0;
+                    // Efecto de Escala Alterna (influenciado por Alternancia y Agudos)
+                    if (timeBasedToggle) {
+                        const scaleAlt = 1 + highIntensity * 0.1;
+                        // Esto sobrescribiría la escala anterior, hay que combinar transformaciones
+                        // Para simplificar, aplicaremos este efecto a un subconjunto de celdas o de forma alterna
+                        // Apliquemos a celdas pares/impares
+                        if (index % 2 === 0) {
+                             // Re-aplicar transformaciones combinadas
+                            ctx.restore(); ctx.save(); // Restaurar y guardar de nuevo
+                            const combinedRotation = midIntensity * 30 * (positionFactorX - 0.5) * 2;
+                            const combinedScale = (1 + lowIntensity * 0.2 * Math.sin(videoTime * Math.PI * 2)) * scaleAlt;
+                             ctx.translate(destWidth / 2, destHeight / 2);
+                             ctx.rotate(combinedRotation * Math.PI / 180);
+                             ctx.scale(combinedScale, combinedScale);
+                             ctx.translate(-destWidth / 2, -destHeight / 2);
+                        }
+                    }
+                    // Canal 15: Interacción del Usuario (ej. click en una celda) - Requiere listeners de eventos
+                    // No implementado en este bucle, se gestionaría con addEventListener en las celdas
+                    // Canal 16: Datos Externos (simulado, ej. un valor aleatorio que cambia lentamente)
+                    // Esto requeriría una fuente externa (WebSocket, API, etc.)
+                    // Simulemos un valor que cambia con el tiempo del video
+                    const externalDataInfluence = Math.sin(videoSource.currentTime * 0.5) * 0.5 + 0.5; // Valor entre 0 y 1
+                    // Efecto de Desplazamiento (influenciado por Datos Externos y Posición Y)
+                    const translateY = externalDataInfluence * 20 * positionFactorY; // Desplazamiento vertical
+                     // Combinar con la rotación y escala existentes
+                     if (index % 2 !== 0) { // Aplicar a celdas impares para variar
+                         ctx.restore(); ctx.save(); // Restaurar y guardar de nuevo
+                         const combinedRotation = midIntensity * 30 * (positionFactorX - 0.5) * 2;
+                         const combinedScale = 1 + lowIntensity * 0.2 * Math.sin(videoTime * Math.PI * 2);
+                          ctx.translate(destWidth / 2, destHeight / 2);
+                          ctx.rotate(combinedRotation * Math.PI / 180);
+                          ctx.scale(combinedScale, combinedScale);
+                          ctx.translate(-destWidth / 2, -destHeight / 2);
+                          ctx.translate(0, translateY); // Aplicar desplazamiento vertical
+                     }
+                    // --- Fin de la aplicación de efectos ---
+                    // Dibujar la porción del video en el canvas
+                    // drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+                    if (videoSource.readyState >= 2) { // Asegurarse de que el video esté listo
+                         ctx.drawImage(videoSource, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, destWidth, destHeight);
+                    }
+                    // Restaurar el estado del contexto para que los efectos no afecten a la siguiente celda
+                    ctx.restore();
+                });
             }
             // Actualiza la altura y color de las barras del visualizador
             function updateVisualizer(data) {
+                const barWidth = visualizer.offsetWidth / numberOfBars;
                  bars.forEach((bar, i) => {
                     const dataIndex = Math.floor(i * (data.length / numberOfBars));
+                    const value = data[dataIndex] || 0;
                     const maxHeight = visualizer.offsetHeight;
+                    const height = `${(value / 255) * maxHeight}px`;
                     bar.style.height = height;
+                    bar.style.width = `${barWidth - 1}px`;
+                    if (i < numberOfBars * 0.3) { // Ajustar rangos de color a las nuevas bandas
                         bar.style.background = `linear-gradient(to top, #60a5fa, #3b82f6)`;
+                    } else if (i < numberOfBars * 0.6) {
                         bar.style.background = `linear-gradient(to top, #c084fc, #9333ea)`;
                     } else {
                         bar.style.background = `linear-gradient(to top, #f472b6, #ec4899)`;
                     }
                 });
             }
+            // Bucle de renderizado para dibujar el video en los canvas
+            function renderGrid() {
+                if (!videoSource.paused && !videoSource.ended) {
+                    // Redibujar la cuadrícula con los efectos aplicados
+                    // applyEffectsToGrid ya dibuja el video en cada canvas
+                     if (isPlaying && analyser) { // Solo aplicar efectos si el audio está activo
+                         // applyEffectsToGrid se llama desde processAudio, que ya está en un requestAnimationFrame loop
+                         // No necesitamos otro bucle de renderizado aquí si processAudio ya lo maneja
+                         // Si processAudio no estuviera en RAF, este bucle sería necesario.
+                         // Mantengamos applyEffectsToGrid dentro de processAudio por ahora.
+                     } else {
+                         // Si el audio no está activo, solo dibujar el video sin efectos dinámicos
+                         canvasContexts.forEach((ctx, index) => {
+                             ctx.save();
+                             const row = Math.floor(index / gridCols);
+                             const col = index % gridCols;
+                             const videoWidth = videoSource.videoWidth;
+                             const videoHeight = videoSource.videoHeight;
+                             const sourceX = (videoWidth / gridCols) * col;
+                             const sourceY = (videoHeight / gridRows) * row;
+                             const sourceWidth = videoWidth / gridCols;
+                             const sourceHeight = videoHeight / gridRows;
+                             const destWidth = ctx.canvas.width;
+                             const destHeight = ctx.canvas.height;
+                             if (videoSource.readyState >= 2) {
+                                 ctx.drawImage(videoSource, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, destWidth, destHeight);
+                             }
+                             ctx.restore();
+                         });
+                     }
+                }
+                 // Continuar el bucle de renderizado independientemente del estado del audio
+                 // Esto asegura que el video se muestre incluso sin efectos de audio
+                 requestAnimationFrame(renderGrid);
+            }
+            // Iniciar el bucle de renderizado del canvas al cargar la página
+            renderGrid();
+            // Limpieza al cerrar la página
             window.addEventListener('beforeunload', () => {
                 if (microphone) {
                     microphone.disconnect();
                 if (audioContext) {
                     audioContext.close();
                 }
+                if (videoSource) {
+                    videoSource.pause();
+                    videoSource.removeAttribute('src'); // Liberar recurso de video
+                    videoSource.load();
+                }
             });
+            // Asegurarse de que el video se pueda reproducir después de la interacción del usuario
+             startButton.addEventListener('click', () => {
+                videoSource.play().catch(error => {
+                    console.error('Error al intentar reproducir el video fuente después del clic:', error);
+                });
+             });
         });
     </script>
 </body>