Simulate event click tag list Span

Navigation
0

I have a page where I display some audios when the user clicks and fires the sound.

ExampleHTML

<td><spanclass="audiospeak" data-lang="en" data-aid="of">of</span></td>
<td><span class="audiospeak" data-lang="en" data-aid="and">and</span></td>

Now I need to implement a button to play all the sounds on the page within 5 seconds.

I tried the following code 

jQuery(function($){
    var interval1;
    setTimeout(function(){    
        interval1 = setInterval(function() 
        {
            $('.audiospeak').trigger('click');
        },
        5000);
    },
    5000);
})

But it is firing all at the same time, where can I be wrong?

    
asked by anonymous 14.02.2018 / 14:40

2 answers

1

In order for it to work the way you want, you have to play a different sound at each interval and not directly using the $('.audiospeak') selector that hits all sounds. The solution I get gets the audios all through this selector and passes them to an array. Then each timer interval touches one of the sounds and removes it from the array.

Example: 

$(".audiospeak").on("click", function(){
  $(this).next()[0].play();
});

$("#tocartudo").on("click", function(){
  let sons = []; //array para os sons todos
  $(".audiospeak").each(function(){
    sons.push($(this));
  });

  let timer = setInterval(function(){
    if (sons.length == 0){ //se já não há sons para o timer
      clearInterval(timer);
      $(".audiospeak").removeClass("ativo");
    }
    else {
      sons[0].trigger('click'); //tocar o primeiro do array
      $(".audiospeak").removeClass("ativo");
      sons[0].addClass("ativo");
      sons.splice(0,1); //remover o primeiro do array
    }
  }, 5000); 
});
.ativo {
  text-decoration:underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <table>
      <tr>
        <td><span class="audiospeak" data-lang="en" data-aid="of">of<i class="fa fa-volume-up"></i></span><audio src="http://sampleswap.org/samples-ghost/LOOPING%20AMBIENCE%20and%20NOISE/837[kb]074_heartbeat-noise-machine.wav.mp3"/></td><td><spanclass="audiospeak" data-lang="en" data-aid="and">the<i class="fa fa-volume-up"></i></span><audio src="http://sampleswap.org/samples-ghost/LOOPING%20AMBIENCE%20and%20NOISE/746[kb]083_pretty-noise-rhythm.wav.mp3"/></td><td><spanclass="audiospeak" data-lang="en" data-aid="and">and<i class="fa fa-volume-up"></i></span><audio src="http://sampleswap.org/samples-ghost/LOOPING%20AMBIENCE%20and%20NOISE/641[kb]097_panning-perception.wav.mp3"/></td></tr></table><buttonid="tocartudo">Tocar tudo</button>
    
14.02.2018 / 15:20
0

One way to do this is by using a counter. In this case, I have used var conta = 1; which is incremented until its value is equal to number of sounds - 1 , and stops playing.

Example: 

$(".audiospeak").click(function(){
   // aqui onde os sons são executados
   console.log($(this).data("aid"));
});

jQuery(function($){
   
   $("#tocatudo").click(function(){
      $this = $(this);
      $this.prop("disabled", true); // desabilito o botão
      var sons = $('.audiospeak');
      var conta = 1;
      
      // toca logo o primeiro
      $(sons[0]).trigger('click');
      
      var interval1 = setInterval(function() 
      {
         if(conta == sons.length-1){
            // toca o último e finaliza
            $(sons[sons.length-1]).trigger('click');
            clearInterval(interval1);
            $this.prop("disabled", false); // habilito o botão novamente
            console.log("fim!");
         }else{
            $(sons[conta]).trigger('click');
            conta++;
         }
      },
      5000);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><spanclass="audiospeak" data-lang="en" data-aid="the">the</span>
<span class="audiospeak" data-lang="en" data-aid="of">of</span>
<span class="audiospeak" data-lang="en" data-aid="and">and</span>
<br>
<button id="tocatudo" type="button">Tocar tudo</button>
    
14.02.2018 / 16:11
Jquery mask for real currency web api, how to login correctly?