How to start playing second audio after first one has been ended?

Card Design
1

Hello everyone! I need to make a card template with two playing audios but the second one is different each time. There are 6 fields with audios but only two of them should be played.
The second audio should be determined by a random number and should be started after the first one has finished.

<script>
  {

    const audios = document.querySelectorAll(".soundLink");
    const rand = Math.floor(Math.random() * audios.length);

    let firstAudio = audios[0];
    let secondAudio = audios[rand + 1];

    firstAudio.click();

    //second audio should be played after the first one has been ended
    secondAudio.click();

  }
</script>

I tried to use an `.onended()’ method, but this code doesn’t work:

<script>
{

 const audios = document.querySelectorAll(".soundLink");
 const rand = Math.floor(Math.random() * audios.length);

  let firstAudio = audios[0];
  let secondAudio = audios[rand + 1];

  firstAudio.click();

  firstAudio.onended = function () {
    secondAudio.click();
  }

}
</script>

So, how to trigger playing the second audio after the first one has been finished?

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.