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.

Marwan Ansari
  • 123
  • 1
  • 10
  • I recreated your problem, and it works for me. You can even visit my ngrok tunnel on your phone to see it working. – Himanshu Pant Jul 07 '19 at 22:20
  • @HimanshuPant when you try it on mobile, only the first audio should play and not the next. Try it again. – Marwan Ansari Jul 07 '19 at 22:33
  • Hi, I belive you code works. try this [link](https://3e62bcd6.ngrok.io/audio.html). My apologies for having those weird playback tracks. – Himanshu Pant Jul 07 '19 at 22:49
  • @HimanshuPant Nope. Same issue. Are you sure you are using a mobile device? And which browser are you using? – Marwan Ansari Jul 07 '19 at 22:53
  • have you tried with `touch-action: manipulation` on the CSS file? – Hasan Patel Jul 07 '19 at 22:58
  • @HasanPatel what exactly should I do with that? Further information would be helpful. – Marwan Ansari Jul 07 '19 at 23:07
  • @MarwanAnsari I am testing it on my S10 with chrome. and it works. You might want to update to a better api. – Himanshu Pant Jul 07 '19 at 23:23
  • @HimanshuPant I'm using the standard API to play the audio files. Maybe your S10 doesn't come under the category of mobile devices and maybe comes under tablets or larger screens? I don't think there's a solution to my issue. – Marwan Ansari Jul 07 '19 at 23:25
  • @MarwanAnsari, there is always a solution to issues, that's why we are stack overflow! Try and figure it out and if you can't create a chat and we'll go over it thoroughly! – Himanshu Pant Jul 07 '19 at 23:43
  • @HimanshuPant I have solved the issue. Check out my comment: https://stackoverflow.com/questions/56926384/audio-plays-on-desktop-browsers-but-not-on-mobile-browsers/56927563#56927563 – Marwan Ansari Jul 08 '19 at 02:02
  • @MarwanAnsari What mobile browsers, specifically? iOS has a ton of issues with this. What you're doing will work on Android browsers, but anything on iOS is Safari, and Safari is picky. Generally, you have to replace the old source on the existing `Audio` instance. – Brad Jul 08 '19 at 02:17

1 Answers1

-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

Marwan Ansari
  • 123
  • 1
  • 10
  • 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 08 '19 at 02: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. – Himanshu Pant Jul 08 '19 at 02: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. – Marwan Ansari Jul 08 '19 at 03: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 08 '19 at 03:34
  • @Brad https://stackoverflow.com/questions/38596581/audio-is-unable-to-play-via-javascript-on-some-mobile-browsers https://stackoverflow.com/questions/49587059/playing-audio-on-mobile-browser-throgh-html-audio-tag https://stackoverflow.com/questions/46345883/why-audio-not-playing-on-mobile-browser – Marwan Ansari Jul 08 '19 at 03:40
  • @Brad If I've interpreted it incorrectly, then can you please explain what's happening in my case and also in the case of those comments I've linked? I'd love to learn what's causing the issue here. – Marwan Ansari Jul 08 '19 at 03:41
  • @MarwanAnsari Yes, you're misinterpreting. As I said, all you need is some user action, click a `click` event. This stuff about a dummy element is nonsense. – Brad Jul 08 '19 at 13:38
  • @Brad You're not understanding what I mean. In my case, the user only has to click ONCE to auto-play all the audios. This works on desktop browsers with just ONE click but not on mobile browsers. On mobile browsers, ONE CLICK = ONE AUDIO ONLY. Not more than one. If you need to play the next audio, there needs to an user click. Hence, you have to trick them by simulating user click on each auto-play audio loop. Because you cannot just trigger a click unless it's on an element. Hence the 'dummy element'. Moreover, the solution that I came up with clearly works while others don't. – Marwan Ansari Jul 08 '19 at 18:43
  • @MarwanAnsari You don't seem to be interested in actually solving your problem, so this will be my last comment on the issue. I'm only writing this in hopes it helps someone else at this point. Your conclusions are wrong. You don't need to fake a click, you can start playback on the click event from another element. You don't need this dummy element at all. And I assume by "mobile" you mean iOS browsers. For those (which are all Safari under-the-hood), you can handle the `ended` event, replace the audio `src` or `source` elements, and `.play()` programmatically without another click. – Brad Jul 08 '19 at 19:00