🔊 Nivel 23 - Audio y Efectos

🎵 Sonidos en la Web

Web Audio API

JavaScript puede crear y controlar sonidos directamente en el navegador. Esto se usa para juegos, aplicaciones musicales, notificaciones y mucho más. ¡Vamos a crear música!

🎹 Piano Virtual

¡Haz clic en las teclas para tocar notas! Cada tecla genera un sonido diferente:

Do

Re

Mi

Fa

Sol

La

Si

Do+

// Crear sonido con Web Audio API
const audioCtx = new (AudioContext || webkitAudioContext)();

function tocarNota(frecuencia) {
    const oscillator = audioCtx.createOscillator();
    const gainNode = audioCtx.createGain();
    
    oscillator.type = 'sine'; // Tipo de onda
    oscillator.frequency.value = frecuencia;
    
    oscillator.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    
    oscillator.start();
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.5);
    oscillator.stop(audioCtx.currentTime + 0.5);
}

🎮 Efectos de Sonido

Sonidos comunes en juegos y aplicaciones:

📊 Visualizador de Audio

Las barras se mueven cuando tocas sonidos:

✨ Efectos de Partículas

¡Haz clic dentro del área para crear partículas flotantes!

👆 Haz clic aquí

// Crear partículas con JavaScript
function crearParticulas(event) {
    const emojis = ['⭐', '✨', '🌟', '💫'];
    
    for (let i = 0; i < 5; i++) {
        const particula = document.createElement('span');
        particula.className = 'particula';
        particula.textContent = emojis[Math.floor(Math.random() * emojis.length)];
        particula.style.left = event.offsetX + 'px';
        particula.style.top = event.offsetY + 'px';
        
        container.appendChild(particula);
        setTimeout(() => particula.remove(), 3000);
    }
}

⏱️ Cronómetro Interactivo

00:00:00

// Cronómetro con setInterval
let segundos = 0;
let intervalo;

function iniciar() {
    intervalo = setInterval(() => {
        segundos++;
        actualizarDisplay();
    }, 1000);
}

function pausar() {
    clearInterval(intervalo);
}

🎯 Quiz Final - Audio y Efectos

1. ¿Qué API crea sonidos en el navegador?

Sound API

Web Audio API

Music API

2. ¿Qué método ejecuta código repetidamente?

setTimeout()

setInterval()

setRepeat()

3. ¿Cómo detienes un setInterval?

stopInterval()

pauseInterval()

clearInterval()

4. ¿Para qué sirve createElement()?

Crear nuevos elementos HTML

Crear variables

Crear funciones

⭐ ⭐ ⭐

🎉 ¡FELICIDADES!

Has completado todos los niveles avanzados del tutorial.
¡Ahora eres un programador web experto!