[英]Toggle javascript execution on/off with text link in html5 audio
I am using a code to highlight words that are read depending "on" the time, and it's on by default. 我正在使用代码突出显示根据时间“ on”而读取的单词,并且默认情况下处于启用状态。 I need it to stay on by default, but add a function on a "text link" that can toggle the highlighting on/off (so there is no highlighting when clicked. So when I click the word "Disable", it disables the execution of the code, and the word "Disable" changes automatically to the word "Enable", which does the contrary.. etc.
我需要它默认保持打开状态,但是在“文本链接”上添加一个可以打开/关闭突出显示功能(因此,单击时没有突出显示。因此,当我单击单词“ Disable”时,它将禁用执行代码中的“禁用”一词会自动更改为“启用”一词,与此相反。等等。
And here is a snippet of the code: 这是代码片段:
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>
I would use CSS and target the spans depending on parent's class. 我将使用CSS并根据父级的类别来确定跨度。 This makes the logic better less complicated.
这使逻辑更好地减少了复杂性。
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>
You can either use removeEventListener
: audi.removeEventListener(f1)
您可以使用
removeEventListener
: audi.removeEventListener(f1)
Or you can have a function before your f1()
function, var enabled = true
, and in f1, return at the beginning if enabled === false
, and write your button click listeners to change the enabled
variable. 或者,您可以在
f1()
函数之前拥有一个函数, var enabled = true
,在f1中,如果enabled === false
,则enabled === false
开始返回,然后编写按钮单击侦听器以更改已enabled
变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.