Fin del audio en HTML5

17/Oct/2016 HTML5 , , , , Deja un comentario

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.

  1. <audio id="miaudio" controls>
  2. </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.

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

  1. 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.

  1. eproductor.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.

  1. eproductor.addEventListener("ended", function(){
  2. var texto = document.getElementById("texto");
  3. texto.innerHTML = "Fin de la canción";
  4. });

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

Vídeos sobre HTML5


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*