0

I have this HTML code:

<div class="paragraph" id="1">Paragraph 1</div>
<div class="paragraph" id="2">Paragraph 2</div>
<div class="paragraph" id="3">Paragraph 3</div>
<div class="paragraph" id="4">Paragraph 4</div>
<div class="paragraph" id="5">Paragraph 5</div>

<span id="play">play</span>

And this JavaScript code:

function playAudio(totalParagraphs, currentParagraph) {

  var paragraph = $(".paragraph#"+currentParagraph);

  if(currentParagraph <= totalParagraphs) {

    paragraph.css('background', 'red');

    var audio = new Audio("audios/"+currentParagraph+".mp3");

    audio.play();

    audio.onended = () => {
      paragraph.css('background', 'white');
      playAudio(totalParagraphs, currentParagraph + 1);
    }

  }

}

$('#play').on('click', () => {

  let totalParagraphs = $('.paragraph').length, currentParagraph = 1;

  playAudio(totalParagraphs, currentParagraph);

});

When I click on the play, the playAudio() function is fired. In playAudio() function, it loads the audio for paragraph 1 and plays it, then when the audio ends, playAudio() is fired again to play the audio for the next paragraph and so on. This works perfectly on desktop browsers but does not on mobile browsers. No matter what mobile browser I use, Safari, Chrome, Mozilla, the same problem occurs.

On mobile, only the first audio plays and not the next.

I even tried to add an alert before audio.play() and I get the alert on mobile but the audio doesn't play.

I tried to search for a solution online but did not get a working one for my case. Any solutions would be appreciated.

11
  • I recreated your problem, and it works for me. You can even visit my ngrok tunnel on your phone to see it working. Jul 7, 2019 at 22:20
  • @HimanshuPant when you try it on mobile, only the first audio should play and not the next. Try it again. Jul 7, 2019 at 22:33
  • Hi, I belive you code works. try this link. My apologies for having those weird playback tracks. Jul 7, 2019 at 22:49
  • @HimanshuPant Nope. Same issue. Are you sure you are using a mobile device? And which browser are you using? Jul 7, 2019 at 22:53
  • have you tried with touch-action: manipulation on the CSS file? Jul 7, 2019 at 22:58

1 Answer 1

-1

The solution to my problem was quite simple but took a long time to figure out. The issue with mobile browsers is that they don't auto play an audio unless the user clicks on it. This is not the issue with desktop browsers. So the solution was to create a dummy element first:

<span id="dummyElement"></span>

Then create an invisible audio element:

<audio id="player"></audio>

Then create a variable for it:

var audio = $('#player')[0];

Then load the audio, but a different way:

var audio_url = "audio.mp3";
audio.src = audio_url;

Then trigger a click to the dummyElement:

$("#dummyElement").trigger("click");

Then create an on.click function for that dummyElement:

$('#dummyElement').on('click', () => {
  audio.play();
});

Done. Now the audio that is generated dynamically plays perfectly!

Similar issues others have had:

Audio is unable to play via javascript on some mobile browsers

playing audio on mobile browser throgh html audio tag

Why audio not playing on mobile browser

9
  • Your conclusions are incorrect. Desktop and mobile browsers alike will block auto-playing media. Additionally, neither require a dummy element. You only need a user interaction event to start playing.
    – Brad
    Jul 8, 2019 at 2:15
  • This does not seem valid. If we go by your logic, the initial click should've been enough for the browser to trust it. There are ambiguities in your answer. Jul 8, 2019 at 2:19
  • @Brad No they are not. You can find multiple SO answers saying the exact thing. Mobile browsers behave much differently for auto-playing media. Please try out the code on my question and you'll understand what I mean. In my case, the user is only required to click once and the audio auto-plays. This works on desktop browsers but not on mobile browsers hence a dummy element needs to be clicked on each auto-play loop to simulate a user click to trick the mobile browsers that the user has interacted. I'm sure my code can be improved but there's no other tricks AFAIK. Jul 8, 2019 at 3:15
  • @MarwanAnsari Please link to those Stack Overflow answers. If they say what you're saying, I'd like to go correct those as well. You've read some bad information or interpreted it incorrectly.
    – Brad
    Jul 8, 2019 at 3:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.