Unable to get HTML5 Audio Tag to work in mobile browsers

Question

I have a web application that uses the HTML5 <audio> and for some reason, although it works fine on computers with Windows and Mac, it does not work on iOS and Android. Here is the 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

Usually you can’t automatically play audio or video files on mobile devices, this is often a limitation for OSs such as Android and iOS, so that sites don’t download huge media files and run them.

If such code is called from a click or touch handler, it will probably work, but not the way you do it now.

In addition, the <center> element is deprecated and you should no longer use it.

Answer 2

Not sure if this helps, but I did it instead, and it worked for me. While I do not play MP3, I get a voice to request the user through the loop.

 function speak(text) { var msg = new SpeechSynthesisUtterance(); var voices = speechSynthesis.getVoices(); msg.voice = voices[2]; msg.voiceURI = 'native'; msg.volume = 1; msg.rate = 1; msg.pitch = 1; msg.text = text; msg.lang = 'en-US'; speechSynthesis.speak(msg); } 

// insert this lower bit to call the function, and it will read the voice you enter on the mobile phone, that is .... rest works on android, did not try iphone.

they say ('rest');

Answer 3

You tried it like this:

 var aud=new Audio(file.mp3); aud.play();