滚动文本并在使用html5音频读取时将其隐藏

我正在使用代码突出显示使用html5音频读取的文本单词，并在单击相邻句子时读取音频。

我需要的是让正在读取的行从页面中消失，并且正在读取的下一行在其位置跳转，依此类推..所以到最后，页面中没有任何内容，但是：1-音频播放器，2 – “突出显示开/关”按钮，3-“滚动/关闭”按钮。

因此，页面中有两个选项，用户希望在阅读时看到所有文本的天气，或者只是看到正在听到的行（以及它下面的行）。

使用的代码是：

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

  Highlight on 
 
 Ok, we're trying this for a second time , 
to test the ability 
to upload an M P 
3 file. 
Hopefully this will work! 

  

Answer 1

这应该做到这一点。

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

  Highlight on See All Text on 
 Ok, we're trying this for a second time, to test the ability to upload an M P 3 file. Hopefully this will work!