window.speechSynthesis.speak(msg) 在单击按钮之前不工作

Question

下面的简短页面不起作用。具体来说，"window.speechSynthesis.speak(msg)" 在按下按钮之前不起作用。如果按下按钮，则 "Hello" 消息有效。如果没有，则对 "window.speechSynthesis.speak(msg)" 的任何调用都不会产生任何声音输出。

怀疑它与 speechSynthesis 的初始化有关 - 下面尝试了一些事情以确保在调用 "Hello" 时它被初始化。 None 有效。虽然看起来应该有。似乎只有在按下按钮时调用它才能正确初始化。

SpeechSynthesisUtterance 本身的设置是相同的，无论是从按钮还是超时调用。该设置在通过按钮调用时有效。但在它被按钮调用之前无处可去。

这里有什么问题？

<!DOCTYPE html>
<html>

    <head>
        <title>Voice Test 3</title>
    </head>

    <body>

        <div id="header">User Interface Terminal</div>
        <input type="text" id="control_box"></input><br>
        <button id="startButton" onclick="voicemessage('Button');">start</button><br>
        <script>

            function voicemessage(ttstext) {
                var msg = new SpeechSynthesisUtterance(ttstext);
                msg.volume = 1;
                msg.rate = 0.7;
                msg.pitch = 1.3;
                window.speechSynthesis.speak(msg);
                document.getElementById('control_box').value = ttstext; 
            }


            window.speechSynthesis.onvoiceschanged = function() {
                document.getElementById('control_box').value = "tts voices recognized";
                window.setTimeout(function() {
                    voicemessage("Hello");
                }, 5000);
            };

            window.addEventListener('load', function () {
                var voices = window.speechSynthesis.getVoices();
            })

        </script>

    </body>

</html>

Answer 1

这可能是浏览器本身的问题... 某些浏览器（Firefox 和 Chrome）的最新更新具有防止访问音频的策略，除非某些用户交互触发它（如按钮单击）...

window.speechSynthesis.speak(msg) 在单击按钮之前不工作

window.speechSynthesis.speak(msg) not working until button click

javascript

google-chrome

text-to-speech

speech-synthesis