boton play/pause con jquery

[00israel]

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

[Alexis88]

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

[00israel]

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.

[Alexis88]

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:

var audioplayer = $("#audio-player");
 

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

Saludos

[00israel]

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

un saludo

[00israel]

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.

[00israel]

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.

[Alexis88]

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