No se puede hacer que la label de audio HTML5 funcione en browseres mobilees.

Tengo una aplicación web que utiliza la label HTML5 <audio> y, por alguna razón, aunque funciona bien en las PC con Windows y Mac, no funciona en iOS y Android. Aquí hay un fragment relevante de mi código:

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> 

Normalmente no puede reproducir automáticamente files de audio o video en dispositivos mobilees, esto es a menudo una restricción de los sistemas operativos, como Android e iOS, para evitar que los sitios descarguen enormes files multimedia y reproducirlos automáticamente.

Si se llama a dicho código desde un controller de clic o táctil, probablemente funcione, pero no de la manera en que lo está haciendo actualmente.

Además, el elemento <center> ha quedado en desuso y ya no debería usarlo más.

No estoy seguro si esto ayuda pero hice esto en su lugar y funcionó para mí. Si bien no estoy reproduciendo un MP3, estoy recibiendo una voz para invitar al usuario a través de un bucle.

 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); } 

// inserta este bit inferior para llamar a la function y leerá en la voz nativa de los mobilees lo que escribes, es decir, … el rest de las funciones de Android no han probado el iPhone.

hablar ('descansar');

¿Lo has intentado de esta manera?

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