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

1
votes

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?

3
javascriptresponsivevoice
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
Dev console can be brought up with F12, but I doubt that the error would helpful to someone starting up with javascript. – HopefullyHelpful
@HopefullyHelpful F12 is volume up for me ;-) – Naftali
document is not ready – Jeff Puckett
Then FN+F12 or something. – HopefullyHelpful

3 Answers

3
votes

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>
1
votes

Incorrect:

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

vs

Correct:

<body onload="read();">
1
votes

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>