滾動文本並在使用html5音頻讀取時將其隱藏

Question

我正在使用代碼突出顯示使用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 < 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> 

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

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