Fin del audio en HTML5

Ya hemos visto varios ejemplos de cómo podemos manejar el audio con HTML5. En este ejemplo vamos a ver cómo podemos controlar el fin del audio en HTML5. Es decir, saber cuándo ha terminado una canción, por si queremos realizar alguna acción.

Crear el elemento audio

Lo primero será crear el elemento audio, al cual vamos a dar un id para poder acceder a él posteriormente mediante Javascript.

<audio id="reproductor" controls>
</audio>

Añadir los orígenes de audio

Lo siguiente será añadir algunos orígenes de canciones mediante el elemento source. Como vemos en el ejemplo le vamos a poner un par de formatos diferentes.

<audio id="reproductor" controls>
  <source src="[cancion.mp](http://cancion.mp/)3" type="audio/mpeg">
  <source src="cancion.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento audio.
</audio>

Obtener la referencia al elemento

Ahora pasamos a codificar el contenido en Javascript. En este caso la idea es obtener una referencia al elemento de audio mediante su id y el método .getElementById()

var reproductor = document.getElementById('reproductor');

Controlar el evento ended

Para controlar el fin del audio en HTML5 deberemos de manejar el evento "ended". Así que nos valdremos del método .addEventListener().

reproductor.addEventListener("ended", function(){
  // Código a ejecutar cuando termine el audio
});

La función asociada al método .addEventListener() es la que nos sirve para poder asignar una funcionalidad. Por ejemplo la de mostrar un texto por pantalla.

reproductor.addEventListener("ended", function(){
  var texto = document.getElementById("texto");
  texto.innerHTML = "Fin de la canción";
});

De esta forma tan sencilla habremos conseguido controlar el fin del audio en HTML5.