El audio web de API: Cómo añadir sonido a tu aplicación web

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

¿Qué pasó con el audio en la web? Durante un tiempo, la web fue la plataforma para presumir tus gustos musicales. Desde versiones MIDI de The Final Countdown borbotando en el fondo, hasta la reproducción automática de mp3 de MySpace en tu cara, el sonido estaba en todas partes.

Ya no más. Después de tanta decepción por estas atrocidades de experiencias de usuarios, los desarrolladores web se mantienen bien alejados de ella. Lamentablemente, el sonido ha pasado a un segundo plano en la web, mientras que las aplicaciones nativas florecen.

Piensa en el sonido de la notificación que escuchas al recibir un correo electrónico, o en el pequeño estallido cuando vas a actualizar la aplicación de Twitter. Estas aplicaciones muestran cómo el sonido puede ser parte integral de una gran experiencia de usuario.

En este tutorial te mostraré cómo devolver el sonido a la web, ¡de manera positiva!

El audio web de la API

El audio web de API es una forma potente y de alto rendimiento de manipular el sonido en el explorador. Antes de continuar con este tutorial, es posible que desees consultar el tutorial anterior de esta serie donde escribí el cómo hacer un sonido básico usando JavaScript, así como reproducir un archivo mp3.

Para este tutorial vamos a simular una página de pago que nos dará un audio el cual signifique que nuestro pagó fue hecho correctamente. Usaré Bootstrap para hacer que las cosas se vean más rápido.

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>My shop</h1>
                    <p>Are you ready to buy this item?</p>
                    <form action="">
                        <div class="form-group">
                            <label>Name on card</label>
                            <input type="text" class="form-control" value="Guybrush Threepwood" />
                        </div>
                        <div class="form-group">
                            <label>Card number</label>
                            <input type="text" class="form-control" value="1234-1234-1234-1234" />
                        </div>
                    </form>
                    <button id="buy-now-button" type="button" class="btn btn-primary"
                        data-loading-text="Processing..." data-complete-text="Success!">Buy now</button>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        
        <script src="scripts/success-sound.js"></script>
    </body>
</html>

Notarás que en la parte inferior he incluido un archivo llamado "success-sound.js". Aquí es donde escribiremos nuestro código para proporcionar comentarios de audio al usuario cuando su pago se realice correctamente. Una vez que hayas creado este archivo, lo primero que queremos hacer es crear un AudioContext. Es posible que recuerdes del último tutorial que un AudioContext es la forma en que accedemos a las diversas funciones del audio web de API.

var contexto = new AudioContext();

Osciladores

Una de las mejores cosas del audio web de API es que nos permite crear sonidos desde cero sin siquiera mirar un archivo de audio. Hacemos esto usando osciladores.

Los osciladores son una forma de crear el tono que podemos escuchar. Lo hacen generando una onda periódica a una cierta frecuencia. La forma de esta onda varía, pero los tipos más comunes son las ondas seno, cuadradas, triangulares y de diente de sierra. Todos estos tipos de ondas suenan diferentes. Vamos a crear dos osciladores de onda triangular.

var osc1 = context.createOscillator(),
    osc2 = context.createOscillator();
    
osc1.type = 'triangle';
osc2.type = 'triangle';

Los osciladores son muy ruidosos por defecto, por lo que a menos que queramos dar a nuestros usuarios el susto de sus vidas, debemos bajar un poco el volumen. Debido a que la API de audio web funciona encadenando nodos para canalizar el sonido, creamos y conectamos nuestros osciladores a un GainNode.

1	var volume = context.createGain();
2
3	volume.gain.value = 0.1;

Los nodos de ganancia multiplican el volumen del sonido que entra por el número que especifiques. Por lo tanto, en este caso el volumen será una décima parte de la señal que le llega.

Vamos a conectar todo.

// Connect oscillators to the GainNode
osc1.connect(volume);
osc2.connect(volume);

// Connect GainNode to the speakers
volume.connect(context.destination);

Luego comprueba que lo hemos hecho bien tocando los osciladores durante dos segundos.

// How long to play oscillator for (in seconds)
var duration = 2;

// When to start playing the oscillators
var startTime = context.currentTime;

// Start the oscillators
osc1.start(startTime);
osc2.start(startTime);

// Stop the oscillators 2 seconds from now
osc1.stop(startTime + duration);
osc1.stop(startTime + duration);

En este punto deberías escuchar un tono cuando cargues tu página. No es el sonido más sorprendente, y sé que estás de acuerdo con ello, pero es un comienzo.

Los osciladores que hemos creado se reproducen a una frecuencia predeterminada. Al cambiar esta frecuencia, podemos cambiar la nota musical que escuchas cuando se toca. Esto es lo que hará que nuestro tono sea un poco más agradable y es clave para la sensación que quieres invocar cuando tu usuario lo escuche. Cambiemos nuestro oscilador para que toque en la nota "B4", que es de 493,883Hz.

1	var frequency = 493.883;
2
3	osc1.frequency.value = frequency;
4	osc2.frequency.value = frequency;

Ahora, si cargamos la página, escucharás el tono de una manera diferente. Ya en este punto, estarás pensando: "¿Por qué tocamos dos osciladores con el mismo tono exactamente?" Bien, esto nos lleva a un pequeño truco que podemos hacer para que nuestro tono suene un poco mejor.

Si desafinamos nuestros osciladores para hacer que sus frecuencias sean ligeramente diferentes, terminamos con un bonito efecto de coro, haciendo que nuestro tono suene mucho mejor.

1	var frequency = 493.883;
2
3	osc1.frequency.value = frequency + 1;
4	osc2.frequency.value = frequency - 2;

Si bien nuestro pequeño sonido suena mucho mejor, termina muy abruptamente. Para que esto sea menos chocante, debemos bajar rápidamente el volumen al final del sonido; esto también se conoce como "desvanecimiento". Esto se hace a través de AudioParams que se utilizan para automatizar los valores de los nodos de audio, como la ganancia y la frecuencia. En el próximo tutorial de esta serie, hablaremos de AudioParams más detalladamente.

// Set the volume to be 0.1 just before the end of the tone
volume.gain.setValueAtTime(0.1, startTime + duration - 0.05);

// Make the volume ramp down to zero 0.1 seconds after the end of the tone
volume.gain.linearRampToValueAtTime(0, startTime + duration);

Lo que estamos diciendo aquí es que nos aseguremos de que el volumen está a 0,1, 0,05 segundos antes de que termine nuestro tono. A continuación, sigue bajando el volumen hasta que llegue a cero al mismo tiempo que termina nuestro tono.

Vamos a envolver nuestro código hasta ahora en una sola función y ver lo que tenemos.

// Play oscillators at certain frequency and for a certain time
var playNote = function (frequency, startTime, duration) {
    var osc1 = context.createOscillator(),
        osc2 = context.createOscillator(),
        volume = context.createGain();

    // Set oscillator wave type
    osc1.type = 'triangle';
    osc2.type = 'triangle';

    volume.gain.value = 0.1;    

    // Set up node routing
    osc1.connect(volume);
    osc2.connect(volume);
    volume.connect(context.destination);

    // Detune oscillators for chorus effect
    osc1.frequency.value = frequency + 1;
    osc2.frequency.value = frequency - 2;

    // Fade out
    volume.gain.setValueAtTime(0.1, startTime + duration - 0.05);
    volume.gain.linearRampToValueAtTime(0, startTime + duration);

    // Start oscillators
    osc1.start(startTime);
    osc2.start(startTime);

    // Stop oscillators
    osc1.stop(startTime + duration);
    osc2.stop(startTime + duration);
};

Para hacer esta función un poco más potente, he eliminado algunas de las variables y he permitido que pasen estos valores. Esto nos permite tocar diferentes notas a diferentes frecuencias. ¡Ahora es el momento de ser creativos!

Éxito

Piensa en lo que quieres que sientan tus usuarios cuando acaban de comprar algo en tu tienda online. Es una experiencia positiva: alguien ha comprado algo que quería para mejorar su vida de alguna manera, no ha habido errores y la transacción se ha procesado con éxito.

En cuanto al audio, la indicación del éxito es en realidad bastante sencilla. Un motivo musical que sube de tono al final siempre suena mucho más alegre que uno que baja. Ni siquiera necesitas tener una melodía o un montón de notas para transmitir esto. Para demostrar esta teoría, vamos a utilizar dos notas simples para nuestro motivo de éxito.

// Play a 'B' now that lasts for 0.116 seconds
playNote(493.883, context.currentTime, 0.116);

// Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds
playNote(659.255, context.currentTime + 0.116, 0.232);

Ahh, el dulce sonido del éxito.

Recuerda que sino te divierte tocar con osciladores, también puedes utilizar un archivo mp3. Lee el tutorial anterior para ver cómo.

Es mejor envolver estas dos llamadas a playNote en una sola llamada de función para que tengamos un gancho fácil para reproducir nuestro sonido.

var playSuccessSound = function () {
    // Play a 'B' now that lasts for 0.116 seconds
    playNote(493.883, context.currentTime, 0.116);

    // Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds
    playNote(659.255, context.currentTime + 0.116, 0.232);
};

Ahora depende de ti cómo quieres desencadenar este sonido y a qué evento deseas reproducirlo como reacción. A los efectos de este tutorial. vamos a fingir una llamada Ajax que tarda tres segundos. Utilizaremos esto para fingir que está ocurriendo alguna transacción del lado del servidor.

var myFakeAjaxCall = function (callback) {
    setTimeout(function () {
        callback();
    }, 3000);
};

Todo lo que tenemos que hacer ahora es añadir un receptor de eventos a nuestro botón de compra.

$('#buy-now-button').click(function () {
    myFakeAjaxCall(function () {
        playSuccessSound();
    });
});

Haz clic en el botón, espera tres segundos y, a continuación, baila con alegría mientras escucha la confirmación de audio de que tu transacción se realizó correctamente.

Para cambiar el texto del botón para indicar visualmente que algo ha sucedido, Bootstrap proporciona algunas funciones de ayuda al botón para intercambiar el texto proporcionado en un atributo de datos. Cómo funciona esto está fuera del alcance de este artículo, pero aquí está el código para completarlo.

$('#buy-now-button').click(function () {
    var that = this,
        $btn = $(this).button('loading');

    myFakeAjaxCall(function () {
        playSuccessSound();
        $btn.button('complete');
    });
});

Espero que este tutorial te haya resultado útil y te haya animado a añadir sonido (¡con responsabilidad!) a tu aplicación web. El código de este tutorial está en GitHub, así como una demostración de nuestro sonido final. El siguiente tutorial de esta serie es para aquellos que han cogido el gusto a los osciladores; construiremos un sintetizador de audio web.