La API de audio web ¿Qué es?

No te preocupes, ya está aquí! Una API que no solo blanqueará sus dientes y mejorará su postura, sino que también agregará sonido a su sitio web de una manera maravillosa *. ¡Es la API de audio web! ¿Nunca lo oí? No te preocupes Este tutorial te pondrá en marcha en muy poco tiempo.

La Web Audio API es una forma de alto nivel de crear y manipular sonido directamente en el navegador a través de JavaScript. Le permite generar audio desde cero o cargar y manipular cualquier archivo de audio existente que pueda tener. Es extremadamente potente, incluso con su propio sistema de temporización para proporcionar una reproducción de una fracción de segundo.

"¿No puedo usar el ¿Elemento? ”Bueno, sí, pero realmente depende de cuál sea su caso de uso. los element es perfecto para incrustar y reproducir clips de audio como música o podcasts, pero si necesita un poco más de control, como controlar el volumen mediante programación o agregar efectos, entonces la API de Web Audio será la correcta para su Tin Pan Alley.

Hacer un sonido

Vayamos de lleno. Para comenzar a jugar con la Web Audio API, debemos asegurarnos de que estamos usando un navegador que lo admita. Vamos a ver caniuse.com. Parece que el soporte del navegador es bastante bueno: solo Internet Explorer no es compatible con la API en este momento, pero eso cambiará pronto, ya que actualmente se está implementando para su inclusión en la próxima versión principal.

Mantengamos las cosas simples creando una página HTML básica con un

El AudioContext es un pequeño contenedor donde vivirá todo nuestro sonido. Proporciona acceso a la Web Audio API, que a su vez nos da acceso a algunas funciones muy poderosas. Antes de continuar, sin embargo, es esencial comprender un concepto importante de la API de audio web: los nodos.

Nodos

Tomemos como ejemplo al astrofísico de pelo rizado y al guitarrista de Queen, Brian May. Cuando Brian quiere tocar su guitarra, toma una ventaja de su guitarra y la conecta a un pedal de efectos como un pedal de distorsión. Luego conecta otra derivación de su pedal de distorsión a otro efecto o a su amplificador. Esto permite que el sonido viaje desde su guitarra, se manipule y luego se emita a un altavoz para que la gente pueda escuchar sus riffs de rock. Así es exactamente cómo funciona la Web Audio API. El sonido se transmite de un nodo a otro, y se manipula sobre la marcha, antes de que finalmente se emita a los altavoces..


Aquí hay un ejemplo básico. Agregue lo siguiente a su > etiqueta.

var context = new AudioContext (), oscillator = context.createOscillator (); // Conecte el oscilador a nuestros altavoces oscillator.connect (context.destination);

Aquí hemos creado un oscilador. Un oscilador es un tipo de generador de sonido que nos proporcionará un tono simple. Hemos tomado una ventaja del oscilador y lo hemos conectado a nuestros altavoces, también conocidos en la web de audio como context.destination.

Ahora que todo está conectado, solo necesitamos iniciar el oscilador para que podamos escucharlo. Asegúrese de que sus altavoces no estén demasiado altos!

// Iniciar el oscilador ahora oscillator.start (context.currentTime);

Ahora deberías escuchar algo cuando se cargue tu página. Para detener la reproducción de su oscilador después de unos segundos, simplemente agregue lo siguiente.

// Detener el oscilador dentro de 3 segundos oscillator.stop (context.currentTime + 3);

¿Oir algo? Bien hecho, acabas de hacer sonido en el navegador.!

Archivos de sonido

Ahora, puedes estar pensando "¿Osciladores ?! No tengo tiempo para esto, soy una persona de negocios importante con muchas reuniones de negocios y almuerzos de negocios a los que ir ", lo cual está perfectamente bien. Hacer sonido de esta manera no es para todos. Por suerte, hay otra manera.

Digamos que en su lugar quieres reproducir un archivo ordinario de mp3 de mill. La API de audio web también puede hacer esto. Primero tenemos que cargar el archivo de audio a través de nuestro viejo amigo XMLHttpRequest. Recuerde que cuando cargue archivos utilizando este método, su página deberá ser servida a través de un servidor y no solo cargada desde su sistema de archivos local. Para evitar complicaciones, asegúrese de que su archivo mp3 se sirva de la misma manera y desde la misma ubicación.

var request = new XMLHttpRequest (); request.open ('GET', 'my.mp3', true); request.responseType = 'arraybuffer'; request.onload = function () var undecodedAudio = request.response; ; petición enviada();

Cuando el archivo de audio está completamente cargado por el navegador, el onload el evento se activa y devuelve los datos de audio en el atributo de respuesta. En este punto, se almacena como ArrayBuffer, pero para obtener los datos de audio, debemos convertirlos en un AudioBuffer. Piense en un AudioBuffer como un pequeño contenedor que guarda nuestros datos de audio en la memoria para nosotros. Para ello utilizamos el decodeAudioData función.

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) // El contenido de nuestro mp3 ahora es un AudioBuffer console.log (buffer);); ;

Una vez que tengamos un AudioBuffer que contiene nuestros datos de audio, debemos encontrar una forma de reproducirlos. No puede reproducir un AudioBuffer directamente, se debe cargar en un especial AudioBufferSourceNode. Este nodo es como un reproductor de discos, mientras que el búfer es el disco de vinilo con la música. O para actualizar mi analogía, el nodo es como una plataforma de cinta y el búfer es un casete ...

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) // Crea el AudioBufferSourceNode var sourceBuffer = context.createBufferSource (); // Dile al AudioBufferSourceNode que use este AudioBuffer. sourceBuffer.buffer = buffer;); ;

El registro está ahora en el reproductor de discos listo para jugar. Pero recuerde, estamos usando la Web Audio API, y la Web Audio API requiere que vinculemos los nodos para enviar el sonido a nuestros altavoces. Así que hagamos lo que hicimos anteriormente con nuestro oscilador y conectemos nuestro nodo fuente a nuestros altavoces (context.destination).

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) var sourceBuffer = context.createBufferSource (); sourceBuffer.buffer = buffer; sourceBuffer.connect (context.destination);); ;

Nuevamente, ahora que todo está conectado, podemos comenzar a reproducir fácilmente el contenido del mp3 diciéndole al AudioBufferSourceNode que reproduzca en este preciso momento.. 

sourceBuffer.start (context.currentTime);

Hermoso!

Resumen

En este tutorial hemos aprendido cómo usar la Web Audio API para crear un sonido de forma nativa dentro del navegador, así como también cómo cargar y reproducir un archivo mp3. La API es capaz de mucho más, y espero mostrarle su potencial en futuros tutoriales.

Todo el código de este tutorial está disponible en GitHub.

* Lamentablemente, la API de audio web actualmente no admite blanquear los dientes o mejorar la postura.