Scroll text up and hide it as it gets read using html5 audio

user_1114465 0
Viewed 281

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 read disappears from the page, and the next line being read jumps in its place, and so on.. so by the end there is nothing left in the page but: 1- audio player, 2- "Highlight on/off" button, 3- "Scroll on/off" button.

So there are two options in the page, weather the user wants to see all the text together while being read, or just sees the line that is being heard (and the lines under it).

The code being used is:

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

audi.addEventListener("timeupdate", f1);

function f1(){
  
  // 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;

});
body {
  background: #008000;
}
.text-highlight span.active-prev {
   background: #fff;
}
.text-highlight span.active {
   background: #03a9f4;
}
.text-highlight.off span {
   background: transparent;
}
<audio id="adi" controls>
  <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"/>
</audio>

<button id="toggleTxt">Highlight on</button>

<div class="text-highlight">
  <pre>
<span id="ts0.5">Ok, we're trying this for a second time</span> ,
<br><span id="ts3">to test the ability</span>
<br><span id="ts6">to upload an M P</span>
<br><span id="ts9">3 file.</span>
<br><span id="ts10">Hopefully this will work!</span>

    </pre>
</div>

audio css html jquery javascript
1 Answers

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

function f1(){
  
  // 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-highlight span {
   display:block;
   margin-bottom:1px;
}

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


/* turn off highlight */
.text-highlight.off span {
   background: transparent;
}
<audio id="adi" controls>
  <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"/>
</audio>

<button id="toggleTxt">Highlight on</button>
<button id="toggleShowTxt">See All Text on</button>

<div class="text-highlight show-all">
   <span id="ts0.5">Ok, we're trying this for a second time,</span>
   <span id="ts3">to test the ability</span>
   <span id="ts6">to upload an M P</span>
   <span id="ts9">3 file.</span>
   <span id="ts10">Hopefully this will work!</span>
</div>

user_21510500
Related