Share
¿Qué pasó con el audio en la web? Durante un tiempo la web estuvo la Plataforma para lucir tus gustos en melodías. Desde las versiones MIDI de The Final Countdown que burbujean en el fondo, hasta la reproducción automática de mp3 de MySpace en tu cara, el sonido estaba en todas partes.
Ya no. Habiendo sido quemados por estas atrocidades de la experiencia del usuario, los desarrolladores web se mantienen alejados de ello. Lamentablemente, el sonido ha pasado a segundo plano en la web, mientras que las aplicaciones nativas florecen.
Piense en el sonido de la notificación que recibe cuando recibe un correo electrónico, o en el pequeño pop cuando intenta actualizar la aplicación de Twitter. Estas aplicaciones muestran cómo el sonido puede ser parte integral de una gran experiencia de usuario..
En este tutorial te mostraré cómo devolver el sonido a la web, de una buena manera!
La Web Audio API es una forma potente y de alto rendimiento de manipular el sonido en el navegador. Antes de continuar con este tutorial, es posible que desee consultar el tutorial anterior de esta serie, donde describí cómo hacer un sonido básico con JavaScript y reproducir un archivo mp3..
Para este tutorial, vamos a simular una página de pago que nos da una respuesta audible de que nuestro pago ha sido exitoso. Usaré Bootstrap para hacer que las cosas se vean mejor más rápido.
Añade sonido a tu aplicación web Mi tienda
¿Estás listo para comprar este artículo??
Notarás que en la parte inferior he incluido un archivo llamado "success-sound.js". Aquí es donde escribiremos nuestro código para proporcionar comentarios de audio al usuario cuando su pago sea exitoso. Una vez que haya creado este archivo, lo primero que queremos hacer es crear un AudioContext. Puede recordar del último tutorial que un AudioContext es la forma en que accedemos a las diversas funciones de la API de audio web..
var context = nuevo AudioContext ();
Una de las mejores cosas de la Web Audio API es que nos permite crear sonidos desde cero sin siquiera mirar un archivo de audio. Hacemos esto utilizando osciladores..
Los osciladores son una forma de crear un tono que podemos escuchar. Lo hacen generando una onda periódica a una cierta frecuencia. La forma de esta onda varía, pero los tipos más comunes son las ondas sinusoidales, 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 = 'triángulo'; osc2.type = 'triángulo';
Los osciladores son bastante ruidosos por defecto, por lo tanto, a menos que queramos asustar a nuestros usuarios, 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 nodo de ganancia..
var volumen = contexto.createGain (); volume.gain.value = 0.1;
Los nodos de ganancia multiplican el volumen del sonido que entra por el número que especifique. Entonces, en este caso, el volumen será una décima parte de la señal que se le pasa..
Vamos a conectar todo.
// Conectar los osciladores a GainNode osc1.connect (volumen); osc2.connect (volumen); // Conecte GainNode a los altavoces volume.connect (context.destination);
Luego, comprueba que lo hemos hecho bien tocando los osciladores durante dos segundos..
// Cuánto tiempo jugar el oscilador (en segundos) var duration = 2; // Cuándo comenzar a tocar los osciladores var startTime = context.currentTime; // Iniciar los osciladores osc1.start (startTime); osc2.start (startTime); // Detenga los osciladores dentro de 2 segundos osc1.stop (startTime + duration); osc1.stop (startTime + duration);
En este punto, debería estar escuchando un tono cuando vuelva a cargar su página. No es el sonido más sorprendente, estoy seguro de que estarás de acuerdo, pero es un comienzo!
Los osciladores que hemos creado están tocando a una frecuencia predeterminada. Al cambiar esta frecuencia, podemos cambiar la nota musical que escuchas cuando se toca. Esto es lo que hará que nuestro tono sea un poco más agradable y es clave para la sensación que desea invocar cuando el usuario la escucha. Cambiemos nuestro oscilador para tocar en la nota "B4", que es 493.883Hz.
frecuencia var = 493.883; osc1.frequency.value = frequency; osc2.frequency.value = frecuencia;
Ahora, si volvemos a cargar la página, escuchará el tono en un tono diferente. Puede estar pensando en este punto, "¿Por qué estamos tocando dos osciladores con el mismo tono exacto?" Bueno, esto nos lleva a un pequeñ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 más rico..
frecuencia var = 493.883; osc1.frequency.value = frequency + 1; osc2.frequency.value = frequency - 2;
Mientras que nuestro pequeño sonido suena mucho mejor, termina abruptamente. Para hacer esto menos discordante, deberíamos bajar rápidamente el volumen al final del sonido; Esto también se conoce como "desvanecimiento". Esto se realiza a través de AudioParams, que se utilizan para automatizar los valores de los nodos de audio, como la ganancia y la frecuencia. Entraremos en AudioParams con mucho más detalle en el siguiente tutorial de esta serie..
// Establezca el volumen en 0.1 justo antes del final del tono volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); // Baje el volumen a cero 0.1 segundos después del final del tono volume.gain.linearRampToValueAtTime (0, startTime + duration);
Lo que estamos diciendo aquí es asegurarse de que el volumen esté en 0.1, 0.05 segundos antes de que finalice nuestro tono. Luego sigue bajando el volumen hasta que llegue a cero al mismo tiempo que termina nuestro tono..
Envolvamos nuestro código hasta ahora en una sola función y veamos lo que tenemos.
// Jugar osciladores a cierta frecuencia y durante un cierto tiempo var playNote = función (frecuencia, tiempo de inicio, duración) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volume = context.createGain (); // Establecer el tipo de onda del oscilador osc1.type = 'triángulo'; osc2.type = 'triángulo'; volume.gain.value = 0.1; // Configurar el enrutamiento de nodos osc1.connect (volumen); osc2.connect (volumen); volume.connect (context.destination); // Desactivar los osciladores para el efecto de coro 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); // Iniciar osciladores osc1.start (startTime); osc2.start (startTime); // Detener los osciladores osc1.stop (startTime + duration); osc2.stop (startTime + duration); ;
Para hacer esta función un poco más poderosa, he eliminado algunas de las variables y he permitido que se pasen estos valores. Esto nos permite tocar diferentes notas en diferentes frecuencias. Ahora es el momento de ser creativo!
Piense en lo que quiere que sientan sus usuarios cuando acaban de comprar algo en su tienda en línea. Es una experiencia positiva: alguien compró algo que quería para mejorar su vida de alguna manera, no se produjeron errores y la transacción se procesó con éxito.
En audio, la indicación de éxito es en realidad bastante simple. Un motivo musical que sube en el tono al final siempre suena mucho más alegre que uno que baja. Ni siquiera necesitas tener una melodía o un montón de notas para transmitir esto. Para probar esta teoría, solo usemos dos notas individuales para nuestro motivo de éxito.
// Juega una 'B' ahora que dura 0.116 segundos playNote (493.883, context.currentTime, 0.116); // Toca una 'E' justo cuando termina la nota anterior, que dura 0.232 segundos playNote (659.255, context.currentTime + 0.116, 0.232);
Ahh, el dulce sonido del éxito..
Recuerde, si jugar con osciladores no es su idea de diversión, puede usar un archivo mp3 en su lugar. Lea el tutorial anterior para ver cómo.
Es mejor envolver estos dos playNote llamadas a una llamada de función única, así que tenemos un gancho fácil para reproducir nuestro sonido.
var playSuccessSound = function () // Play a 'B' ahora que dura 0.116 segundos playNote (493.883, context.currentTime, 0.116); // Toca una 'E' justo cuando termina la nota anterior, que dura 0.232 segundos playNote (659.255, context.currentTime + 0.116, 0.232); ;
Ahora depende de usted cómo desea activar este sonido y a qué evento desea reproducirlo como reacción. A los efectos de este tutorial. vamos a falsificar una llamada Ajax que toma tres segundos. Usaremos esto para pretender que alguna transacción del lado del servidor está sucediendo.
var myFakeAjaxCall = function (callback) setTimeout (function () callback ();, 3000); ;
Todo lo que tenemos que hacer ahora es agregar un detector de eventos a nuestro botón comprar ahora.
Accentsconagua
$ ('# buy-now-button'). click (function () myFakeAjaxCall (function () playSuccessSound ();););Haga clic en el botón, espere tres segundos y luego baile con alegría cuando escuche la confirmación de audio de que su transacción fue exitosa.
Para cambiar el texto en el botón para indicar visualmente que algo ha sucedido, Bootstrap proporciona algunas funciones de ayuda de botones para intercambiar el texto proporcionado en un atributo de datos. Cómo funciona esto está fuera del alcance de este artículo, pero aquí está el código para completar.
$ ('# buy-now-button'). click (function () var that = this, $ btn = $ (this) .button ('loading'); myFakeAjaxCall (function () playSuccessSound (); $ btn .button ('complete');););Espero que este tutorial le haya resultado útil y que se lo aliente a agregar sonido (¡de manera responsable!) A su aplicación web. El código para este tutorial está en GitHub, así como una demostración de nuestro sonido final. El siguiente tutorial de esta serie es para aquellos de ustedes que han atrapado el error del oscilador; Estaremos construyendo un sintetizador de audio web..
