暂停播放时如何停止弦，然后恢复它

Question

此jQuery代码基本上播放带有文本的音频（因为我无法制作自动的vtt文件）。我想到了在单击按钮时使用带有延迟的for循环的想法。

现在我面临一个问题：如何再次按下播放按钮时停止文本并保存？

  <audio id="myAudio">
      <source src= "18.mp3" type="audio/mp3">
  </audio>
  <button onClick="togglePlay()" type="button" id="kk">Click here to hear.</button>

  <div align="center" style="margin:20px" id="textToRead">

  </div>
  <p id = "te"></p>
  <script>
    var myAudio = document.getElementById("myAudio");
    var isPlaying = false;
    var x = document.getElementById("myAudio");
    var z = "THERE WAS A KING AND QUEEN AND A HORSE RIDING ON AAN AEROPLANE INSIDE A CASTLE";
    var z1 = z.split(' ')
    var str = '';
    var kk = document.getElementById("kk");
    var flag = 0;
    function togglePlay() {
      if (isPlaying) {
        myAudio.pause()
      } else {
        myAudio.play();
        for (let i=0; i < z1.length; i++) {
          var word1 = z1[i]
           task(i,word1);
           $('#kk').click(function(){
             flag += 1;
           });
           console.log(flag)
           if(flag == 1){
             return true;
           }
           }
         }
    };
    myAudio.onplaying = function() {
      isPlaying = true;
    };
    myAudio.onpause = function() {
      isPlaying = false;
    };

    function task(i,z) {
      setTimeout(function() {
        str += " " + z;
          document.getElementById("te").innerHTML = str;
      }, 250 * i);
    }
  </script>

感谢您的回复