Can't make HTML5 Audio Tag to work on mobile browsers

Question

I have a web app that uses the HTML5 <audio> tag and for some reason, while it works fine on Windows and Mac PCs, it doesn't work on iOS and Android. Here's a relevant snippet of my code:

Javascript:

var audioElement = document.querySelector('#audioplayer');
var source = document.querySelector('#mp3');
source.src = tokObject._url;
audioElement.load();
audioElement.play();

HTML:

<center>
    <audio id="audioplayer" style="width:480px;">
        <source id="mp3" src="random-placeholder" type="audio/mp3" />
    </audio>
</center>

Answer 1

You normally can't autoplay audio or video files on mobile devices, this is often a restriction by the OSes such as Android and iOS to stop sites from downloading huge media files and autoplaying them.

If such code is called from within a click or touch handler, it will probably work, but not the way you are currently doing it.

Also, the <center> element has been deprecated and you shouldn't use it anymore.