Simulate event click tag list Span

Question

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

Example HTML

<td><span class="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 of the page with 5 seconds interval.

I tried the following code

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

But he’s shooting all at once, where I might be missing?

Answer 1

In order for it to work as it wants it has to play at each interval a different sound, and not directly using the dial $('.audiospeak') that hits every sound. The solution I put gets all the Audios through this selector and passes them to an array. Then at each interval of the timer play one of the sounds and remove 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>
    <link rel="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><span class="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><span class="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>

    <button id="tocartudo">Tocar tudo</button>

Answer 2

One way to do this is by using a counter. In the case I used var conta = 1; which is being 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>
<span class="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>