Playing sounds sequentially on android's google chrome (given the new restrictions on playing sound)

Question

I have a small app that plays sequential sounds (a teaching app playing the sillables of a word)

This could be accomplished by firing an event right after each sound stopped playing. Something like:

var sounds = new Array(new Audio("1.mp3"), new Audio("2.mp3"));
var i = -1;
playSnd();

function playSnd() {
   i++;
   if (i == sounds.length) return;
   sounds[i].addEventListener('ended', playSnd);
   sounds[i].play();
}

(source)

However, now android chrome has implemented some new restrictions on how to play sound: Sound events must all be fired by a user action.

So, when I run code very similar to the above, the first sound plays, and then I get

Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

How can a sequence of sounds, determined at run time, be played on Android's Chrome?

Answer 1

To start with, Google Chrome on Android has been having the limitation of not allowing applications to play HTML audio(s) without an explicit action by the user. However, it is different than how stock browser(s), in most cases, handles it.

The reason, as Chromium Org puts it, is that, Autoplay is not honored on android as it will cost data usage.

You may find more details on the same here.

Apart from the fact that this results in wastage of bandwidth, this also makes some sense, since mobile devices are used in public and in houses, where unsolicited sound from random Web sites could be a nuisance.

However, in the later versions, this idea was over ruled and Chrome on Android started allowing autoplay of HTML audios and videos on it. Again after a set of reviews and discussions, this feature was reverted to what it was, making it mandatory for a user action to invoke HTML audios and videos on the Chrome for Android.

Here is something that I found more on the same. As it says, the reason stated was that "We're going to gather some data about how users react to autoplaying videos in order to decide whether to keep this restriction". And hence the playing option without a user action was reverted back.

You can also find more about the blocking of _autoplay of audio(s) and video(s) here on Forbes and The Verge.

However, this is something that I can suggest you to try which will help you achieve what you intend to. All you have to do is copy this code and paste in your Chrome for Android. This helps you reset the flag which is default set to not allowing to play HTML audios and videos without user interaction:

chrome://flags/#disable-gesture-requirement-for-media-playback

OR

about:flags/#disable-gesture-requirement-for-media-playback

If the above procedure doesn't help/work for you, you can do this:

Go into chrome://flags OR about:flags (this will direct you to chrome://flags) and Enable the "Disable gesture requirement for media playback" option (which is actually the same as the above URL specified).