javascript - JavaScript OnClick()是否开始卡拉OK文本？

我正在尝试以卡拉OK主题工作，在其中播放歌曲和阅读文本。我遇到的问题是，页面加载后，卡拉OK会自动启动。我想做一个按钮功能，允许用户按下它，然后在页面加载时文本开始遵循卡拉OK模式。

var songtext;
$(document).ready(function() {
    songtext = [ // [text, duration]
        ["My Little Pony, My Little Pony", 1500],
        ["</br> Ahh, ahh, ahh, ahhh...", 1500],
        ["</br> (My Little Pony)", 3500],
        ["</br> I used to wonder what friendship could be", 1500],
        ["</br> (My Little Pony)", 3500],
        ["</br> Until you all shared its magic with me", 1500],
        ["</br> Big adventure", 900],
        ["</br> Tons of fun", 900],
        ["</br> A beautiful heart", 900],
        ["</br> Faithful and strong", 900],
        ["</br> Sharing kindness!", 900],
        ["</br> It's an easy feat", 900],
        ["</br> And magic makes it all complete", 900],
        ["</br> You have my little ponies", 900],
        ["</br> Do you know you're all my very best friends?", 1000],
        ["</br> My Little Pony", 800],
        ["</br> My Little Pony", 800],
        ["</br> My Little Pony... friends", 1000],

    ];
    var text="";
    $.each(songtext, function(a, b) {
        text += "<span id='p"+a+"' style='color:black'>" + b[0] + "</span> ";
    });

    $('#div').html(text);

    cc=0;

    nextWord();
});

var cc = 0;
function nextWord() {
    $('#p'+cc).css("color", "blue");
    cc++;
    if(cc> songtext.length-1) return;
    window.setTimeout(nextWord, songtext[cc-1][1]);
}

#fontstyle {
    font-size: 20pt;

}

<script src="https://github.com/padolsey-archive/jquery.lint--old/blob/master/jquery.lint.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div"></div>

<button type="button">Play</button>

最佳答案

发生这种情况是因为您在nextWord处理程序中调用了document.ready。将其放在按钮的单击句柄中:

var songtext;
$(document).ready(function() {
  songtext = [ // [text, duration]
    ["My Little Pony, My Little Pony", 1500],
    ["</br> Ahh, ahh, ahh, ahhh...", 1500],
    ["</br> (My Little Pony)", 3500],
    ["</br> I used to wonder what friendship could be", 1500],
    ["</br> (My Little Pony)", 3500],
    ["</br> Until you all shared its magic with me", 1500],
    ["</br> Big adventure", 900],
    ["</br> Tons of fun", 900],
    ["</br> A beautiful heart", 900],
    ["</br> Faithful and strong", 900],
    ["</br> Sharing kindness!", 900],
    ["</br> It's an easy feat", 900],
    ["</br> And magic makes it all complete", 900],
    ["</br> You have my little ponies", 900],
    ["</br> Do you know you're all my very best friends?", 1000],
    ["</br> My Little Pony", 800],
    ["</br> My Little Pony", 800],
    ["</br> My Little Pony... friends", 1000],

  ];
  var text = "";
  $.each(songtext, function(a, b) {
    text += "<span id='p" + a + "' style='color:black'>" + b[0] + "</span> ";
  });

  $('#div').html(text);

  cc = 0;
  $('button').on('click', function(e) {
    e.preventDefault();
    nextWord();
  });
});

var cc = 0;

function nextWord() {
  $('#p' + cc).css("color", "blue");
  cc++;
  if (cc > songtext.length - 1) return;
  window.setTimeout(nextWord, songtext[cc - 1][1]);
}

#fontstyle {
  font-size: 20pt;
}

<script src="https://github.com/padolsey-archive/jquery.lint--old/blob/master/jquery.lint.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div"></div>

<button type="button">Play</button>