Guardian de Taygeta: Generador de Frecuencias

Visor HTML con Pantalla Completa para IFrame

Editor HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SynthOrbs - Generador de Frecuencias</title>
    <style>
        :root {
            --primary: #6e45e2;
            --secondary: #88d3ce;
            --dark: #1a1a2e;
            --light: #f0f0f0;
            --accent: #ff7e5f;
            --orb-1: #6e45e2;
            --orb-2: #88d3ce;
            --orb-3: #ff7e5f;
            --orb-4: #9c64ff;
            --orb-5: #45e2e2;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: linear-gradient(135deg, var(--dark), #16213e);
            color: var(--light);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 20px;
        }
        
        h1 {
            margin-bottom: 2rem;
            font-size: 2.5rem;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
            letter-spacing: 1px;
            position: relative;
            z-index: 10;
        }
        
        .synth-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            width: 100%;
            max-width: 900px;
            position: relative;
            z-index: 10;
        }
        
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(30px);
            opacity: 0.3;
            z-index: 1;
            animation: float 15s infinite ease-in-out;
        }
        
        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(50px, 50px); }
            50% { transform: translate(0, 100px); }
            75% { transform: translate(-50px, 50px); }
        }
        
        .orbital-controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            width: 100%;
        }
        
        .control-sphere {
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(145deg, #232343, #1e1e38);
            box-shadow: 8px 8px 16px #0f0f1f, 
                        -8px -8px 16px #25254d,
                        inset 0 0 20px rgba(110, 69, 226, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            cursor: pointer;
            overflow: hidden;
        }
        
        .control-sphere:hover {
            transform: translateY(-5px);
            box-shadow: 12px 12px 24px #0f0f1f, 
                        -12px -12px 24px #25254d,
                        inset 0 0 30px rgba(110, 69, 226, 0.5);
        }
        
        .control-label {
            font-size: 0.9rem;
            margin-bottom: 10px;
            color: var(--secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            z-index: 1;
        }
        
        .control-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            z-index: 1;
        }
        
        .control-sphere input[type="range"] {
            width: 80%;
            -webkit-appearance: none;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin-top: 15px;
            outline: none;
            z-index: 1;
        }
        
        .control-sphere input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
            box-shadow: 0 0 10px rgba(255, 126, 95, 0.7);
            transition: all 0.2s ease;
        }
        
        .control-sphere input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 0 15px rgba(255, 126, 95, 0.9);
        }
        
        .wave-display {
            width: 100%;
            height: 250px;
            background: linear-gradient(145deg, #232343, #1e1e38);
            border-radius: 20px;
            box-shadow: 8px 8px 16px #0f0f1f, 
                        -8px -8px 16px #25254d,
                        inset 0 0 20px rgba(110, 69, 226, 0.3);
            overflow: hidden;
            position: relative;
        }
        
        canvas {
            width: 100%;
            height: 100%;
        }
        
        .waveform-selector {
            display: flex;
            justify-content: center;
            gap: 1rem;
            width: 100%;
        }
        
        .wave-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(145deg, #232343, #1e1e38);
            box-shadow: 5px 5px 10px #0f0f1f, 
                        -5px -5px 10px #25254d;
            color: var(--light);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .wave-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(110, 69, 226, 0.3) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .wave-btn:hover {
            transform: translateY(-5px);
            box-shadow: 8px 8px 16px #0f0f1f, 
                        -8px -8px 16px #25254d;
        }
        
        .wave-btn:hover::before {
            opacity: 1;
        }
        
        .wave-btn.active {
            background: linear-gradient(145deg, #6e45e2, #5d3abf);
            box-shadow: inset 3px 3px 6px #0f0f1f, 
                        inset -3px -3px 6px #8a6ceb;
            color: white;
        }
        
        .time-selector {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .time-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(145deg, #232343, #1e1e38);
            box-shadow: 3px 3px 6px #0f0f1f, 
                        -3px -3px 6px #25254d;
            color: var(--light);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .time-btn:hover {
            transform: translateY(-3px);
            box-shadow: 5px 5px 10px #0f0f1f, 
                        -5px -5px 10px #25254d;
        }
        
        .time-btn.active {
            background: linear-gradient(145deg, #88d3ce, #74b3af);
            box-shadow: inset 2px 2px 4px #0f0f1f, 
                        inset -2px -2px 4px #a3f3ed;
            color: var(--dark);
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 1rem;
        }
        
        .stat {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            backdrop-filter: blur(5px);
        }
        
        .stat-value {
            font-weight: 700;
            color: var(--accent);
        }
        
        .glow {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(110, 69, 226, 0.3) 0%, transparent 70%);
            animation: pulse 4s infinite;
            border-radius: 50%;
            opacity: 0.7;
            z-index: 0;
        }
        
        .audio-reactive-orbs {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }
        
        .audio-orb {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, var(--orb-color), transparent 70%);
            opacity: 0;
            transform: scale(0);
            transition: transform 0.5s ease-out, opacity 0.8s ease;
            mix-blend-mode: screen;
            filter: blur(15px);
        }
        
        .pulse {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%);
            opacity: 0;
            z-index: 0;
        }
        
        .pulse-animate {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(0.8); opacity: 0.8; }
            70% { transform: scale(1.3); opacity: 0; }
            100% { transform: scale(0.8); opacity: 0; }
        }
        
        @media (max-width: 768px) {
            .orbital-controls {
                flex-direction: column;
                align-items: center;
            }
            
            .control-sphere {
                width: 120px;
                height: 120px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="audio-reactive-orbs" id="audioOrbs"></div>
    
    
    <div class="orb" style="width: 300px; height: 300px; background: var(--orb-1); top: 10%; left: 10%; animation-duration: 25s;"></div>
    <div class="orb" style="width: 400px; height: 400px; background: var(--orb-2); bottom: 10%; right: 10%; animation-duration: 30s; animation-delay: 5s;"></div>
    <div class="orb" style="width: 250px; height: 250px; background: var(--orb-3); top: 30%; right: 20%; animation-duration: 20s; animation-delay: 10s;"></div>
    
    <h1>SynthOrbs</h1>
    
    <div class="synth-container">
        <div class="orbital-controls">
            <div class="control-sphere">
                <div class="pulse"></div>
                <div class="glow"></div>
                <span class="control-label">Frecuencia</span>
                <span class="control-value" id="frequency-value">440 Hz</span>
                <input type="range" id="frequency" min="1.000" max="2000.000" step="1.000" value="32.000">
            </div>
            
            <div class="control-sphere">
                <div class="pulse"></div>
                <div class="glow"></div>
                <span class="control-label">Balance</span>
                <span class="control-value" id="balance-value">0</span>
                <input type="range" id="balance" min="-1" max="1" step="0.1" value="0">
            </div>
            
            <div class="control-sphere">
                <div class="pulse"></div>
                <div class="glow"></div>
                <span class="control-label">Volumen</span>
                <span class="control-value" id="volume-value">50%</span>
                <input type="range" id="volume" min="0" max="1" step="0.01" value="0.5">
            </div>
        </div>
        
        <div class="wave-display">
            <canvas id="oscilloscope"></canvas>
        </div>
        
        <div class="waveform-selector">
            <button class="wave-btn active" id="sine-wave" title="Onda Senoidal">∿</button>
            <button class="wave-btn" id="square-wave" title="Onda Cuadrada">⎍</button>
            <button class="wave-btn" id="sawtooth-wave" title="Onda Sierra">∕</button>
            <button class="wave-btn" id="mute" title="Silenciar">🔇</button>
        </div>
        
        <div class="time-selector">
            <button class="time-btn" data-time="0.1">0.1s</button>
            <button class="time-btn" data-time="0.2">0.2s</button>
            <button class="time-btn" data-time="0.3">0.3s</button>
            <button class="time-btn" data-time="0.5">0.5s</button>
            <button class="time-btn active" data-time="1">1s</button>
        </div>
        
        <div class="stats">
            <div class="stat">
                Crestas: <span class="stat-value" id="crest-count">0</span>
            </div>
            <div class="stat">
                Tiempo: <span class="stat-value" id="time-display">1s</span>
            </div>
            <div class="stat">
                Orbes: <span class="stat-value" id="orb-count">0</span>
            </div>
        </div>
    </div>
    
    <script>
        // Configuración del audio
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        let oscillator = null;
        let gainNode = audioCtx.createGain();
        let pannerNode = audioCtx.createStereoPanner();
        let isMuted = false;
        let waveType = 'sine';
        let displayTime = 1.0;
        
        // Elementos del DOM
        const frequencySlider = document.getElementById('frequency');
        const frequencyValue = document.getElementById('frequency-value');
        const balanceSlider = document.getElementById('balance');
        const balanceValue = document.getElementById('balance-value');
        const volumeSlider = document.getElementById('volume');
        const volumeValue = document.getElementById('volume-value');
        const muteButton = document.getElementById('mute');
        const sineWaveButton = document.getElementById('sine-wave');
        const squareWaveButton = document.getElementById('square-wave');
        const sawtoothWaveButton = document.getElementById('sawtooth-wave');
        const canvas = document.getElementById('oscilloscope');
        const canvasCtx = canvas.getContext('2d');
        const crestCountDisplay = document.getElementById('crest-count');
        const timeDisplay = document.getElementById('time-display');
        const orbCountDisplay = document.getElementById('orb-count');
        const audioOrbsContainer = document.getElementById('audioOrbs');
        
        // Configuración del osciloscopio
        let analyser = audioCtx.createAnalyser();
        analyser.fftSize = 2048;
        const bufferLength = analyser.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);
        
        // Variables para el conteo de crestas
        let lastValue = 128;
        let rising = false;
        let crestCount = 0;
        
        // Sistema de orbes de audio
        let audioOrbs = [];
        let orbIdCounter = 0;
        const orbColors = ['var(--orb-1)', 'var(--orb-2)', 'var(--orb-3)', 'var(--orb-4)', 'var(--orb-5)'];
        
        // Inicializar el generador de sonido
        function initOscillator() {
            if (oscillator) {
                oscillator.stop();
            }
            
            oscillator = audioCtx.createOscillator();
            oscillator.type = waveType;
            oscillator.frequency.setValueAtTime(frequencySlider.value, audioCtx.currentTime);
            
            // Conectar nodos
            gainNode.gain.setValueAtTime(isMuted ? 0 : volumeSlider.value, audioCtx.currentTime);
            pannerNode.pan.setValueAtTime(balanceSlider.value, audioCtx.currentTime);
            
            oscillator.connect(gainNode);
            gainNode.connect(pannerNode);
            pannerNode.connect(analyser);
            analyser.connect(audioCtx.destination);
            
            oscillator.start();
            
            // Iniciar visualización y orbes
            resizeCanvas();
            createInitialOrbs();
            drawOscilloscope();
        }
        
        // Crear orbes iniciales
        function createInitialOrbs() {
            // Limpiar orbes existentes
            audioOrbsContainer.innerHTML = '';
            audioOrbs = [];
            
            // Crear 5 orbes iniciales
            for (let i = 0; i < 5; i++) {
                createAudioOrb();
            }
            updateOrbCount();
        }
        
        // Crear un nuevo orb de audio
        function createAudioOrb() {
            const orb = document.createElement('div');
            orb.className = 'audio-orb';
            orb.id = `orb-${orbIdCounter++}`;
            
            // Configuración aleatoria
            const size = Math.random() * 100 + 50;
            const color = orbColors[Math.floor(Math.random() * orbColors.length)];
            const x = Math.random() * 100;
            const y = Math.random() * 100;
            
            orb.style.width = `${size}px`;
            orb.style.height = `${size}px`;
            orb.style.setProperty('--orb-color', color);
            orb.style.left = `${x}%`;
            orb.style.top = `${y}%`;
            
            audioOrbsContainer.appendChild(orb);
            
            // Mostrar el orb con efecto de aparición
            setTimeout(() => {
                orb.style.opacity = '0.5';
                orb.style.transform = 'scale(1)';
            }, 100);
            
            // Almacenar referencia
            audioOrbs.push({
                element: orb,
                size: size,
                baseSize: size,
                x: x,
                y: y,
                speedX: (Math.random() - 0.5) * 0.2,
                speedY: (Math.random() - 0.5) * 0.2,
                color: color,
                targetX: x,
                targetY: y
            });
        }
        
        // Actualizar contador de orbes
        function updateOrbCount() {
            orbCountDisplay.textContent = audioOrbs.length;
        }
        
        // Actualizar orbes basado en el audio
        function updateAudioOrbs() {
            analyser.getByteFrequencyData(dataArray);
            
            // Dividir el espectro de frecuencia en rangos para los orbes
            const frequencyRangeSize = Math.floor(bufferLength / Math.max(1, audioOrbs.length));
            
            audioOrbs.forEach((orb, index) => {
                const start = index * frequencyRangeSize;
                const end = Math.min(start + frequencyRangeSize, bufferLength);
                let sum = 0;
                let count = 0;
                
                // Calcular la energía promedio en este rango de frecuencia
                for (let i = start; i < end; i++) {
                    sum += dataArray[i];
                    count++;
                }
                
                const average = count > 0 ? sum / count : 0;
                const intensity = average / 255;
                
                // Aplicar efectos al orb basado en la intensidad
                const newSize = orb.baseSize * (1 + intensity * 2);
                orb.element.style.width = `${newSize}px`;
                orb.element.style.height = `${newSize}px`;
                orb.element.style.opacity = `${0.3 + intensity * 0.7}`;
                
                // Mover el orb suavemente hacia su objetivo
                orb.x += (orb.targetX - orb.x) * 0.05;
                orb.y += (orb.targetY - orb.y) * 0.05;
                
                // Actualizar posición
                orb.element.style.left = `${orb.x}%`;
                orb.element.style.top = `${orb.y}%`;
                
                // Cambiar color basado en la frecuencia
                if (intensity > 0.7 && Math.random() < 0.1) {
                    const newColor = orbColors[Math.floor(Math.random() * orbColors.length)];
                    orb.element.style.setProperty('--orb-color', newColor);
                    orb.color = newColor;
                }
                
                // Cambiar dirección ocasionalmente
                if (Math.random() < 0.01) {
                    orb.targetX = Math.random() * 100;
                    orb.targetY = Math.random() * 100;
                }
            });
            
            // Ocasionalmente añadir nuevos orbes
            if (Math.random() < 0.02 && audioOrbs.length < 15) {
                createAudioOrb();
                updateOrbCount();
            }
            
            // Ocasionalmente remover orbes
            if (Math.random() < 0.01 && audioOrbs.length > 3) {
                removeOrb();
                updateOrbCount();
            }
        }
        
        // Eliminar un orb aleatorio
        function removeOrb() {
            if (audioOrbs.length === 0) return;
            
            const randomIndex = Math.floor(Math.random() * audioOrbs.length);
            const orb = audioOrbs[randomIndex];
            
            // Animación de desaparición
            orb.element.style.transition = 'all 1s ease';
            orb.element.style.opacity = '0';
            orb.element.style.transform = 'scale(0)';
            
            // Eliminar después de la animación
            setTimeout(() => {
                if (orb.element.parentNode) {
                    orb.element.remove();
                }
                audioOrbs.splice(randomIndex, 1);
            }, 1000);
        }
        
        // Dibujar el osciloscopio
        function drawOscilloscope() {
            requestAnimationFrame(drawOscilloscope);
            
            analyser.getByteTimeDomainData(dataArray);
            
            // Limpiar canvas con degradado
            const gradient = canvasCtx.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, 'rgba(30, 30, 62, 0.8)');
            gradient.addColorStop(1, 'rgba(26, 26, 46, 0.9)');
            canvasCtx.fillStyle = gradient;
            canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Dibujar rejilla
            drawGrid();
            
            // Dibujar onda con efecto neón
            const samplesToShow = Math.min(bufferLength, Math.floor(bufferLength * displayTime));
            const sliceWidth = canvas.width * 1.0 / samplesToShow;
            let x = 0;
            
            // Reiniciar contador de crestas para este frame
            let frameCrestCount = 0;
            
            // Configurar el estilo de la onda
            const waveGradient = canvasCtx.createLinearGradient(0, 0, canvas.width, 0);
            waveGradient.addColorStop(0, 'rgba(110, 69, 226, 0.8)');
            waveGradient.addColorStop(0.5, 'rgba(136, 211, 206, 0.8)');
            waveGradient.addColorStop(1, 'rgba(255, 126, 95, 0.8)');
            
            canvasCtx.lineWidth = 3;
            canvasCtx.strokeStyle = waveGradient;
            canvasCtx.shadowBlur = 15;
            canvasCtx.shadowColor = 'rgba(110, 69, 226, 0.7)';
            canvasCtx.beginPath();
            
            for(let i = 0; i < samplesToShow; i++) {
                const v = dataArray[i] / 128.0;
                const y = v * canvas.height / 2;
                
                // Detección de crestas
                if(waveType === 'sine') {
                    const currentValue = dataArray[i];
                    if(currentValue > lastValue && !rising) {
                        rising = true;
                    } else if(currentValue < lastValue && rising) {
                        rising = false;
                        frameCrestCount++;
                    }
                    lastValue = currentValue;
                }
                
                if(i === 0) {
                    canvasCtx.moveTo(x, y);
                } else {
                    canvasCtx.lineTo(x, y);
                }
                
                x += sliceWidth;
            }
            
            canvasCtx.stroke();
            canvasCtx.shadowBlur = 0;
            
            // Actualizar contador de crestas
            if(waveType === 'sine') {
                crestCount = frameCrestCount;
                crestCountDisplay.textContent = crestCount;
            } else {
                crestCountDisplay.textContent = "—";
            }
            
            // Actualizar orbes de audio
            updateAudioOrbs();
            
            // Activar pulsos en los controles basado en la frecuencia
            const pulseElements = document.querySelectorAll('.control-sphere .pulse');
            pulseElements.forEach((pulse, index) => {
                const frequencyData = dataArray[Math.floor(dataArray.length * (index / pulseElements.length))];
                const intensity = frequencyData / 255;
                
                if (intensity > 0.7 && !pulse.classList.contains('pulse-animate')) {
                    pulse.style.opacity = '0.8';
                    pulse.classList.add('pulse-animate');
                    setTimeout(() => {
                        pulse.style.opacity = '0';
                        pulse.classList.remove('pulse-animate');
                    }, 2000);
                }
            });
        }
        
        // Dibujar rejilla de referencia
        function drawGrid() {
            canvasCtx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
            canvasCtx.lineWidth = 1;
            
            // Líneas horizontales
            for (let y = 0; y <= canvas.height; y += canvas.height / 4) {
                canvasCtx.beginPath();
                canvasCtx.moveTo(0, y);
                canvasCtx.lineTo(canvas.width, y);
                canvasCtx.stroke();
            }
            
            // Líneas verticales (según el tiempo mostrado)
            const secondsPerDivision = displayTime <= 1 ? 0.1 : displayTime <= 2 ? 0.2 : displayTime <= 5 ? 0.5 : 1;
            const divisions = displayTime / secondsPerDivision;
            const divisionWidth = canvas.width / divisions;
            
            for (let x = 0; x <= canvas.width; x += divisionWidth) {
                canvasCtx.beginPath();
                canvasCtx.moveTo(x, 0);
                canvasCtx.lineTo(x, canvas.height);
                canvasCtx.stroke();
            }
            
            // Punto central con efecto de luz
            canvasCtx.beginPath();
            canvasCtx.arc(canvas.width/2, canvas.height/2, 3, 0, Math.PI * 2);
            canvasCtx.fillStyle = 'rgba(255, 126, 95, 0.8)';
            canvasCtx.shadowBlur = 10;
            canvasCtx.shadowColor = 'rgba(255, 126, 95, 0.5)';
            canvasCtx.fill();
            canvasCtx.shadowBlur = 0;
        }
        
        // Event listeners
        frequencySlider.addEventListener('input', function() {
            const freq = parseInt(this.value);
            frequencyValue.textContent = `${freq} Hz`;
            if (oscillator) {
                oscillator.frequency.setValueAtTime(freq, audioCtx.currentTime);
            }
            
            // Efecto visual al cambiar frecuencia
            const sphere = document.querySelectorAll('.control-sphere')[0];
            sphere.style.boxShadow = `8px 8px 16px #0f0f1f, -8px -8px 16px #25254d, inset 0 0 30px rgba(110, 69, 226, 0.7)`;
            setTimeout(() => {
                sphere.style.boxShadow = `8px 8px 16px #0f0f1f, -8px -8px 16px #25254d, inset 0 0 20px rgba(110, 69, 226, 0.3)`;
            }, 300);
        });
        
        balanceSlider.addEventListener('input', function() {
            const balance = parseFloat(this.value);
            balanceValue.textContent = balance.toFixed(1);
            pannerNode.pan.setValueAtTime(balance, audioCtx.currentTime);
            
            // Efecto de balanceo visual
            document.querySelectorAll('.control-sphere')[1].style.transform = 
                `translateY(-5px) rotate(${balance * 10}deg)`;
        });
        
        volumeSlider.addEventListener('input', function() {
            const volume = parseFloat(this.value);
            volumeValue.textContent = `${Math.round(volume * 100)}%`;
            if (!isMuted) {
                gainNode.gain.setValueAtTime(volume, audioCtx.currentTime);
            }
            
            // Efecto de pulso al cambiar volumen
            const glow = document.querySelectorAll('.control-sphere')[2].querySelector('.glow');
            glow.style.animation = 'none';
            setTimeout(() => {
                glow.style.animation = 'pulse 4s infinite';
            }, 10);
        });
        
        muteButton.addEventListener('click', function() {
            isMuted = !isMuted;
            this.classList.toggle('active');
            gainNode.gain.setValueAtTime(isMuted ? 0 : volumeSlider.value, audioCtx.currentTime);
            
            // Cambiar icono
            this.textContent = isMuted ? '🔊' : '🔇';
        });
        
        sineWaveButton.addEventListener('click', function() {
            waveType = 'sine';
            setActiveWaveButton(this);
            if (oscillator) oscillator.type = waveType;
        });
        
        squareWaveButton.addEventListener('click', function() {
            waveType = 'square';
            setActiveWaveButton(this);
            if (oscillator) oscillator.type = waveType;
        });
        
        sawtoothWaveButton.addEventListener('click', function() {
            waveType = 'sawtooth';
            setActiveWaveButton(this);
            if (oscillator) oscillator.type = waveType;
        });
        
        function setActiveWaveButton(button) {
            document.querySelectorAll('.wave-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            button.classList.add('active');
            
            // Efecto de onda
            button.style.transform = 'scale(1.2)';
            setTimeout(() => {
                button.style.transform = 'scale(1)';
            }, 300);
        }
        
        // Botones de selección de tiempo
        document.querySelectorAll('.time-btn').forEach(button => {
            button.addEventListener('click', function() {
                displayTime = parseFloat(this.dataset.time);
                timeDisplay.textContent = `${displayTime}s`;
                
                // Actualizar clase activa
                document.querySelectorAll('.time-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                this.classList.add('active');
                
                // Efecto visual
                this.style.transform = 'scale(1.1)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 200);
            });
        });
        
        // Iniciar al hacer clic en cualquier parte de la página
        document.body.addEventListener('click', function() {
            if (!oscillator) {
                initOscillator();
            }
        }, { once: true });
        
        // Ajustar tamaño del canvas
        function resizeCanvas() {
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        }
        
        window.addEventListener('resize', resizeCanvas);
    </script>
</body>
</html>

Guardian de Taygeta

Generador de Frecuencias

Editor HTML

No hay comentarios.:

Publicar un comentario

Entradas populares