7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

El audio web de API: Cómo añadir sonido a tu aplicación web

Scroll to top
Read Time: 8 mins
This post is part of a series called The Web Audio API.
The Web Audio API: What Is It?
The Web Audio API: Make Your Own Web Synthesizer

Spanish (Español) translation by Holy Perez (you can also view the original English article)

¿Qué pasó 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 reproducción automática de mp3 de MySpace en tu cara, el sonido estaba en todas partes.

Ya no más.  Después de tanta decepció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 notificación que escuchas al recibir un correo electrónico, o en el pequeño estallido cuando vas a 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 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 escribí el cómo hacer un sonido básico usando JavaScript, así como reproducir un archivo mp3.

Para este tutorial vamos a simular una página de pago que nos dará un audio el cual signifique que nuestro pagó fue hecho correctamente.  Usaré Bootstrap para hacer que las cosas se vean más rápido.

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 se realice correctamente. Una vez que hayas creado este archivo, lo primero que queremos hacer es crear un AudioContext. Es posible que recuerdes del ú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 periódica a una cierta frecuencia. La forma de esta onda varía, pero los tipos má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.

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.

Los nodos de ganancia multiplican el volumen del sonido que entra por el número que especifiques. Por lo tanto, en este caso el volumen será una décima parte de la señal que le llega.

Vamos a conectar todo.

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

En este punto deberías escuchar un tono cuando cargues tu página. No es el sonido más sorprendente, y sé que está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 hará que nuestro tono sea un poco más agradable y es clave para la sensación que quieres invocar cuando tu usuario lo escuche. Cambiemos nuestro oscilador para que toque en la nota "B4", que es de 493,883Hz.

Ahora, si cargamos la página, escucharás el tono de una manera diferente.  Ya en este punto, estarás pensando: "¿Por qué tocamos dos osciladores con el mismo tono exactamente?" Bien, 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 mejor.

Si bien nuestro pequeño sonido suena mucho mejor, termina muy abruptamente. Para que esto sea menos chocante, debemos bajar rápidamente el volumen al final del sonido; esto también se conoce como "desvanecimiento". Esto se hace a través de AudioParams que se utilizan para automatizar los valores de los nodos de audio, como la ganancia y la frecuencia. En el próximo tutorial de esta serie, hablaremos de AudioParams más detalladamente.

Lo que estamos diciendo aquí es que nos aseguremos de que el volumen está a 0,1, 0,05 segundos antes de que termine nuestro tono. A continuación, sigue bajando el volumen hasta que llegue a cero al mismo tiempo que termina nuestro tono.

Vamos a envolver nuestro código hasta ahora en una sola función y ver lo que tenemos.

Para hacer esta función un poco má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!

É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 quería para mejorar su vida de alguna manera, no ha habido errores y la transacción se ha procesado con éxito.

En cuanto al audio, la indicación del éxito es en realidad bastante sencilla. Un motivo musical que sube de 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 demostrar esta teoría, vamos a utilizar dos notas simples para nuestro motivo de éxito.

Ahh, el dulce sonido del éxito.

Recuerda que sino te divierte tocar con osciladores, también puedes utilizar un archivo mp3. Lee el tutorial anterior para ver cómo.

Es mejor envolver estas dos llamadas a playNote en una sola llamada de función para que tengamos un gancho fácil para reproducir nuestro sonido.

Ahora depende de ti cómo quieres desencadenar este sonido y a qué evento deseas reproducirlo como reacción. A los efectos de este tutorial. vamos a fingir una llamada Ajax que tarda tres segundos. Utilizaremos esto para fingir que está ocurriendo alguna transacción del lado del servidor.

Todo lo que tenemos que hacer ahora es añadir un receptor de eventos a nuestro botón de compra.

Haz clic en el botón, espera tres segundos y, a continuación, baila con alegría mientras escucha la confirmación de audio de que tu transacción se realizó correctamente.

Para cambiar el texto del botón para indicar visualmente que algo ha sucedido, Bootstrap proporciona algunas funciones de ayuda al botón 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 completarlo.

Espero que este tutorial te haya resultado útil y te haya animado a añadir sonido (¡con responsabilidad!) a tu aplicación web. El código de este tutorial está en GitHub, así como una demostració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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.