Spaces:

Merlintxu
/

video-audio

Running

App Files Files Community

Merlintxu commited on Apr 23

Commit

921db4f

verified ·

1 Parent(s): baf2169

Update index.html

Browse files

Files changed (1) hide show

index.html +72 -570

index.html CHANGED Viewed

@@ -1,577 +1,79 @@
 <!DOCTYPE html>
 <html lang="es">
 <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 {
-            height: 100px; /* Altura fija para el visualizador */
-            width: 100%;
-            background: linear-gradient(to top, #4b5563, #1f2937); /* Fondo degradado */
-            margin-top: 20px;
-            border-radius: 8px;
-            overflow: hidden;
-            display: flex; /* Usar flexbox para las barras */
-            align-items: flex-end; /* Alinear barras en la parte inferior */
-            justify-content: space-between; /* Espacio entre barras */
-            padding: 0 2px; /* Pequeño padding horizontal */
-        }
-        .bar {
-            height: 0; /* Altura inicial de las barras */
-            background: linear-gradient(to top, #3b82f6, #9333ea); /* Degradado de color para las barras */
-            width: 2px; /* Ancho fijo de las barras */
-            transition: height 0.1s ease-out; /* Transición suave para la altura */
-            flex-grow: 1; /* Permitir que las barras crezcan para llenar el espacio */
-            margin-right: 1px; /* Espacio entre barras */
-        }
-        .bar:last-child {
-            margin-right: 0; /* Eliminar margen de la última barra */
-        }
-        .controls {
-            background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
-            padding: 20px;
-            border-radius: 10px;
-            margin-top: 20px;
-        }
-        .frequency-label {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 10px;
-            color: white;
-            font-weight: bold;
-            padding: 0 10px; /* Padding para alinear con el visualizador */
-        }
-        /* Animación de pulso para el botón */
-        .pulse {
-            animation: pulse 1s infinite;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); } /* Ligeramente más sutil */
-            100% { transform: scale(1); }
-        }
-        /* 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 {
-                height: 70px; /* Menor altura en pantallas pequeñas */
-            }
-            .bar {
-                width: 1px; /* Barras más delgadas en pantallas pequeñas */
-            }
-            .controls {
-                padding: 15px;
-            }
-        }
-    </style>
 </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">
-            <span>Graves</span>
-            <span>Medios</span>
-            <span>Agudos</span>
-        </div>
-        <div class="visualizer" id="visualizer"></div>
-        <div class="flex justify-center mt-6">
-            <button id="startButton" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out pulse">
-                Activar Micrófono
-            </button>
-        </div>
-        <div class="mt-6 text-center text-sm text-gray-400">
-            <p id="status">Esperando permiso para acceder al micrófono...</p>
-        </div>
     </div>
-    <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';
-                visualizer.appendChild(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í
-            });
-            // Configurar el audio al hacer clic en el botón
-            startButton.addEventListener('click', async () => {
-                try {
-                    if (!isPlaying) {
-                        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>
 </html>

 <!DOCTYPE html>
 <html lang="es">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Video‑Audio Grid Visualizer Pro</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    :root { --bg:#0f172a; --fg:#f1f5f9; --accent-a:#3b82f6; --accent-b:#9333ea; }
+    body{background:var(--bg);color:var(--fg);font-family:"Inter",sans-serif}
+    .grid-cell{background:#1e293b;transition:filter .12s,transform .12s}
+  </style>
 </head>
+<body class="min-h-screen flex flex-col items-center py-10 gap-10">
+  <header class="text-center space-y-2 px-4 max-w-xl">
+    <h1 class="text-4xl font-extrabold tracking-tight">Video‑Audio Grid Visualizer <span class="bg-gradient-to-r from-sky-500 to-violet-500 bg-clip-text text-transparent">Pro</span></h1>
+    <p class="opacity-80">Mosaicos de vídeo que reaccionan a tu micrófono (o, en su defecto, al audio del propio vídeo).</p>
+  </header>
+  <video id="videoSource" src="https://getsamplefiles.com/download/webm/sample-2.webm" loop muted playsinline class="hidden"></video>
+  <section id="gridContainer" class="grid auto-rows-[1fr] gap-1 w-[min(90vw,900px)] aspect-video rounded-lg overflow-hidden"></section>
+  <section class="w-[min(90vw,600px)] space-y-6">
+    <div class="flex justify-between text-xs px-1"><span>Bajos</span><span>Medios</span><span>Agudos</span></div>
+    <div id="visualizer" class="h-24 w-full bg-gradient-to-t from-slate-700 to-slate-800 flex items-end rounded-md overflow-hidden"></div>
+    <div class="grid sm:grid-cols-2 gap-4 text-sm">
+      <label class="flex flex-col gap-1">FFT Size
+        <input id="fftRange" type="range" min="32" max="2048" step="32" value="512" class="accent-sky-500 cursor-pointer"><span id="fftLabel" class="text-xs self-end">512</span>
+      </label>
+      <label class="flex flex-col gap-1">Sensibilidad
+        <input id="sensRange" type="range" min="0" max="100" value="70" class="accent-violet-500 cursor-pointer"><span id="sensLabel" class="text-xs self-end">0.70</span>
+      </label>
     </div>
+    <button id="startButton" class="mx-auto block bg-sky-600 hover:bg-sky-700 px-6 py-3 rounded-full font-semibold shadow-lg transition">Activar Micrófono</button>
+    <p id="status" class="text-center text-xs opacity-70">Haz clic para comenzar.</p>
+    <p id="httpsWarn" class="text-center text-xs text-orange-400 hidden">⚠ Sirve esta página vía HTTPS (o localhost) para acceder al micrófono.</p>
+  </section>
+<script>
+const $=s=>document.querySelector(s);
+const gridContainer=$('#gridContainer');
+const videoSource=$('#videoSource');
+const startBtn=$('#startButton');
+const visualizer=$('#visualizer');
+const fftRange=$('#fftRange');const fftLabel=$('#fftLabel');
+const sensRange=$('#sensRange');const sensLabel=$('#sensLabel');
+const statusTxt=$('#status');const httpsWarn=$('#httpsWarn');
+if(location.protocol!=='https:'&&location.hostname!=='localhost'){httpsWarn.classList.remove('hidden');startBtn.disabled=true;}
+const getGridSize=()=>innerWidth<500?2:innerWidth<768?3:4;
+let gridN=getGridSize();let cells=[],ctxs=[],backCtxs=[];
+function buildGrid(){gridN=getGridSize();gridContainer.style.gridTemplateColumns=`repeat(${gridN},1fr)`;gridContainer.innerHTML='';cells=[];ctxs=[];backCtxs=[];const total=gridN*gridN;
+  for(let i=0;i<total;i++){const c=document.createElement('canvas');c.width=320;c.height=180;c.className='grid-cell';gridContainer.appendChild(c);cells.push(c);ctxs.push(c.getContext('2d'));
+    const off=document.createElement('canvas');off.width=c.width;off.height=c.height;backCtxs.push(off.getContext('2d'));}
+}
+buildGrid();addEventListener('resize',()=>{const n=getGridSize();if(n!==gridN)buildGrid();});
+let audioCtx,analyser,sourceNode,floatData,prevFloatData,isRunning=false;
+async function initAudio(){if(isRunning)return;statusTxt.textContent='Solicitando acceso…';audioCtx=new(AudioContext||webkitAudioContext)();analyser=audioCtx.createAnalyser();analyser.fftSize=+fftRange.value;analyser.smoothingTimeConstant=0;floatData=new Float32Array(analyser.frequencyBinCount);prevFloatData=new Float32Array(analyser.frequencyBinCount);
+  try{const stream=await navigator.mediaDevices.getUserMedia({audio:true});sourceNode=audioCtx.createMediaStreamSource(stream);sourceNode.connect(analyser);statusTxt.textContent='Micrófono activado ✔';}
+  catch(err){console.warn(err);statusTxt.textContent='Permiso denegado. Usando audio del vídeo.';videoSource.muted=false;await videoSource.play().catch(()=>{});sourceNode=audioCtx.createMediaElementSource(videoSource);sourceNode.connect(analyser);analyser.connect(audioCtx.destination);} isRunning=true;if(videoSource.paused)videoSource.play();renderLoop();}
+const BAR_COUNT=64;const bars=Array.from({length:BAR_COUNT},()=>{const b=document.createElement('div');b.style.flex='1';b.style.marginInline='1px';b.style.height='0';visualizer.appendChild(b);return b;});
+fftRange.oninput=()=>{fftLabel.textContent=fftRange.value;if(analyser)analyser.fftSize=+fftRange.value;};sensRange.oninput=()=>{sensLabel.textContent=(sensRange.value/100).toFixed(2);};
+const avg=(a,sF,eF)=>{const len=a.length,s=~~(sF*len),e=~~(eF*len);let sum=0;for(let i=s;i<e;i++)sum+=a[i];return sum/(e-s);} ;
+const dBToByte=dB=>{const min=analyser.minDecibels,max=analyser.maxDecibels;return Math.max(0,Math.min(1,(dB-min)/(max-min)))*255;};
+function renderLoop(){if(!isRunning)return;analyser.getFloatFrequencyData(floatData);for(let i=0;i<floatData.length;i++){floatData[i]=0.5*floatData[i]+0.5*prevFloatData[i];prevFloatData[i]=floatData[i];}
+  const byteData=Uint8Array.from(floatData,dBToByte);
+  const low=avg(byteData,0,0.15),mid=avg(byteData,0.15,0.5),high=avg(byteData,0.5,1),sens=sensRange.value/100;
+  const maxH=visualizer.clientHeight;
+  bars.forEach((bar,i)=>{const idx=~~(i*(byteData.length/BAR_COUNT));const val=byteData[idx];bar.style.height=((val/255)*maxH)+'px';bar.style.background=i<BAR_COUNT*0.3?`linear-gradient(to top,var(--accent-a),#60a5fa)`:i<BAR_COUNT*0.6?`linear-gradient(to top,var(--accent-b),#c084fc)`:`linear-gradient(to top,#ec4899,#f472b6)`;});
+  if(videoSource.readyState>=2){const vw=videoSource.videoWidth,vh=videoSource.videoHeight;
+    ctxs.forEach((ctx,idx)=>{const bctx=backCtxs[idx];const row=~~(idx/gridN),col=idx%gridN;const sx=(vw/gridN)*col,sy=(vh/gridN)*row;const sw=vw/gridN,sh=vh/gridN;const dw=bctx.canvas.width,dh=bctx.canvas.height;const l=(low/255)*sens,m=(mid/255)*sens,h=(high/255)*sens;
+      bctx.save();bctx.clearRect(0,0,dw,dh);bctx.translate(dw/2,dh/2);bctx.rotate((m-0.3)*0.5);bctx.scale(1+l*0.2,1+l*0.2);bctx.translate(-dw/2,-dh/2);bctx.drawImage(videoSource,sx,sy,sw,sh,0,0,dw,dh);bctx.restore();
+      ctx.clearRect(0,0,dw,dh);ctx.drawImage(bctx.canvas,0,0);cells[idx].style.filter=`hue-rotate(${l*360}deg) saturate(${1+m*2}) contrast(${1+h})`;});}
+  requestAnimationFrame(renderLoop);
+}
+startBtn.onclick=()=>initAudio();
+</script>
 </body>
 </html>