Artículos
HTML5

Botón play pause con audio HTML5

14/Jul/2015

Mediante este ejemplo vamos a ver como podemos construir un botón play pause con audio HTML5 y que podamos poner en nuestra web.

El funcionamiento del botón play pause será el mismo que el botón de nuestros iPod. Cuando pulsemos sobre el botón se iniciará la canción y cambiaremos el contenido del dicho botón a pause. De esta forma cuando se vuelva a pulsar sobre el botón se parará la ejecución de la canción y el botón volverá a tener un play. Y de esta forma en bucle.

¿Más o menos entendido? :-D

Lo primero será cargar un audio en HTML5. Para ello vamos a apoyarnos en el elemento audio.

<audio src="mimusica.mp3" controls="controls">  
  Tu navegador no soporta el elemento <code>audio</code>.
</audio>

Vemos que hemos utilizado el atributo src para indicar el nombre del fichero mp3 que se va a reporoducir.

Lo siguiente será el insertar nuestro botón play pause. Este lo insertaremos con un sencillo elemento button de HTML5.

<button id="boton">Play</button>

El botón play pause aparecerá inicialmente con el texto «Play» para que podamos iniciar la canción.

Ahora tendremos que manejar los eventos del botón para poder capturar cada vez que este se pulse. Para ello vamos a utilizar el método addEventListener y en concreto capturaremos el evento «click».

var boton = document.getElementById("boton");
boton.addEventListener("click", function() { ... } );

Como tenemos que acceder a un elemento que está en la página -el botón- hemos utilizado el método getElementById mediante el id que tenía el botón para poder acceder a dicho objeto.

También vamos a tener que obtener una referencia del elemento de audio, ya que querremos pararlo y pausarlo. Así que repetimos el código. En este caso la referencia la hemos obtenido con otro método similar que es getElementsByTagName.

var v = document.getElementsByTagName("audio")[0];

Además, como último elemento vamos a definir una variable de control llamada «sound» que nos ayude a saber si está sonando el reproductor o no. Por defecto está a false, ya que el reproductor estará parado.

var sound = false;

Ahora vamos a la parte principal del botón play pause con audio HTML5. Esta será la que vaya dentro de la función click.

Si el reproductor está parado y pulsamos sobre el play deberemos de arrancar el reproductor mediante el método play, cambiar el texto del botón y modificar el estado de la variable «sound».

v.play();
this.innerHTML = "Pause";
sound = true;

En el caso del que el reproductor esté sonando pararemos la reproducción mediante el método pause, cambiaremos el texto del botón y modificaremos la variable «sound».

v.pause();
this.innerHTML = "Play";
sound = false;

El código completo para el evento sería el siguiente:

boton.addEventListener("click", function(){
 if (!sound) {
   v.play();
   this.innerHTML = "Pause";
   sound = true;
  } else {
   v.pause();
   this.innerHTML = "Play";
   sound = false;
  } 
});

 

Código Fuente

Descárgate el código fuente de Botón play pause con audio 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
5 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios