使用html5音频中的文本链接来打开/关闭javascript执行

Question

我正在使用代码突出显示根据时间“ on”而读取的单词，并且默认情况下处于启用状态。 我需要它默认保持打开状态，但是在“文本链接”上添加一个可以打开/关闭突出显示功能（因此，单击时没有突出显示。因此，当我单击单词“ Disable”时，它将禁用执行代码中的“禁用”一词会自动更改为“启用”一词，与此相反。等等。

这是代码片段：

 var spns = document.getElementsByTagName("SPAN"); var audi = document.getElementById("adi"); audi.addEventListener("timeupdate", f1); function f1(){ 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].style.backgroundColor = "white"; spns[i].style.backgroundColor = "red"; } } } 

 <audio id = "adi" controls> <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"></source> </audio> <div> <pre> <span id="ts0.5">Ok, we're trying this for a second time</span> , <span id="ts3">to test the ability...</span> </pre> </div> 

Answer 1

我将使用CSS并根据父级的类别来确定跨度。 这使逻辑更好地减少了复杂性。

 var textHighlightOn = true, btnToggle = document.getElementById('toggleTxt'), textDiv = document.querySelector('.text-highlight') spns = document.getElementsByTagName("SPAN"), audi = document.getElementById("adi"); audi.addEventListener("timeupdate", f1); function f1(){ 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'); } } } 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> , <span id="ts3">to test the ability...</span> </pre> </div> 

Answer 2

您可以使用removeEventListener ： audi.removeEventListener(f1)

或者，您可以在f1()函数之前拥有一个函数， var enabled = true ，在f1中，如果enabled === false ，则enabled === false开始返回，然后编写按钮单击侦听器以更改已enabled变量。