"onend" 在 ResponsiveVoice 中不表示播放文本后？

Question

我需要播放一些文本然后才执行以下操作（例如隐藏“暂停”和“停止”按钮），但是当我开始播放文本时它们会立即隐藏。简化情况 - 见代码。

非常感谢您的建议..

<!DOCTYPE html>
<html>
<body>

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>

<script>

function Voice(id){
    var element = document.getElementById(id);
    var text = element.innerText;
    responsiveVoice.speak(text, "UK English Male", {onend: Hide("div1")});
}

function Hide(id){
    var element = document.getElementById(id);
    element.style="visibility: hidden";
}

</script>

<div id="div1">This is the first line.</div>

<div id="div2" onclick = 'Voice("div2")'>
This is the second line.
</div>
<br>
Click on the second line to play its text. The first line should be hidden after the message is played.<br>
But it is hidden IMMEDIATELY after clicking. What is wrong?
 
</body>
</html>

解决方案是使用箭头：{onend: () => Hide()} 而不是 {onend: Hide()}（感谢 CertainPerformance）。

onstart:、onend: 和rate: 甚至可以同时使用。只有一个小问题——更改页面内容后，第一次使用 ResponsiveVoice 功能时会有很长的延迟。见代码：

<!DOCTYPE html>
<html>
<body> 

<script src='https://code.responsivevoice.org/responsivevoice.js'>
</script>

<script>

function Read(id){
    var element = document.getElementById(id);
    var text = element.innerText;
    responsiveVoice.speak(text, "UK English Male", {rate: 1.3, onstart: () => Show(), onend: () => Hide()});
}

function Show(){
    var element = document.getElementById("Pause");
    element.style="visibility: visible";
}

function Hide(){
    var element = document.getElementById("Pause");
    element.style="visibility: hidden";
}

</script>

<div id="div" onclick = 'Read("div")'>This is text to read.</div>
<br>
<input type = "button"
    id = "Pause"
    value = "Pause"
    style = "visibility: hidden" />
     
</body>
</html>

Answer 1

您需要传递一个调用 Hide 的函数，而不是立即调用 Hide:

{onend: Hide("div1")}

在评估该行后立即调用 hide。必须是：

{onend: () => Hide("div1")}

<!DOCTYPE html>
<html>
<body>

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>

<script>

function Voice(id){
    var element = document.getElementById(id);
    var text = element.innerText;
    responsiveVoice.speak(text, "UK English Male", {onend: () => Hide("div1")});
}

function Hide(id){
    var element = document.getElementById(id);
    element.style="visibility: hidden";
}

</script>

<div id="div1">This is the first line.</div>

<div id="div2" onclick = 'Voice("div2")'>
This is the second line.
</div>
<br>
Click on the second line to play its text. The first line should be hidden after the message is played.<br>
But it is hidden IMMEDIATELY after clicking. What is wrong?
 
</body>
</html>

"onend" 在 ResponsiveVoice 中不表示播放文本后？

"onend" in ResponsiveVoice does not mean AFTER playing text?

javascript

responsivevoice