Audio con html5
La etiqueta de audio permite que un documento html tenga pistas de sonido incrustadas. Estos archivos se pueden reproducir sin necesidad de utilizar librerías adicionales.
Cada navegador es capaz de reproducir distintos formatos de sonido. Hasta hace tiempo, no había un formato compatible con todos los navegadores. Esto daba como resultado tener el mismo contenido en diferentes formatos. Además de tener que definir dentro de la etiqueta audio las diferentes fuentes del contenido.
De esta manera, si el navegador no podía reproducir un tipo de archivo específico utilizaba el siguiente. Si no era compatible con esta etiqueta o no se encontraba el archivo de audio a reproducir se podía mostrar un mensaje como parte del documento.
Compatibilidad de los formatos de sonido en distintos navegadores.
| MP3 | Ogg Vorbis | WAV | |
| IE9+ | * | * | |
| Chrome | * | * | |
| Firefox | * | * | * |
Uso simple de la etiqueta
<audio src='audio/archivo.mp3' controls='controls'></audio>Algunos atributos que se pueden utilizar en la etiqueta de audio.
| Atributo | Descripción |
| src | Ruta del archivo de audio. |
| controls | Muestra los controles de reproducción. |
| autoplay | Indica si se inicia la reproducción al momento de cargar el archivo de audio |
| preload | Indica si se carga en memoria el archivo |
El atributo src únicamente permite hacer referencia a un archivo.
Para poder tener distintos archivos de audio para que se elija el tipo conveniente para cada navegador hay que usar la etiqueta source dentro de la etiqueta audio.
Etiqueta de audio con distintos formatos de archivo.
<audio controls='controls'>
<source src='archivo.mp3'></source>
<source src='archivo.ogg'></source>
<source src='archivo.wav'></source>
Tu navegador no es compatible con la etiqueta de audio
</audio>Con la etiqueta anterior tenemos distintos formatos de sonido asociados a la etiqueta de audio.
Todo funciona bien, incluso podemos utilizar únicamente MP3 si únicamente tenemos contemplado el uso en navegadores actuales. Formatos admitidos de audio y video en html5. Pero ¿qué pasa si queremos controlar la reproducción de la pista de audio con otros elementos de la interfaz? Por ejemplo tener un reproductor personalizado o si queremos limpiar el documento HTML. Para eso vamos a utilizar el API de Audio.
Audio API
Para manejar el audio desde JavaScript vamos a utilizar DOM Audio para crear el audio y HTMLMediaElement que es la interfaz para controlarlo.
Crear un elemento de audio con JavaScript
var reproductor = new Audio('audios/untitled.mp3');Algunos métodos y propiedades para el objeto HTMLAudioElement. Son los mismos para la etiqueta y para el elemento creado con JavaScript.
| Propiedad / Método | Descripción |
| play() | Reproduce el archivo de audio |
| pause() | Detiene la reproducción del archivo de audio sin modificar la posición en la que se encuentra. |
| autoplay | Indica si está definida la reproducción automática |
| controls | Indica si se están utilizando los controles predeterminados |
| currentSrc | Devuelve el archivo que se está reproduciendo |
| currentTime | posición que tiene la pista de audio (en segundos) |
| duration | Duración de la pista de audio en segundos |
| ended | indica si la pista de audio se terminó de reproducir |
| muted | indica si la pista de audio está silenciada |
| played |
Propiedad que indica el número de reproducciones del archivo. Esta propiedad devuelve el objeto TimesRange: que contiene: length: Número de reproducciones. start(): Segundo en el que inició la reproducción *. end(): Segundo en el que termino la reproducción * * Necesita como parámetro el índice de la reproducción de la cual queremos obtener la posición de inicio / fin. |
| paused | Indica si la reproducción está en pausa |
| volume | Nivel del a pista de audio. El valor puede ir de 0 a 1 (decimales). |
No existe la funcionalidad para detener la reproducción del archivo y posicionar la reproducción al comienzo – stop. En este caso la vamos a incluir en el prototipo de HTMLAudioElement – monkey patching – para que se encuentre disponible para todas las pistas de sonido que se encuentren en el documento – en caso de que haya más de una.
Detener / Stop
HTMLAudioElement.prototype.stop = function () {
this.pause();
this.currentTime = 0;
return this;
}Tampoco se encuentra la funcionalidad para silenciar el audio – mute – pero la vamos a incluir en el prototipo como en el caso anterior.
Silenciar / Mute
HTMLAudioElement.prototype.mute = function () {
if (this.volume == 0) {
this.volume = this.previous_volume;
} else {
this.previous_volume = this.volume;
this.volume = 0;
}
return this;
}
Ahora nos falta crear los controles para interactuar con la reproducción desde la interfaz gráfica.
Las tareas que vamos a realizar son las siguientes:
- Reproducir / Pausar
- Detener
- Silenciar / Restablecer sonido
- Volumen
- Visualizar qué parte se está reproduciendo.
- Modificar la posición del audio con la barra de indicación.
Para esto vamos a crear los elementos en el HTML que van a servir de interfaz.
<div class='player'>
<input type='range' class='current' value='0' min='0'>
<div class='play'>Reproducir</div>
<div class='stop'>Detener</div>
<div class='mute'>Silenciar</div>
<input type='range' class='volume' min='0' max='100' value='100'>
</div>Para reproducir el archivo verificamos si está en pausa. Si es así comenzamos la reproducción y cambiamos el contenido a “Pausar”. Si no está en pausa – se está reproduciendo – pausamos la reproducción y cambiamos el contenido a “Reproducir”.
var reproducir = document.getElementsByClassName('play')[0];
reproducir.addEventListener('click', function () {
if (reproductor.paused) {
reproductor.play();
this.innerHTML = 'Pausar';
} else {
reproductor.pause()
this.innerHTML = 'Reproducir';
}
})Para detener la reproducción totalmente utilizamos el método stop que creamos y cambiamos el contenido del botón reproducir a “Reproducir”.
detener.addEventListener('click', function () {
reproductor.stop();
reproducir.innerHTML = 'Reproducir';
})Para silenciar el audio vamos a utilizar la función mute que creamos.
silenciar.addEventListener('click', function () {
reproductor.mute();
})
Para tener un control para el volumen vamos a utilizar una etiqueta de entrada de tipo rango – input type=’range’ -.
Como límites vamos a utilizar 0 para el mínimo 100 para el máximo y el valor que va a tener va a ser 100.
Con JavaScript vamos a asociar cualquier cambio que el usuario genere y vamos a asignar el valor – dividido entre 100 porque el volumen va de 0 a 1 – al volumen del audio.
volumen.addEventListener('change', function () {
if (this.value > 0) {
reproductor.volume = this.value / 100;
} else {
reproductor.volume = 0;
}
})
Al igual que con el volumen, vamos a utilizar una etiqueta de entrada de tipo rango para visualizar qué sección se está reproduciendo.
Para esto vamos a utilizar timeupdate que se ejecuta cada que se actualiza el tiempo de reproducción de la pista de audio. Cada que suceda esto vamos a modificar la posición del deslizador para indicar el porcentaje de audio que se ha reproducido.
reproductor.addEventListener("timeupdate", function() {
var posicion = (100 / reproductor.duration) * reproductor.currentTime;
actual.value = posicion;
})Por último vamos a modificar la parte del audio que se está reproduciendo si deslizamos el valor en el input.
Cuando se cambia la posición del deslizador calculamos el tiempo en donde le correspondería a la pista de audio. Después actualizamos el tiempo actual – currentTime – de la pista de audio.
Cuando el usuario presione con el cursor el input vamos a pausar la reproducción para evitar que se actualice la posición del slider.
Cuando el usuario deje de presionar el input continuamos la reproducción de la pista de audio.
actual.addEventListener('change', function () {
var tiempo = reproductor.duration * (this.value / 100);
reproductor.currentTime = tiempo;
})
actual.addEventListener("mousedown", function() {
reproductor.pause();
});
actual.addEventListener("mouseup", function() {
reproductor.play();
})