How can I activate ResponsiveVoice as soon as the page loads?

Question

This simple code works fine when I click "Play" button:

<html>
    <head>
        <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    </head>
    <body>


    <input 
      onclick="responsiveVoice.speak('Lily, you can not just freeze me out like this.','US English Female'); responsiveVoice.speak('love you.','US 

English Female');" 
      type="button" 
      value="Play" 
        />

    </body>

</html>

However, when I tried to put it into a function called on load, it didn't work:

<html>
    <head>
    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <script type="text/javascript"> 
        function read(){

            responsiveVoice.speak('Lily, you can not just freeze me out like this.','US English Female');
        responsiveVoice.speak('Love you.','US English Female');
        }
    </script>
</head>

<body onload="javascript:read();">
</body>

</html>

Do you know what the problem could be?

What error do you get? You don't require the `javascript:` part. You only use those on href properties of anchors, etc. Even then, I wouldn't use it. I'd hook into a click event before I'd use a javascript protocol. — ManoDestra, Apr 15 '16 at 18:23
Dev console can be brought up with F12, but I doubt that the error would helpful to someone starting up with javascript. — HopefullyHelpful, Apr 15 '16 at 18:24
Does it make any difference if a script is in the head or body tag ? Cause his is in the head tag. While the call is in the body tag. — HopefullyHelpful, Apr 15 '16 at 18:27
Do you hear any voices being spoken? When I try it, I get the last requested voice. Given that Javascript does not wait for one command to complete synchronously, then I can see why it is only playing the last requested voice. For me, it can only play one voice command at a time. — ManoDestra, Apr 15 '16 at 18:31
See also [Run ResponsiveVoice speech on page load](http://stackoverflow.com/q/33902050/1324) — Paul Roub, Feb 10 '17 at 20:12

score 3 · Answer 1 · edited May 23 '17 at 12:33

If you look at the responsive voice code they have a weird ~200 millisecond timeout in their code:

        a.enableFallbackMode()) : setTimeout(function() {
            var b = setInterval(function() {
                var c = window.speechSynthesis.getVoices();
                0 != c.length || null  != a.systemvoices && 
                0 != a.systemvoices.length ? (console.log("RV: Voice support ready"),
                a.systemVoicesReady(c),
                clearInterval(b)) : (console.log("Voice support NOT ready"),
                a.voicesupport_attempts++,
                a.voicesupport_attempts > a.VOICESUPPORT_ATTEMPTLIMIT && (clearInterval(b),
                null  != window.speechSynthesis ? a.iOS ? (a.iOS9 ? a.systemVoicesReady(a.cache_ios9_voices) : a.systemVoicesReady(a.cache_ios_voices),
                console.log("RV: Voice support ready (cached)")) : (console.log("RV: speechSynthesis present but no system voices found"),
                a.enableFallbackMode()) : 
                a.enableFallbackMode()))
            }, 100)
        }, 100);
        a.Dispatch("OnLoad")

If you try to use a voice before the timeout is up you will hit this console log:

1570RV: ERROR: No voice found for: US English Female

Which in my experience is bad and should probably be throwing an error.

If you want to keep using this script the only solution is to wait at least 201 ms in order to wait for all of the voices to load (but you only have to do this once)

let readItOnce = false;
function read(){
    const readIt = () => {
        readItOnce = true;
        responsiveVoice.speak('Lily, you can not just freeze me out like this.','US English Female');
        responsiveVoice.speak('Love you.','US English Female');
    }
    if (!readItOnce) { setTimeout(readIt, 201)}
    else { readIt(); }
}

Also do what is suggested here: https://stackoverflow.com/a/36654326/561731 in the onload of the function.

<html>
<head>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script type="text/javascript"> 
let readItOnce = false;
function read(){
    const readIt = () => {
        readItOnce = true;
        responsiveVoice.speak('Lily, you can not just freeze me out like this.','US English Female');
        responsiveVoice.speak('Love you.','US English Female');
    }
    if (!readItOnce) { setTimeout(readIt, 201)}
    else { readIt(); }
}
</script>
</head>

<body onload="read();">
</body>

</html>

It's horrifying (i.e. should anybody trust these developers?) that this seems to be the only officially-supported way of waiting for this library to be ready. I see from that code you quoted that they have an `OnLoad` event that you can listen to... but they don't seem to have any properties you can (officially) check to determine whether it has loaded or not, so there's no way to know if you need to wait for the event! Crazy! (I'd really prefer a `.ready` Promise if I could choose, but I don't know if that aligns with their platform requirements.) — Jeremy, Apr 15 '16 at 18:45
Yea... @JeremyBanks there are no errors or anything thrown in their code... so it is quite hard to debug unless you just search for the console logs... (which is very error prone) — Naftali, Apr 15 '16 at 18:46
Yea and their `OnLoad` event happened **before** the timeout is done... @JeremyBanks makes no sense... — Naftali, Apr 15 '16 at 18:47

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Incorrect:

<body onload="javascript:read();">

vs

Correct:

<body onload="read();">

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 15 '16 at 18:22

Naftali

144,921
39
244
303

On my browser, it works fine with or without the javascript protocol. The only issue is that it only plays the last requested voice. Which is what I'd expect. – ManoDestra Apr 15 '16 at 18:28
DOM hasn't fully loaded the lib – Jeff Puckett Apr 15 '16 at 18:28
@JeffPuckettII that should not matter. the script is loaded in the head tag. and the code is not dependent on the DOM – Naftali Apr 15 '16 at 18:29
The script is in the head tag, so it has been preloaded. – ManoDestra Apr 15 '16 at 18:30
it shouldn't, this is the fringe of my knowledge, but I can just see in the developers console log that it's not ready. maybe there's some additional initialization that has to happen with it. – Jeff Puckett Apr 15 '16 at 18:30

Jeff Puckett · Answer 3 · 2016-04-15T18:38:17.990

1

just wait a second for it to load, as they suggest

<html>
<head>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script type="text/javascript"> 
function read(){

    responsiveVoice.speak('Lily, you can not just freeze me out like this.','US English Female');
    responsiveVoice.speak('Love you.','US English Female');
}
setTimeout(function(){ read(); }, 1000);
</script>
</head>

<body>
</body>

</html>

edited Apr 15 '16 at 18:38

answered Apr 15 '16 at 18:28

Jeff Puckett

37,464
17
118
167

1

If you look at the console (if you put it it in the onload event) it just says `RV: ERROR: No voice found for: US English Female` So the code did load, there is just some issue in the speaker code. – Naftali Apr 15 '16 at 18:33
1

even [their documentation](http://responsivevoice.org/text-to-speech-sdk/automatically-speak-text-when-webpage-displays/) suggests to set a timeout – Jeff Puckett Apr 15 '16 at 18:37

How can I activate ResponsiveVoice as soon as the page loads?

3 Answers3

Incorrect:

Correct: