Audio is playing after a delay on IPad

Question

I am trying to play two audio at the same time. One audio is using to provide background music and another one is using to provide speech. I am playing audio on click . After click, audio plays simultaneously and immediately on desktop but on IPad Air and Ipad pro audios play after a delay. I am not getting what is wrong with my code ?

<script>
 var audio1 = new Audio();
          var audio2 = new Audio();

$(document).ready(function(){   
         $(".playAudio").on("click touchstart" , function(){
          audio1.src= "media/audio/music.mp3";
          audio2.src= "media/audio/fullIntro.mp3";
          audio1.play();
          audio2.play();
          });
  });
</script>

HTML

<div class="playAudio"><span id="span1">Play Audio</span></div>

Please help !

Thanks !

score 0 · Answer 1 · answered Jul 11 '17 at 16:07

I highly suspect that your problem might be that both files aren't finished downloading at the same time. Hence the delay between the two audio files.

My suggestion would be to wait for every file to be downloaded before proceeding. You can do so with a little bit of Javascript :

Here's the code

    $(window).on("load", function() {
        $(".playAudio").on("click touchstart" , function()
      {
        audio1.src= "media/audio/music.mp3";
        audio2.src= "media/audio/fullIntro.mp3";
        audio1.play();
        audio2.play();
      });
    });

That should do the trick.

Credits : I found another question that may help you as well Official way to ask jQuery wait for all images to load before executing something

Audio is playing after a delay on IPad

1 Answers1