Как остановить строку, когда мы играем паузу, а затем возобновить ее

Question

Этот код jQuery в основном воспроизводит аудио с текстом (потому что я не смог создать автоматический файл vtt). Мне пришла в голову идея использовать a для l oop с задержкой при нажатии кнопки.

Теперь я сталкиваюсь с проблемой: как остановить текст и сохранить его при повторном нажатии кнопки воспроизведения?

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

Спасибо, что ответили