Foros del Web » Programando para Internet » Jquery »

boton play/pause con jquery

Estas en el tema de boton play/pause con jquery en el foro de Jquery en Foros del Web. Buenas a todos, he metido este script de jquery para hacer que con un solo botón me haga la funcion de play y pause en ...
  #1 (permalink)  
Antiguo 18/05/2014, 02:32
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
boton play/pause con jquery

Buenas a todos, he metido este script de jquery para hacer que con un solo botón me haga la funcion de play y pause en una etiqueta de audio en HTML5.

Pero no consigo hacer que funcione. Alguien puede decirme que estoy haciendo mal?:

Código:
<script>
	 $(document).ready(function(){
	  	var audioplayer = document.getElementById("audio-player");
		$("#play-bt").click(function(){
		if (audioplayer.paused) {
	        audioplayer.play();

	        }
		 else {
                  audioplayer.pause();
		}
		$(this).toggleClass('pause');  /* style your toggle button according to the current state */
	         })
	  })
 </script>
gracias
  #2 (permalink)  
Antiguo 18/05/2014, 02:49
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: boton play/pause con jquery

Es extraño, pues lo acabo de probar y me funciona sin problemas. Coloca los puntos y comas al final de cada método y verifica que los Id sean los correctos. Fíjate en la consola (F12, luego clic en 'Console') si se muestran errores.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 18/05/2014, 02:51
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: boton play/pause con jquery

he conseguido que asi, me funcione:

Código:
<script>
	  	$(document).ready(function(){
	  			var audio = $('audio')[0]
	  			$('#play-bt').click(function(){
	  				if (audio.paused){
	  				audio.play();
	  				}
	  				else {
	  				audio.pause();
	  				}
	  			});
	  	});
 </script>
Pero quiero que cambie el boton de play por otro de pause y no se como.
  #4 (permalink)  
Antiguo 18/05/2014, 03:00
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: boton play/pause con jquery

Entonces el problema estaba al momento de tomar al elemento <audio>, pues en el primer código, lo hacías por su id y ahora lo haces por el nombre de su etiqueta. La primera forma debió de funcionar, quizá no era el id correcto, aunque hubiera sido más sencillo que lo tomes como se suelen tomar a los elementos en jQuery.

Código Javascript:
Ver original
  1. var audioplayer = $("#audio-player");

De cualquier manera, debería de haber funcionado con la primera forma. En fin.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #5 (permalink)  
Antiguo 18/05/2014, 03:08
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: boton play/pause con jquery

Gracias Alexis, a ver si ahora consigo hacer lo de cambiar el icono

un saludo
  #6 (permalink)  
Antiguo 18/05/2014, 03:52
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: boton play/pause con jquery

vale, lo tengo, pero no llego a entender muy bien porque me esta funcionando ahora:

Código:
<script>
	  	$(document).ready(function(){
	  			var audio = $('audio')[0]
	  			$('#toggle').click(function(){
	  				if (audio.paused){
	  				audio.play();
	  				}
	  				else {
	  				audio.pause();
	  				}
	  				$(this).toggleClass('pause');
	  			});
	  	});
  	</script>
aparte de tener este codigo, me he creado un id:

Código:
<div id="toggle" class="play"></div>

al cual le he dado estilos y un par de clases, .play y .pause:

Código:
.play {
    background: url('../img/play.svg') no-repeat;
  }
.pause {
    background: url('../img/pause.svg') no-repeat;
  }
entiendo que lo hace todo el toggleClass pero he visto por ahí que la gente añadía o sustituia (no estoy seguro) aparte del anterior script otro , como este:

Código:
<script type="text/javascript">
      $(document).ready(function() {
        $('#toggle').bind("click", function() {
          if ($(this).attr("class") == "play")
             $(this).attr("class", "pause");
          else
             $(this).attr("class", "play");
        });
      });
    </script>
Si tenia los dos puestos no me funcionaba, pero al quitar este último ya me ha funcionado.

Igual se creaba algún conflicto entre ellos, si alguien pudiera explicarmelo, se lo agradecería.

un saludo.
  #7 (permalink)  
Antiguo 18/05/2014, 04:12
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 17 años, 10 meses
Puntos: 5
Respuesta: boton play/pause con jquery

Otra cosa que no llego a entender, es porque si meto el script en una carpeta, y lo vinculo desde el html, no me funciona. No se, no lo entiendo.

lo vinculo así:

Código:
<script type="text/javascript" src="js/audio.js"></script>
y no me lo coge, incluso , sacandolo de la carpeta y dejandolo suelto en el mismo nivel que el html, tampoco me lo coge, en cambio pongo el código directamente en el HTML, si me lo coge, no se porque pero no lo quiero así, lo quiero dentro de su carpeta.

Si alguien me puede ayudar tambien con esto.
  #8 (permalink)  
Antiguo 18/05/2014, 17:43
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: boton play/pause con jquery

Asegúrate de que la ruta sea la correcta y no haya problemas con los niveles. Fíjate si se muestra algún error en la consola.

Saludos
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Etiquetas: boton
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:40.