Artículos
HTML5

Fin del audio en HTML5

17/Oct/2016

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.

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

<audio id="miaudio" controls="controls">  </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="miaudio" controls="controls">  
  <source src="mimusica.ogg" type="audio/ogg" />
  <source src="mimusica.mp3" type="audio/mpeg" />
  Tu navegador no soporta el elemento <code>audio</code>.
</audio>

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("miaudio");

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

reproductor.addEventListener("ended", function(){...});

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.

Código Fuente

Descárgate el código fuente de Fin del audio en HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
3 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios