Question

我正在使用这个src =“http://code.responsivevoice.org/responsivevoice.js”（TTS），我希望在一个循环中播放3条消息，直到用户点击屏幕上的某个地方。

播放3条消息，它们之间有某种间隔，首先是..interval..second .... interval ... third ...重复直到点击，它们重复直到屏幕被按下，任何想法？试过这个却失败了

var text1 = "This is the first message";
        var text2 = "This is the second message";
        var text3 = "This is the third message";
        var text4 = "This is the fourth message";
    function toggleThem()
{
    window.setTimeout(function(){
            responsiveVoice.speak(text1);
        }, 200);
         window.setTimeout(function(){
            responsiveVoice.speak(text2);
        },2000 );
         window.setTimeout(function(){
            responsiveVoice.speak(text3);
        }, 2500);
}
toggleThem();

Answer 1

您可以使用setInterval和clearInterval让语音文字循环直至点击该窗口：

var text1 = "This is the first message";
var text2 = "This is the second message";
var text3 = "This is the third message";
var text4 = "This is the fourth message";

function speak (text) {
  console.log('Speaking: ', text)
  responsiveVoice.speak(text)
}

function toggleThem() {
  setTimeout(speak, 200, text1)
  setTimeout(speak, 2000, text2)
  setTimeout(speak, 2500, text3)
  setTimeout(speak, 3000, text4)
}

var interval = setInterval(toggleThem, 3500)

window.addEventListener('click', function handler() {
  clearInterval(interval)
  this.removeEventListener('click', handler)
})

<script src="http://code.responsivevoice.org/responsivevoice.js"></script>

重复功能，直到按下屏幕

1 个答案: