Cómo creamos Dynamic Sound con Web Audio API en Microsoft Flight Simulator Arcade

Cómo creamos Dynamic Sound con Web Audio API en Microsoft Flight Simulator Arcade

Antes de API de audio webHTML5 nos dio la elemento. Puede parecer difícil de recordar ahora, pero antes de la elemento, nuestra mejor opción para el sonido en un navegador fue un complemento. los El elemento fue, de hecho, emocionante pero tenía un enfoque bastante singular. Básicamente, era un reproductor de video sin video, bueno para audio largo como música o un podcast, pero inadecuado para las demandas de los juegos. Soportamos (o encontramos soluciones) problemas de bucle, límites de sonido concurrentes, fallas y falta total de acceso a los datos de sonido en sí.

Afortunadamente, nuestra paciencia ha valido la pena. Donde el puede haber faltado un elemento, la Web Audio API lo ofrece. Nos brinda un control sin precedentes sobre el sonido y es perfecto para todo, desde juegos hasta edición de sonido sofisticada. Todo esto con una API ordenada que es realmente divertida de usar y está bien respaldada. Seamos un poco más específicos: Web Audio le brinda acceso a los datos de forma de onda sin procesar de un sonido y le permite manipularlos, analizarlos, distorsionarlos o modificarlos. Es al audio lo que la API del lienzo es a los píxeles. Tiene acceso profundo y en su mayoría sin restricciones a los datos de sonido. ¡Es realmente poderoso! Este tutorial es el segundo de una serie sobre Arcada de vuelo – construido para demostrar lo que es posible en la plataforma web y en el nuevo Navegador Microsoft Edge y motor de renderizado EdgeHTML. El código interactivo y los ejemplos de este artículo también se encuentran en: http://www.flightarcade.com/learn/

Sonidos de vuelo

Incluso el primeras versiones de Flight Simulator se esforzó por recrear la sensación de volar mediante el sonido. Uno de los sonidos más importantes es el tono dinámico del motor que cambia de tono con el acelerador. Sabíamos que, a medida que volvíamos a imaginar el juego para la web, un ruido de motor estático realmente parecería plano, por lo que el tono dinámico del ruido del motor era un candidato obvio para Web Audio.

Puede pruébalo de forma interactiva aquí, Menos obvia (pero posiblemente más interesante) fue la voz de nuestro instructor de vuelo. En las primeras iteraciones de Flight Arcade, reproducimos la voz del instructor tal como se había grabado y sonaba como si saliera de una cabina de sonido. Nos dimos cuenta de que comenzamos a referirnos a la voz como el «narrador» en lugar del «instructor». De alguna manera ese sonido prístino rompió la ilusión del juego. No parecía correcto tener un audio tan perfecto sobre los ruidosos sonidos de la cabina. Entonces, en este caso, usamos Web Audio para aplicar algunas distorsiones simples a las instrucciones de voz y mejorar el realismo de aprender a volar. Hay una muestra del audio del instructor al final del artículo. En las secciones a continuación, le daremos una vista bastante detallada de cómo usamos la API de audio web para crear estos sonidos.

Uso de la API: AudioContext y fuentes de audio

El primer paso en cualquier proyecto de Web Audio es crear un Contexto de audio objeto. Algunos navegadores (incluido Chrome) aún requieren que esta API tenga un prefijo, por lo que el código se ve así:

Entonces necesitas un sonido. De hecho, puede generar sonidos desde cero con Web Audio API, pero para nuestros propósitos queríamos cargar una fuente de audio pregrabada. Si ya tenías un HTML elemento, podrías usarlo, pero muchas veces no lo harás. Después de todo, ¿quién necesita un elemento si tienes Web Audio? Lo más común es que simplemente ‘descargues el audio directamente en un búfer con una solicitud http:

Ahora tenemos un AudioContext y algunos datos de audio. El siguiente paso es hacer que estas cosas funcionen juntas. Para eso necesitamos…

nodos de audio

Casi todo lo que haces con Web Audio sucede a través de algún tipo de AudioNode y vienen en muchos sabores diferentes: algunos nodos se usan como fuentes de audio, otros como salidas de audio y otros como procesadores o analizadores de audio. Puedes encadenarlos para hacer cosas interesantes. Puede pensar en AudioContext como una especie de escenario de sonido. Los diversos instrumentos, amplificadores y altavoces que contiene serían todos diferentes tipos de AudioNodes. Trabajar con Web Audio API es muy parecido a conectar todas estas cosas juntas (instrumentos en, digamos, pedales de efectos y el pedal en amplificadores y luego altavoces, etc.). Bueno, para hacer algo interesante con nuestras fuentes de audio AudioContext recién adquiridas, primero debemos encapsular los datos de audio como un AudioNode de origen.

Reproducción

Eso es todo. Tenemos una fuente. Pero antes de que podamos reproducirlo, debemos conectarlo a un nodo de destino. Para mayor comodidad, AudioContext expone un nodo de destino predeterminado (por lo general, sus auriculares o parlantes). Una vez conectado, solo es cuestión de llamar a start y stop.

Vale la pena señalar que solo puede llamar a comienzo() una vez en cada nodo de origen. Eso significa que la «pausa» no se admite directamente. Una vez que se detiene una fuente, caduca. Afortunadamente, los nodos de origen son objetos económicos, diseñados para ser creados fácilmente (los datos de audio en sí mismos, recuerde, en un búfer separado). Entonces, si desea reanudar un sonido en pausa, simplemente puede crear un nuevo nodo de origen y llamar a start() con un parámetro de marca de tiempo. AudioContext tiene un reloj interno que puede usar para administrar las marcas de tiempo.

El sonido del motor

Eso es todo por lo básico, pero todo lo que hemos hecho hasta ahora (reproducción de audio simple) podría haberse hecho con el antiguo elemento. Para Flight Arcade, necesitábamos hacer algo más dinámico. Queríamos que el tono cambiara con la velocidad del motor. ¡Eso es bastante simple con Web Audio (y hubiera sido casi imposible sin él)! El nodo de origen tiene una propiedad de tasa que afecta la velocidad de reproducción. Para aumentar el tono, solo aumentamos la velocidad de reproducción:

El sonido del motor también necesita un bucle. Eso también es muy fácil (también hay una propiedad para ello):

Pero hay una trampa. Muchos formatos de audio (especialmente el audio comprimido) almacenan los datos de audio en cuadros de tamaño fijo y, en la mayoría de los casos, los datos de audio en sí mismos no «llenan» el cuadro final. Esto puede dejar un pequeño espacio al final del archivo de audio y provocar clics o fallas cuando esos archivos de audio se repiten. Los elementos de audio HTML estándar no ofrecen ningún tipo de control sobre esta brecha y puede ser un gran desafío para los juegos web que dependen del audio en bucle. Afortunadamente, la reproducción de audio sin interrupciones con Web Audio API es realmente sencilla. Es solo una cuestión de establecer una marca de tiempo para el comienzo y el final de la porción de bucle del audio (tenga en cuenta que estos valores son relativos a la fuente de audio en sí y no al reloj de AudioContext).

La voz del instructor

Hasta ahora, todo lo que hemos hecho ha sido con un nodo de origen (nuestro archivo de audio) y un nodo de salida (el destino de sonido que establecimos antes, probablemente sus altavoces), pero AudioNodes se puede usar para mucho más, incluida la manipulación de sonido o análisis. En Flight Arcade, usamos dos tipos de nodos (un ConvolverNode y un WaveShaperNode) para hacer que la voz del instructor suene como si viniera a través de un altavoz.

Circunvolución

Desde el especificación W3C:

La convolución es un proceso matemático que se puede aplicar a una señal de audio para lograr muchos efectos lineales interesantes de alta calidad. Muy a menudo, el efecto se utiliza para simular un espacio acústico como una sala de conciertos, una catedral o un anfiteatro al aire libre. También se puede usar para efectos de filtro complejos, como un sonido amortiguado que proviene del interior de un armario, sonido bajo el agua, sonido que proviene de un teléfono o que se reproduce a través de un gabinete de altavoz antiguo. Esta técnica se usa muy comúnmente en la producción de películas y música importantes y se considera extremadamente versátil y de alta calidad.

La convolución básicamente combina dos sonidos: un sonido para ser procesado (la voz del instructor) y un sonido llamado respuesta de impulso. La respuesta de impulso es, de hecho, un archivo de sonido, pero en realidad solo es útil para este tipo de proceso de convolución. Puede pensar en él como una especie de filtro de audio, diseñado para producir un efecto específico cuando se combina con otro sonido. El resultado suele ser mucho más realista que la simple manipulación matemática del audio. Para usarlo, creamos un nodo convolver, cargamos el audio que contiene la respuesta de impulso y luego conectamos los nodos.

Forma de onda

Para aumentar la distorsión, también usamos un nodo WaveShaper. Este tipo de nodo le permite aplicar distorsión matemática a la señal de audio para lograr efectos realmente dramáticos. La distorsión se define como una función de curva. Esas funciones pueden requerir algunas matemáticas complejas. Para el siguiente ejemplo, tomamos prestado uno bueno de nuestros amigos en MDN.

Observe la marcada diferencia entre la forma de onda original y la forma de onda con WaveShaper aplicado.

Puede pruébalo de forma interactiva aquí. El ejemplo anterior es una representación espectacular de todo lo que puede hacer con Web Audio API. ¡No solo estamos haciendo algunos cambios bastante dramáticos en el sonido directamente desde el navegador, sino que también estamos analizando la forma de onda y convirtiéndola en un elemento de lienzo! La Web Audio API es increíblemente potente y versátil y, francamente, ¡muy divertida!

Más prácticas con JavaScript

Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de JavaScript de código abierto y tenemos la misión de crear mucho más con Borde de Microsoft. Aquí hay algunos para revisar:

Y algunas herramientas gratuitas para empezar: código de estudio visual, Prueba de Azurey herramientas de prueba de navegador cruzado – todos disponibles para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)

#Cómo #creamos #Dynamic #Sound #con #Web #Audio #API #Microsoft #Flight #Simulator #Arcade

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.