Scroll Text Up And Hide It As It Gets Read Using Html5 Audio

I am using a code to highlight text words that are read with html5 audio, and also reads the audio when clicking on the adjacent sentence. What I need is to make the line being rea

Solution 1:

This should do it.

var// Controlls
textHighlightOn  = true,
showAllTxt       = true,
btnToggle        = document.getElementById('toggleTxt'),
btnToggleShowTxt = document.getElementById('toggleShowTxt'),
    
textDiv =  document.querySelector('.text-highlight'),
spns = document.querySelectorAll('span'),
audi = document.getElementById("adi");

audi.addEventListener("timeupdate", f1);

functionf1(){
  
  // remove all previous actives;
  [].forEach.call(spns, function(e){
      e.classList.remove('active');
      e.classList.remove('active-prev');
  });

  var i;  
  for (i = 0 ; i< spns.length ; i++){
     
    var time = Number(spns[i].id.slice(2));
    if(time < audi.currentTime){
      
       if (i>0) {
       
           spns[i-1].classList.remove('active');
           spns[i-1].classList.add('active-prev');
       
       }
       
       spns[i].classList.add('active');
      
    }
    
  }
}


// listen for clicks on the spans.
[].forEach.call(spns, function(spn) {

    spn.addEventListener("click", function() {
    
        for(var i in spns){
            
            

        }
        
        var time = Number(this.id.slice(2));
        audi.currentTime = time;
        
    });
    
});

// Toggle text highlight
btnToggle.addEventListener("click", function(){

    if(textHighlightOn){
       textDiv.classList.add('off');
    } else {
       textDiv.classList.remove('off');
    }

    this.innerHTML = 'Highlight ' + (textHighlightOn ? 'off ' : ' on');         

    textHighlightOn = !textHighlightOn;

});


// 
btnToggleShowTxt.addEventListener("click", function(){

    if(showAllTxt){
       textDiv.classList.remove('show-all');
    } else {
       textDiv.classList.add('show-all');
    }

    this.innerHTML = 'See All Text ' + (showAllTxt ? 'off ' : ' on');         

    showAllTxt = !showAllTxt;

});

body {
  background: #008000;
}
span {
   padding:0;
   margin:0;
}

.text-highlightspan {
   display:block;
   margin-bottom:1px;
}

.text-highlightspan.active-prev {
   display:none;
   background:#fff;
}
.text-highlightspan.active {
   background: #03a9f4;
   display:block;
}
.text-highlight.show-allspan {
   display:block !important;  
}


/* turn off highlight */.text-highlight.offspan {
   background: transparent;
}

<audioid="adi"controls><sourcesrc="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"/></audio><buttonid="toggleTxt">Highlight on</button><buttonid="toggleShowTxt">See All Text on</button><divclass="text-highlight show-all"><spanid="ts0.5">Ok, we're trying this for a second time,</span><spanid="ts3">to test the ability</span><spanid="ts6">to upload an M P</span><spanid="ts9">3 file.</span><spanid="ts10">Hopefully this will work!</span></div>