亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

繁花如伊 2023-05-19 16:20:41
我需要播放一些文本然后才執行以下操作(例如隱藏&ldquo;暫停&rdquo;和&ldquo;停止&rdquo;按鈕),但是當我開始播放文本時它們會立即隱藏。簡化情況 - 請參閱代碼。非常感謝您的建議..<!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 功能時會有很長的延遲。見代碼:
查看完整描述

1 回答

?
侃侃無極

TA貢獻2051條經驗 獲得超10個贊

您需要傳遞一個調用, 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>


查看完整回答
反對 回復 2023-05-19
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號