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

Cómo crear un oscilador de audio con la API de audio web

Read Time: 9 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

La API de audio web es un modelo completamente separado de la etiqueta <audio>. Es una API de JavaScript para procesar y sintetizar audio para la web. El objetivo de esta API es incluir las capacidades que se encuentran en los juegos modernos y algunas de las tareas de mezcla, procesamiento y filtrado utilizadas en las aplicaciones de escritorio típicas.

Lo que estamos construyendo

Nuestra demostración, mostrada arriba, contiene tres entradas de tipo radio que, cuando se seleccionen, reproducirán el audio correlacionado al que hace referencia cada una. Al seleccionar un canal, se reproducirá nuestro audio y se mostrará el gráfico de frecuencia.

No voy a explicar cada línea del código de la demostración; sin embargo, explicaré los fragmentos principales que ayudan a mostrar la fuente de audio y su gráfico de frecuencia. Para comenzar, necesitaremos un poco de marcado.

El marcado

La parte más importante del marcado es el canvas, que será el elemento que va a mostrar nuestro osciloscopio. Si no estás familiarizado con canvas, te sugiero que leas este artículo titulado "Una introducción al trabajo con Canvas".

Ahora que tenemos el escenario preparado para mostrar el gráfico, necesitamos crear el audio.

Creación del audio

Comenzaremos definiendo un par de variables importantes para el contexto de audio y la ganancia. Estas variables se utilizarán para hacer referencias en un punto posterior del código.

La variable audioContext representa un gráfico de procesamiento de audio (una descripción completa de una red de procesamiento de señal de audio) construido a partir de módulos de audio vinculados entre sí. Cada uno está representado por un AudioNode y, cuando se conectan entre sí, crean un gráfico de enrutamiento de audio. Este contexto de audio controla tanto la creación de los nodos que contiene como la ejecución del procesamiento y decodificación del audio.

AudioContext debe crearse antes que cualquier otra cosa, ya que todo sucede dentro de un contexto.

Nuestra variable masterGain acepta una entrada de una o más fuentes de audio y da como resultado el volumen del audio, cuya ganancia ha sido ajustada a un nivel especificado por el parámetro de tipo a-rate GainNode.gain del nodo. Puedes pensar en la ganancia maestra como el volumen. Ahora crearemos una función para permitir la reproducción por parte del navegador.

Comienzo definiendo una variable source que se utilizará para hacer referencia al archivo de audio. En este caso estoy usando una URL que apunta a un servicio de streaming, pero también podría ser un archivo de audio. La línea audioContext define un objeto de audio y es el contexto que discutimos anteriormente. También verifico la compatibilidad usando el prefijo WebKit, pero actualmente el soporte está ampliamente difundido, con la excepción de IE11 y Opera Mini.

Una vez terminada nuestra configuración inicial, tendremos que crear y conectar masterGain al destino del audio. Para realizar este trabajo usaremos el método connect(), que te permite conectar una de las salidas del nodo a un destino.

La variable song crea un nuevo objeto de audio mediante el uso del constructor Audio(). Vas a necesitar un objeto de audio para que el contexto tenga una fuente que pueda reproducir a los oyentes.

La variable songSource es el elemento mágico que reproduce el audio y es en donde enviaremos nuestra fuente de audio. Mediante el uso de createMediaElementSource() es posible reproducir y manipular el audio como queramos. La variable final conecta nuestra fuente de audio con la ganancia maestra (volumen). La línea final, song.play(), es la llamada que da permiso para la reproducción del audio.

Este es nuestro resultado final, que contiene todas las líneas de código que hemos discutido hasta este punto. También me aseguro de hacer la llamada a esta función que se encuentra escrita en la última línea. A continuación, crearemos la forma de onda de audio.

Creación de la onda de audio

Para mostrar la onda de frecuencia de nuestra fuente de audio elegida, necesitamos crear la forma de onda.

La primera referencia a createAnalyser() expone los datos de tiempo y frecuencia del audio para generar visualizaciones de datos. Este método producirá un AnalyserNode que envía el flujo de audio de la entrada a la salida, pero te permite adquirir los datos generados, procesarlos y construir visualizaciones de audio que tengan exactamente una entrada y una salida. El nodo analizador se conectará a la ganancia maestra, que es la salida de nuestra ruta de señal y brinda la capacidad de analizar una fuente.

Este constructor Float32Array() representa una matriz de número de coma flotante de 32 bits. La propiedad frequencyBinCount de la interfaz AnalyserNode es un valor largo sin signo cuyo tamaño es la mitad del tamaño de la FFT (Transformada rápida de Fourier). Esto generalmente equivale a la cantidad de valores de datos que tendrás disponibles para usar con la visualización. Utilizamos este enfoque para recopilar nuestros datos de frecuencia repetidamente.

El método final, getFloatTimeDomainData, copia la forma de onda actual, o los datos de dominio de tiempo, en una matriz Float32Array que se le envía.

Toda esta cantidad de datos y procesamiento utilizan requestAnimationFrame() para recopilar datos de dominio de tiempo repetidamente y dibujar una salida de "estilo osciloscopio" de la entrada de audio actual. También hago otra llamada a getFloatTimeDomainData(), ya que esto debe actualizarse continuamente porque la fuente de audio es dinámica.

La combinación de todo el código discutido hasta ahora da como resultado toda la función que aparece arriba. La llamada a esta función se colocará dentro de nuestra función audioSetup, justo debajo de song.play(). Ya teniendo la forma de onda creada, todavía necesitamos dibujar esta información en la pantalla usando nuestro elemento canvas, y esta es la siguiente parte de nuestra discusión.

Dibujo de la onda de audio

Ahora que hemos creado nuestra forma de onda y poseemos los datos que necesitamos, tendremos que dibujarla en la pantalla; aquí es donde se introduce el elemento canvas.

El código anterior simplemente toma el elemento canvas para que podamos hacer referencia a él en nuestra función. La llamada a requestAnimationFrame en la parte superior de esta función programará el siguiente fotograma de animación. Esto se coloca primero para que podamos acercarnos lo más posible a 60FPS.

He implementado un estilo básico que dibujará el ancho y la altura del canvas. La altura se establece en un valor absoluto, mientras que el ancho será la longitud de la forma de onda producida por la fuente de audio.

El método clearRect(x, y, width, height) borrará todo el contenido dibujado previamente para que podamos dibujar continuamente el gráfico de frecuencia. También tendrás que asegurarte de llamar a beginPath() antes de comenzar a dibujar el nuevo fotograma después de llamar a clearRect(). Este método inicia una nueva ruta vaciando la lista de todas y cada una de las subrutas. La pieza final de este rompecabezas es un bucle para recorrer los datos que hemos obtenido y así poder dibujar continuamente este gráfico de frecuencia en la pantalla.

Este bucle que se muestra arriba dibuja nuestra forma de onda en el elemento canvas. Si registramos la longitud de la forma de onda en la consola (mientras reproducimos el audio), esto reportará el valor 1024 repetidamente. Este generalmente equivale a la cantidad de valores de datos con los que tendrás que jugar para la visualización. Si recuerdas la sección anterior para crear la forma de onda, obtenemos este valor de Float32Array(analyser.frequencyBinCount). Así es como podemos hacer referencia al valor 1024 que recorreremos con el bucle.

El método moveTo() moverá literalmente el punto de partida de una nueva subruta a las coordenadas actualizadas (x, y). El método lineTo() conecta el último punto de la subruta a las coordenadas x, y con una línea recta (pero en realidad no la dibuja). La pieza final es llamar al método stroke() proporcionado por canvas para que podamos dibujar la línea de frecuencia. Dejaré la parte que contiene las matemáticas como un desafío para el lector, así que asegúrate de publicar tu respuesta en los comentarios a continuación.

Esta es toda la función que hemos creado para dibujar la forma de onda a la que llamaremos después de song.play() que está contenida dentro de nuestra función audioSetup, que también incluye nuestra llamada a la función updateWaveForm.

Pensamientos de despedida

Solamente he explicado los fragmentos importantes para la demostración, pero asegúrate de leer las otras partes de mi demostración para que comprendas mejor cómo funcionan los botones de radio y el botón de inicio en relación con el código anterior, incluyendo el estilo CSS.

La API de audio web es realmente divertida para cualquier persona interesada en el audio de cualquier tipo, y te animo a profundizar más. También he recopilado de CodePen algunos ejemplos realmente divertidos que usan la API de audio web para crear una serie de ejemplos verdaderamente interesantes. ¡Que los disfrutes!

Referencias

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
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.