ResponsiveVoice 中的“onend”不表示播放文本之后?

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


非常感谢您的建议..


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

解决方案是使用 arrow: {onend: () => Hide()} 而不是 {onend: Hide()} 

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


繁花如伊
浏览 109回答 1
1回答

侃侃无极

您需要传递一个调用,&nbsp;Hide而不是Hide立即调用的函数:{onend:&nbsp;Hide("div1")}hide评估该行后立即调用。它需要是:{onend:&nbsp;()&nbsp;=>&nbsp;Hide("div1")}<!DOCTYPE html><html><body><script src='https://code.responsivevoice.org/responsivevoice.js'></script><script>function Voice(id){&nbsp; &nbsp; var element = document.getElementById(id);&nbsp; &nbsp; var text = element.innerText;&nbsp; &nbsp; responsiveVoice.speak(text, "UK English Male", {onend: () => Hide("div1")});}function Hide(id){&nbsp; &nbsp; var element = document.getElementById(id);&nbsp; &nbsp; 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?&nbsp;</body></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript