文章/答案/技术大牛

发布

社区首页 >问答首页 >ResponsiveVoice中的"onend“并不意味着在播放文本之后？

问ResponsiveVoice中的"onend“并不意味着在播放文本之后？
EN

Stack Overflow用户

提问于 2020-10-18 23:45:17

回答 1查看 248关注 0票数 0

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

非常感谢你的建议。

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

javascript

responsivevoice

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-18 23:47:46

您需要传递一个调用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64419412

复制

相似问题

问ResponsiveVoice中的"onend“并不意味着在播放文本之后？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ResponsiveVoice中的"onend“并不意味着在播放文本之后？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ResponsiveVoice中的"onend“并不意味着在播放文本之后？
EN