如何在页面加载后立即激活 ResponsiveVoice？答案

【问题标题】：How can I activate ResponsiveVoice as soon as the page loads?如何在页面加载后立即激活 ResponsiveVoice？
【发布时间】：2016-04-15 18:20:53
【问题描述】：

当我点击“播放”按钮时，这个简单的代码可以正常工作：

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

但是，当我尝试将其放入加载时调用的函数中时，它不起作用：

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

你知道问题可能是什么吗？

【问题讨论】：

你得到什么错误？您不需要 javascript: 部分。您只能在锚的 href 属性等上使用它们。即使那样，我也不会使用它。在我使用 javascript 协议之前，我会挂钩点击事件。
开发控制台可以用 F12 调出，但我怀疑这个错误对开始使用 javascript 的人有帮助。
@HopefullyHelpful F12 对我来说音量大了 ;-)
文档没有准备好
然后FN+F12什么的。

标签： javascript responsivevoice

【解决方案1】：

如果您查看响应式语音代码，他们的代码中有大约 200 毫秒的奇怪超时：

        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")

如果您尝试在超时之前使用语音，您将点击以下控制台日志：

1570RV：错误：找不到适合美国英语女性的声音

根据我的经验，这很糟糕，应该会引发错误。

如果您想继续使用此脚本，唯一的解决方案是等待至少 201 毫秒，以便等待所有声音加载（但您只需执行一次）

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

也执行这里的建议：https://stackoverflow.com/a/36654326/561731 在函数的 onload 中。

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

【讨论】：

这似乎是唯一官方支持的等待这个库准备好的方式，这太可怕了（即有人应该信任这些开发人员吗？）。我从您引用的代码中看到他们有一个您可以收听的OnLoad 事件......但他们似乎没有任何您可以（正式）检查以确定它是否已加载的属性，所以有不知道是否需要等待事件！疯狂的！（如果可以选择，我真的更喜欢.ready Promise，但我不知道这是否符合他们的平台要求。）
是的...@JeremyBanks 没有错误或在他们的代码中抛出任何东西...所以除非您只搜索控制台日志，否则很难调试...（这是非常错误的容易）
是的，他们的OnLoad 事件发生在之前超时完成...@JeremyBanks 没有意义...

【解决方案2】：

不正确：

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

对

正确：

<body onload="read();">

【讨论】：

在我的浏览器上，无论是否使用 javascript 协议，它都可以正常工作。唯一的问题是它只播放最后请求的声音。这是我所期望的。
DOM 没有完全加载 lib
@JeffPuckettII 这应该没关系。脚本加载到 head 标签中。并且代码不依赖于DOM
脚本在head标签中，所以已经预加载了。
它不应该，这是我的知识的边缘，但我可以在开发人员控制台日志中看到它还没有准备好。也许有一些额外的初始化必须随之发生。

【解决方案3】：

等待它加载，就像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>

【讨论】：

如果你看一下控制台（如果你把它放在 onload 事件中）它只会说RV: ERROR: No voice found for: US English Female 所以代码确实加载了，只是扬声器代码中有一些问题。
甚至their documentation 建议设置超时