API de Audio Javascript

Quizás la forma más sencilla de crear el audio, es hacerlo desde el HTML. Creando una etiqueta HTML <audio> con clase music que contenga la URL del fichero .mp3:

<audio class="music"
       src="https://manzdev.github.io/codevember2017/assets/eye-tiger.mp3">
</audio>

<script type="module">
  const music = document.querySelector(".music");
  music.play();
</script>

Luego, localizamos el audio buscándolo en el DOM con querySelector() y lo reproducimos llamando a su método play(). No obstante, hay otras formas de crear audios y reproducirlos, utilizando Javascript.

Observa que la constante music contiene una instancia del objeto Audio, al que se le pasa por parámetro la URL del archivo .mp3 que queremos inicializar. En lugar de una URL, también podríamos indicar simplemente el nombre de un archivo .mp3, con lo que el navegador buscaría dicho archivo en la misma ruta donde tenemos nuestro archivo .js con el código Javascript.

const url = "https://manzdev.github.io/codevember2017/assets/eye-tiger.mp3";
const music = new Audio(url);
music.play();

Posteriormente, ejecutamos la función .play() de la instancia music recién creada.

En este ejemplo, lo que hemos hecho realmente es crear una etiqueta HTML de audio igual que hicimos en el ejemplo HTML, sólo que usamos Javascript para indicarle el archivo de audio a inicializar, además de que esa etiqueta no reside «físicamente» en el documento HTML, si no que está en memoria, en la constante music.

En el siguiente ejemplo podemos ver un ejemplo análogo al anterior, pero en lugar de usar new Audio(), utilizamos el DOM de Javascript para crear la etiqueta <audio> en el HTML:

const audio = document.createElement("audio");
audio.preload = "auto";
audio.src = "https://manzdev.github.io/codevember2017/assets/eye-tiger.mp3";
audio.play();
document.body.append(audio);

La diferencia sobre el anterior, es que en esta última línea, de forma opcional hemos añadido la etiqueta <audio> creada al documento HTML en el que nos encontramos, justo antes de cerrar el </body>.

Si quieres más información sobre esto, mira el capítulo de trabajo en el DOM.

Propiedades básicas

Al crear un objeto de audio mediante Javascript (que no es más que una etiqueta HTML), podemos utilizar la notación de objeto para crear propiedades que reflejarán el valor en atributos de la etiqueta HTML. De esta forma, podemos utilizar las siguientes propiedades, que son todas booleanas:

Un ejemplo de su uso sería el siguiente, donde vemos que podemos tanto obtener su valor como asignar un booleano para modificarlo:

const audio = new Audio("sound.mp3");
audio.loop = true;
audio.controls = true;
audio.play();

Desde 2017, Chrome, Firefox y otros navegadores establecieron un cambio de políticas con el atributo de reproducción automática autoplay. Para evitar molestos comportamientos de audio indeseado en páginas webs, por defecto la autoreproducción sólo funciona si el usuario ha interactuado antes en la página. Lo recomendable es sólo reproducir música o sonido si el usuario hace una acción específica (click de ratón o similar).

Propiedades de reproducción

Si quisieramos modificar nuestro objeto de Audio para indicarle un archivo multimedia diferente, sólo tendríamos que asignarle un diferente a la propiedad url. De esta forma, tenemos muchas más propiedades, relacionadas con la reproducción multimedia:

Observa en el siguiente ejemplo que, .currentTime además de usarse para obtener el momento exacto en el que se encuentra la reproducción, también se puede utilizar para modificar ese momento. Por ejemplo, .currentTime = 0 se podría utilizar para inicializar el sonido:

const url = "https://manzdev.github.io/codevember2017/assets/eye-tiger.mp3";
const audio = new Audio(url);

audio.volume = 0.5;               // Volumen al 50%
console.log(audio.paused);        // true (no se está reproduciendo)
console.log(audio.currentTime);   // 0
console.log(audio.duration);      // 17.81551 (17 secs, 815.51 ms)
audio.currentTime = 5;            // Move to 5 secs
audio.play();                     // Starts audio from 5 sec

Propiedades de precarga

Cuando establecemos el atributo .src en un elemento de audio, el navegador automáticamente llama a la función .load() (ver más adelante) y se comienza a precargar el elemento de audio, dependiendo del valor que tenga la propiedad o atributo .preload. Veamos varias de las propiedades relacionadas con la precarga de un objeto de Audio:

Mientras que el valor preload puede indicarse como un atributo HTML, el resto de propiedades no se pueden indicar, y son exclusivas de la API de Javascript. Generalmente suelen utilizarse para saber el estado de carga de un elemento de audio o información relacionada.

En este primer bloque encontraremos los eventos que ocurren en momentos comunes de la reproducción de un recurso multimedia, como cuando comenzamos a reproducirlo, lo detenemos o vamos a un momento específico de su duración:

Veamos un ejemplo básico de uso de algunos de estos eventos:

const audio = new Audio("audio.mp3");

audio.addEventListener("play", () => {
  console.log("Se ha comenzado/reanudado la reproducción");
});

audio.addEventListener("pause", () => {
  console.log("Se ha pausado la reproducción");
});

Por otro lado, también podemos ejecutar una lógica específica cuando suceden ciertos eventos relacionados con el cambio de alguno de sus parámetros iniciales, como la velocidad de reproducción o el segundo actual de reproducción:

Observa en el siguiente ejemplo, que el evento timeupdate se ejecutará varias veces en el mismo segundo, no una sola vez por segundo como quizás se imagina inicialmente. Esto ocurre porque la precisión de la actualización de tiempo, afecta a milisegundos, por lo que se ejecuta varias veces en el mismo segundo:

const audio = new Audio("audio.mp3");

audio.addEventListener("timeupdate", () => {
  console.log("Current second: ", Number.parseInt(audio.currentTime));
});

Por último, tenemos múltiples eventos relacionados con la carga o precarga de los recursos multimedia, sus metadatos o el proceso de «buffering» donde la reproducción no se puede realizar porque aún no se ha descargado la suficiente cantidad de datos para reproducir:

Muchos de estos eventos nos permiten personalizar como actuará nuestra aplicación o web respecto a lo que haya sucedido.

Cuidado: No confundir el evento .onplay con el evento .onplaying. El segundo es el que ocurre cuando ya podemos reproducir un audio porque estaba en proceso de «buffering», mientras que el primero es el que se dispara cuando comenzamos o continuamos una reproducción multimedia.