Advertisement
  1. Web Design
  2. Web Development

La Web Audio API: ¿Qué es?

Scroll to top
Read Time: 6 min
This post is part of a series called The Web Audio API.
The Web Audio API: Adding Sound to Your Web App

() translation by (you can also view the original English article)

¡No te preocupes, está aquí! Una API que no solo blanqueará tus dientes y mejorará tu postura, sino añadirá sonido a tu sitio web de una forma maravillosa*. ¡Es la Web Audio API! ¿Nunca oíste hablar de ella? No te preocupes. Éste tutorial te preparará para que la tengas funcionando 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. Te permite ya sea generar audio desde cero o cargar y manipular cualquier archivo de audio que pudieras tener. Es extremadamente poderosa, aún teniendo su propio sistema de tiempo para ofrecer reproducción instantánea.

"¿No puedo usar solo el elemento <audio>?" Bueno, sí, pero realmente depende de para que se va a usar. El elemento <audio> es perfecto para incrustar y reproducir clips de audio tales como música o podcasts, pero si requieres un poco de mayor control, como controlar el volumen programáticamente o agregar efectos, entonces la Web Audio API será justo tu Genio Productor.

Crear un Sonido

Adentrémonos. Para comenzar a jugar con la Web Audio API, necesitamos asegurarnos que estamos usando un navegador que la soporta. Verifiquemos caniuse.com. Parece que el soporte de navegadores es muy bueno-solo Internet Explorer no soporta la API por el momento, pero eso cambiará pronto, pues actualmente está siendo implementada para ser incluída en el próximo lanzamiento.

Mantengamos las cosas sencillas al crear una página basica de HTML con un elemento <script> y el siguiente contenido.

1
<!doctype html>
2
<html>
3
    <head>
4
        <title>Web Audio API</title>

5
    </head>

6
    <body>
7
        <h1>Welcome to the Web Audio API</h1>

8
        <script>
9
            // Create the audio context

10
            var audioContext = new AudioContext();
11
12
            // If you're using Safari, you'll need to use this line instead

13
            var audioContext = new webkitAudioContext();
14
        </script>

15
    </body>

16
</html> 

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

Nodos

Tomemos al astrofísico de cabello rizado y guitarrista de Queen Brian May como un ejemplo. Cuando Brian quiere tocar su guitarra, toma un extremo del conector del instrumento y lo enchufa a un pedal de efectos como un pedal de distorsión. Luego enchuga otro extremo del conector de su pedal de distorsión a otro pedal d efectos o a su amplificador. Ésto permite al sonido viajar de su guitarra, ser manipulado, y luego ser enviado a un altavoz para que la gente pueda escuchar sus riffs de rock. Así es exactamente como funciona la Web Audio API. El sonido es pasado alrededor de un nodo al siguiente, siendo manipulado mientras avanza, antes de llegar finalmente a tus altavoces.

Aquí está un ejemplo básico. Agrega lo siguiente a tu etiqueta <script>.

1
var context = new AudioContext(),
2
    oscillator = context.createOscillator();
3
4
// Connect the oscillator to our speakers

5
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 un conector del oscilador y lo hemos enchufado a nuestros altavoces, de otra manera conocidos en el ambiene de audio web como context.destination.

Ahora que todo está conectado, solo necesitamos comenzar el oscilador para que podamos escucharlo. ¡Asegúrate que tus altavoces no estén a todo volumen!

1
// Start the oscillator now

2
oscillator.start(context.currentTime);

Ahora deberías escuchar algo cuando tu página se carga. Para que tu oscilador deje de reproducir después de varios segundos, simplemente agrega lo siguiente.

1
// Stop the oscillator 3 seconds from now

2
oscillator.stop(context.currentTime + 3);

¿Escuchas algo? ¡Bien hecho, acabas de crear sonido en el navegador!

Archivos de Audio

Ahora, puedes estar pensando "¡¿Osciladores?!" "¡No tengo tiempo para ésto, soy una persona importante de negocios con muchas reuniones y almuerzos!", lo que está perfectamente bien. Crear sonido de ésta forma no es para todos. Por suerte, hay otra manera.

Digamos en cambio que quieres reproducir un archivo común y corriente de mp3. La Web Audio API puede hacer ésto también. Primero tenemos que cargar el archivo de audio vía nuestro viejo amigo XMLHttpRequest. Recuerda que cuando se cargan archivos usando éste método, tu página tendrá que ser mostrada a través de un servidor y no solo cargada desde tu sistema de archivos locales. Para evitar cualquier complicación, asegúrate de que tu archivo mp3 sea servido de la misma forma y desde la misma ubicación.

1
var request = new XMLHttpRequest();
2
3
request.open('GET', 'my.mp3', true);
4
request.responseType = 'arraybuffer';
5
6
request.onload = function () {
7
    var undecodedAudio = request.response;
8
};
9
10
request.send();

Cuando el archivo de audio es totalmente cargado por el navegador, el evento onload se dispara y regresa los datos de audio en el atributo de respuesta. En este punto es almacenado como un ArrayBuffer, pero para sacar los datos de audio de él, tenemos que convertirlo a un AudioBuffer. Piensa en un AudioBuffer como un pequeño contenedor que alberga nuestros datos de audio en memoria para nosotros. Para hacer ésto usamos la función decodeAudioData.

1
request.onload = function () {
2
    var undecodedAudio = request.response;
3
4
    context.decodeAudioData(undecodedAudio, function (buffer) {
5
        // The contents of our mp3 is now an AudioBuffer

6
        console.log(buffer);
7
    });
8
};

Una vez que tenemos un AudioBuffer conteniendo nuestros datos de audio, necesitamos encontrar una manera de reproducirlo. No puedes reproducir un AudioBuffer directamente, necesita ser cargado en un AudioBufferSourceNode especial. Éste nodo es como un tocadiscos, mientras el buffer es un disco de vinil con la música en él. O para actualizar mi analogía, el nodo es como un tocacintas y el buffer es un cassette.

1
request.onload = function () {
2
    var undecodedAudio = request.response;
3
4
    context.decodeAudioData(undecodedAudio, function (buffer) {
5
        // Create the AudioBufferSourceNode

6
        var sourceBuffer = context.createBufferSource();
7
8
        // Tell the AudioBufferSourceNode to use this AudioBuffer.

9
        sourceBuffer.buffer = buffer;
10
    });
11
};

La grabación está ahora en la grabadora y lista para reproducirse. Pero recuerda, estamos usando la Web Audio API, y la Web Audio API requiere que enlacemos nodos para enviar el sonido a nuestros altavoces. Asi que solo hagamos lo que hicimos anteriormente con nuestro oscilador, y conectemos nuestro nodo de origen a nuestros altavoces (context.destination).

1
request.onload = function () {
2
    var undecodedAudio = request.response;
3
4
    context.decodeAudioData(undecodedAudio, function (buffer) {
5
        var sourceBuffer = context.createBufferSource();
6
7
        sourceBuffer.buffer = buffer;
8
        sourceBuffer.connect(context.destination);
9
    });
10
};

De nuevo, ahora que todo está conectado, podemos fácilmente comenzar a reproducir el contenido de los mp3 al decirle al AudioBufferSourceNode que reproduzca en éste mismo momento.

1
sourceBuffer.start(context.currentTime);

¡Precioso!

Resumen

En éste tutorial hemos aprendido como utilizar la Web Audio API para crear un sonido relativamente dentro del navegador, asi como cargar y reproducir un archivo mp3. La API es capaz de mucho mas, y ansío mostrarte su potencial en futuros tutoriales.

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

*La Web Audio API lamentablemente no soporta actualmente blanqueamiento de dientes o mejora de postura.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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 Web Design 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.