javascript - JS Speech Synthesis Issue on iOS -

i implemented basic web app relied on google's tts url generate clear mp3 files playback on front end.

this has since been subject additional security check, meaning have had update code base use alternative methods.

one such alternative javascript's speech synthesis api, i.e. speechsynthesisutterance() , window.speechsynthesis.speak('...'). works on desktop , laptop use on ios devices, rate of audio accelerated significantly.

can suggest can resolve this?

see below example code:

var msg = new speechsynthesisutterance();      msg.text = item.title;     msg.voice = "google uk english male";     msg.rate = 0.7;     msg.onend = function(){         console.log('message has ended');         $('.word-img').removeclass('img-isplaying');     };     msg.onerror = function(){         console.log('error speech api');         $('.word-img').removeclass('img-isplaying');     }; window.speechsynthesis.speak(msg); 

ios doesn't allow use new speechsynthesis-api programmatically. user must trigger action explicit. can understand decision. don't understand, why api not working in webapps, playing audio files. not working in ios's default safari, working in webapps.

here little trick:

<a id="trigger_me" onclick="speech_text()"></a> <script>     function speech_text() {         var msg = new speechsynthesisutterance();         /* ... */     }     /* , must trigger event #trigger_me */     $('#trigger_me').trigger('click'); </script> 

this working native dom elements. if add new tag programmatically dom like...

$('body').append('<a id="trigger_me" onclick="speech_text()"></a>'); 

... function not triggered. seems ios-safari registers events special internal functions once after domload.