Botón play pause con audio HTML5

14/Jul/2015 HTML5 , , 1 Comentario

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? 😀

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

  1. <audio src="mimusica.mp3" controls>
  2. Tu navegador no soporta el elemento <code>audio</code>.
  3. </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.

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

  1. var boton = document.getElementById("boton");
  2. 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.

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

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

  1. v.play();
  2. this.innerHTML = "Pause";
  3. 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".

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

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

  1. boton.addEventListener("click", function(){
  2. if (!sound) {
  3. v.play();
  4. this.innerHTML = "Pause";
  5. sound = true;
  6. } else {
  7. v.pause();
  8. this.innerHTML = "Play";
  9. sound = false;
  10. }
  11. });

Vídeos sobre HTML5


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

Un comentario en “Botón play pause con audio HTML5”

Víctor Cuervo

alex

como seria la sintaxi completamente termina, y como puedo hacer una musica de soundcloud

¿Algo que nos quieras comentar?

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

*

*