La Web Audio API: Crea Tu Propio Sintetizador Web

() translation by (you can also view the original English article)

Robert Moog creó uno de los primeros sintetizadores modulares comerciales que cobró mucha fama. Sus inventos consistían de montones de cables y botones, permitiendo a los músicos crear sonidos nunca antes escuchados. Éstos instrumentos no eran baratos, costaban miles de dólares, incluso el modelo más básico.

Ahora, gracias a la Web Audio API, podemos crear nuestro propio sintetizador que podemos configurar a nuestro gusto por el gran total de $0. No solo eso, podemos distribuir nuestro sintetizador instantáneamente a cualquiera no importando su ubicación en el mundo gracias a la web.

Si no has leído los tutoriales previos en ésta serie de Audio Web, te sugeriría retrocedieras y los leyeras antes de continuar con éste, pues cubren las bases de usar la Web Audio API y crear un sonido desde cero.

Iniciar

Comencemos por crear una página HTML básica.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Add sound to your web app</title>
        <link rel="stylesheet" href="styles/main.css">
    </head>
    <body>
        <div class="container">
            <h1>Synthesizer!</h1>
        </div>
    </body>
</html>

Y algún estilo básico en nuestro archivo styles/main.css.

body {
    font-family: sans-serif;   
}

.container {
    margin: auto;
    width: 800px;
}

Teclado

Quizá lo más importante que necesita tu sintetizador es un teclado. Por fortuna, hemos creado un pequeño snippet de Javascript que agregará un teclado virtual a tu página. Descarga una copia de Qwerty Hancock y especifícalo en la parte inferior de tu página así.

1	<script src="scripts/qwerty-hancock.min.js"></script>

Luego agrega un div vacío a tu página con un id de "keyboard" (teclado).

1	<div id="keyboard"></div>

Éste es el lugar en la página en donde será insertado el teclado.

También queremos establecer un archivo JavaScript dedicado para nuestro sintetizador, asi que creemos eso también y especifiquémoslo después de donde hemos incluído Qwerty Hancock.

1	<script src="scripts/qwerty-hancock.min.js"></script>
2	<script src="scripts/synth.js"></script>

Dentro de synth.js inicializaremos nuestro teclado haciendo lo siguiente.

var keyboard = new QwertyHancock({
     id: 'keyboard',
     width: 600,
     height: 150,
     octaves: 2
});

Ésto dice a nuestra página insertar una instancia de nuestro teclado en el elemento con el id de "keyboard", redimensiónalo a 600 X 150 px, y haz que el número de teclas en el teclado cubran dos octavos. Guarda y actualiza tu navegador para ver un maravilloso teclado en la pantalla. Usa las teclas, tus dedos, o tu mouse para ver notas que se iluminan mientras las presionas.

Qwerty Hancok nos proporciona dos escuchadores de eventos, keyUp y KeyDown. Ésto nos permite conectar al teclado y escribir código que se ejecuta cuando el teclado es presionado. También nos dice que nota fue presionada, y su correspondiente frecuencia en hertz.

keyboard.keyDown = function (note, frequency) {
    console.log('Note', note, 'has been pressed');
    console.log('Its frequency is', frequency);
};

keyboard.keyUp = function (note, frequency) {
    console.log('Note', note, 'has been released');
    console.log('Its frequency was', frequency);
};

Oscilar Rudamente

Comencemos un oscilador cuando una tecla es presionada. Lo detendremos después de un segundo asi no continúa permanentemente.

var context = new AudioContext();

keyboard.keyDown = function (note, frequency) {
    var osc = context.createOscillator();

    osc.connect(context.destination);

    osc.start(context.currentTime);
    osc.stop(context.currentTime + 1);
};

¿Por qué estamos creando el oscilador dentro de la función keyDown? ¿No es eso ineficaz? Osciladores son diseñados para ser ligeros y ser desechados después de usarse. De hecho puedes usarlos solo una vez. Piensa en ellos como una clase de bizarro fuego artificial de sonido.

Ahora cuando presionamos una tecla, escuchamos un sonido. Es un poco fuerte, asi que creemos un gainNode para actuar como un control de volumen general.

var context = new AudioContext(),
    masterVolume = context.createGain();

masterVolume.gain.value = 0.3;
masterVolume.connect(context.destination);

keyboard.keyDown = function (note, frequency) {
    var osc = context.createOscillator();

    osc.connect(masterVolume);
    masterVolume.connect(context.destination);

    osc.start(context.currentTime);
    osc.stop(context.currentTime + 1);
};

Un teclado que toca una sola nota una y otra vez no es muy divertido, asi que conectemos la frecuencia al oscilador antes que comencemos a tocarlo.

1	osc.frequency.value = frequency;

Grandioso. Ahora necesitamos detener el oscilador que toca después de levantar una tecla en lugar de después de un segundo. Debido a que estamos creando el oscilador dentro de la función keyDown, necesitamos identificar que oscilador está tocando que frecuencia para detenerlo cuando la tecla es liberada. Una simple forma de hacer ésto es crear un objeto vacío y agregar las frecuencias como teclas, junto con que oscilador está tocando esa frecuencia como su valor.

var oscillators = {};

keyboard.keyDown = function (note, frequency) {
    // Previous code here

    oscillators[frequency] = osc;

    osc.start(context.currentTime);
};

Ésto significa que podemos fácilmente usar la frecuencia que tenemos de nuestra función noteUp para detener ese oscilador específico.

1	keyboard.keyUp = function (note, frequency) {
2	oscillators[frequency].stop(context.currentTime);
3	};

¡Ahora tenemos un sintetizador (muy básico) totalmente funcionando en el navegador! Ok, no suena magnífico por el momento, pero veamos si podemos cambiar eso.

Lo primero que tenemos que hacer es cambiar el tipo de onda que da el oscilador. Hay cuatro tipos básicos para elegir: sinusoide, cuadrada, triángular y diente de sierra. Cada forma de onda suena diferente. Toca varias de ellas y elige tu favorita. Para éste ejemplo, elegiré "sawtooth" (diente de sierra).

1	osc.type = 'sawtooth';

Bien, esa suena mejor.

Es muy raro que encuentres un sintetizador que use un solo oscilador. La mayoría de los sintetizadores logran su sonido al combinar diferentes osciladores de diferentes tipos. Veamos como suena si agregamos otro. Recuerda, necesitamos duplicar todas nuestras conexiones, y necesitaremos agregar osciladores de la misma frecuencia a un array (arreglo). Ésto significa que podemos iterar por ellos para detener todos los osciladores que están reproduciendo la misma nota.

keyboard.keyDown = function (note, frequency) {
    var osc = context.createOscillator(),
        osc2 = context.createOscillator();

    osc.frequency.value = frequency;
    osc.type = 'sawtooth';

    osc2.frequency.value = frequency;
    osc2.type = 'triangle';

    osc.connect(masterVolume);
    osc2.connect(masterVolume);

    masterVolume.connect(context.destination);

    oscillators[frequency] = [osc, osc2];

    osc.start(context.currentTime);
    osc2.start(context.currentTime);
};

keyboard.keyUp = function (note, frequency) {
    oscillators[frequency].forEach(function (oscillator) {
        oscillator.stop(context.currentTime);
    });
};

Para finalizar, usemos un truco que aprendimos en el tutorial previo. Podemos agregar un poco de coro para añadir más brillo a nuestro sonido al sintonizar los osciladores ligeramente.

1	osc.detune.value = -10;
2	osc2.detune.value = 10;

¡Precioso, un sintetizador Kraftwerk estaría orgulloso de él! Practica tocando con el artículo finalizado, o copia el repo en Github para modificar el sintetizador a tu gusto.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!