4

No he usado mucho jquery y no consigo hacer esto:

Tengo un li con id="play1" al hacer click en él: reproducir una canción y al volver hacer click en "play1" pausar la reproducción. Así siempre, reproducir /parar.

<li id="play1">



$( "#play1" ).click(function() 
{
    //si play1 click ejecutar audio1.play();
    //otro click en play1 ejecutar audio1.pause();
});

¿usar un contador?

1
  • $( "#play1" ).click(function(e) { if(e ==null){ audio1.play(); } else { audio1.pause(); }); pero no me funciona Commented el 7 oct. 2016 a las 12:31

3 respuestas 3

3

Pon una bandera que indique el estado del reproductor. Puedes crear la bandera con JavaScript:

var playing = false;

$('#1').click(function() {
  if(!playing) {
    audio1.play();
    playing = true;
  } else {
    audio1.pause();
    playing = false;
});

O vía un atributo data-:

<div id="audio1" data-status="paused">...</div>

Y obtienes el atributo en el evento click:

$('#audio1').click(function() {
  var status = $(this).attr('data-status');
  if(status === "paused") {
    audio1.play();
    $(this).attr('data-status', 'playing');
  } else {
    audio1.pause();
    $(this).attr('data-status', 'paused');
  }
});
2

DEMO en JS BIN

Te dejo aquí un ejemplo elegante para poder añadir más filas de audios sin repetir una y otra vez el mismo código en jQuery.

$(document).on('click', '.playAudio', function(){
 
  var whichAudio = $('#audio' + $(this).data('audio'));
  
  whichAudio[0].paused
  ? whichAudio[0].play() 
  : whichAudio[0].pause();    
});
li {
  list-style: none;  
}

li:nth-child(odd) {
  cursor: pointer;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li class="playAudio" data-audio="1">Play audio #1</li>
  <li>-------------</li>
  <li class="playAudio" data-audio="2">Play audio #2</li>
  <li>-------------</li>
  <li class="playAudio" data-audio="3">Play audio #3</li>
</ul>

<audio id="audio1">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<audio id="audio2">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">
</audio>
<audio id="audio3">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3">
</audio>

0

Otra forma de hacerlo es usar los métodos bind y unbind de jquery:

<li id="play1">play/stop</li>

$("#play1").bind("click", click_1);
var click_1 = function() {
  //tu código
  $("#play1").unbind("click");
  $("#play1").bind("click", click_2);
}

var click_2 = function() {
  //tu código
  $("#play1").unbind("click");
  $("#play1").bind("click", click_1);
}

De esta forma, adjuntas el evento click del elemento #play1 a click_1 al ejecutar el código y si se ejecuta click_1, se desvincula click_1 y se vincula click_2. Luego en click_2, se desvincula click_2 y se vincula click_1.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.