5

On the ResponsiveVoice.JS website under the quirks section it states:

iOS TTS can’t be triggered without a direct user interaction, ResponsiveVoice JS resolves this

But, for the life of me, I can't get around this direct user interaction requirement. How do you get around this?

Here is the code snippet I'm trying to execute without user interaction I currently have located in the <head> element:

<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<script type="text/javascript"> 
    function speak_static_data(){
        responsiveVoice.speak('Test');
    } 
    setTimeout(function(){ speak_static_data(); }, 3000);
</script>

I would like to call responsiveVoice.speak('Test'); on page load in iOS without direct user interaction. How would I do this?

This same code snippet speaks fine on Android/Safari on desktop/Chrome on desktop but not in iOS.

Preston Connors
  • 397
  • 3
  • 14

1 Answers1

5

So I was searching around for this and hidden in their FAQs they have iOS Guidelines. They don't fully circumvent it, but instead get around it ever time after the first instance.

On iOS, some events such as Speech Synthesis, need to be triggered from a user action (i.e. a click). That causes ResponsiveVoice speak calls not to work on page load, for example.

With Speech Synthesis, that user triggered action only needs to be done once. Further direct calls after the first one will work as expected.

So, the recommended best practice is to add a “Start” button to the experience for the user to click, and use that as a initialization call to responsiveVoice.speak(). That call, if desired, can have a blank space as text, so there’s no impact to the user.

You don't need to actually have anything said, so having a button that the user just clicks that calls responsiveVoice is enough.

<button onclick="responsiveVoice.speak('');">Enable Voice</button>

Responsve Voice FAQ: https://responsivevoice.org/faq/

Community
  • 1
  • 1
Mitch Pomery
  • 493
  • 4
  • 14