Cómo hacer sonido con JavaScript (Web Audio, sin archivos)

Todo sonido en la web pasa por un AudioContext: es la mesa de mezcla donde se conectan las piezas de audio. Primero se crea, y después se le conectan osciladores —generadores de un tono puro— y controles de volumen.

Un detalle del navegador: por seguridad, el audio no puede arrancar solo al cargar la página. Tiene que empezar dentro de un clic o un toque real de la persona. Por eso este ejemplo usa un botón.

<button id="tocar" style="padding:12px 20px;font-size:15px">
  Tocar un sonido
</button>

<script>
  document.getElementById("tocar").addEventListener("click", () => {
    const audio = new AudioContext();
    const tono = audio.createOscillator();
    const volumen = audio.createGain();

    tono.frequency.value = 440;      // 440 Hz = un La musical
    volumen.gain.value = 0.15;       // 0 = silencio, 1 = a todo volumen

    tono.connect(volumen);
    volumen.connect(audio.destination);

    tono.start();
    tono.stop(audio.currentTime + 0.3);   // dura 0.3 segundos
  });
</script>

El oscilador tiene una propiedad type que cambia el timbre del sonido: "sine" suena suave y redondo, "square" suena parecido a un videojuego viejo, "sawtooth" suena áspero, y "triangle" queda en el medio.

<div style="display:flex;gap:8px;flex-wrap:wrap;padding:12px">
  <button data-tipo="sine">sine</button>
  <button data-tipo="square">square</button>
  <button data-tipo="sawtooth">sawtooth</button>
  <button data-tipo="triangle">triangle</button>
</div>

<script>
  document.querySelectorAll("[data-tipo]").forEach(boton => {
    boton.addEventListener("click", () => {
      const audio = new AudioContext();
      const tono = audio.createOscillator();
      const volumen = audio.createGain();

      tono.type = boton.dataset.tipo;    // acá está el cambio
      tono.frequency.value = 330;
      volumen.gain.value = 0.12;

      tono.connect(volumen);
      volumen.connect(audio.destination);
      tono.start();
      tono.stop(audio.currentTime + 0.4);
    });
  });
</script>

Un efecto de videojuego casi nunca es un solo tono fijo: normalmente sube o baja de frecuencia en el trayecto. Eso se hace con frequency.exponentialRampToValueAtTime() — "ve deslizando la frecuencia hasta este valor, en este tiempo".

<button id="acierto" style="padding:12px 20px;font-size:15px">
  ✓ Sonido de acierto
</button>
<button id="error" style="padding:12px 20px;font-size:15px;margin-left:8px">
  ✗ Sonido de error
</button>

<script>
  function sonido(desde, hasta, duracion) {
    const audio = new AudioContext();
    const tono = audio.createOscillator();
    const volumen = audio.createGain();

    tono.frequency.setValueAtTime(desde, audio.currentTime);
    tono.frequency.exponentialRampToValueAtTime(hasta, audio.currentTime + duracion);
    volumen.gain.value = 0.15;

    tono.connect(volumen);
    volumen.connect(audio.destination);
    tono.start();
    tono.stop(audio.currentTime + duracion);
  }

  document.getElementById("acierto").addEventListener("click", () => {
    sonido(440, 880, 0.15);     // sube: de 440 a 880
  });
  document.getElementById("error").addEventListener("click", () => {
    sonido(300, 100, 0.3);      // baja: de 300 a 100
  });
</script>

Con lo que sabes de setTimeout —o mejor, encadenando tiempos— puedes tocar varias notas seguidas. Una lista de notas más un bucle, otra vez.

<button id="melodia" style="padding:12px 20px;font-size:15px">
  🎵 Tocar melodía
</button>

<script>
  const notas = [262, 294, 330, 349, 392];   // Do, Re, Mi, Fa, Sol

  document.getElementById("melodia").addEventListener("click", () => {
    const audio = new AudioContext();

    notas.forEach((frecuencia, i) => {
      const tono = audio.createOscillator();
      const volumen = audio.createGain();
      tono.frequency.value = frecuencia;
      volumen.gain.value = 0.15;
      tono.connect(volumen);
      volumen.connect(audio.destination);

      const inicio = audio.currentTime + i * 0.2;   // cada nota, 0.2s después
      tono.start(inicio);
      tono.stop(inicio + 0.18);
    });
  });
</script>

AudioContext, osciladores y volumen, distintas formas de onda, deslizar la frecuencia para efectos de acierto y error, y encadenar notas para una melodía simple.

Nuestros cuatro juegos usan exactamente esta técnica para sus efectos — cero archivos de audio, todo generado con código.

Sonido en tus juegos

Sound in your games