在html5音频中使用文本链接切换javascript执行开关

我正在使用代码来突出显示取决于“on”时间的单词，并且默认情况下它处于打开状态。我需要它默认情况下，但在“文本链接”添加一个功能，可以打开/关闭突出显示（所以点击时没有突出显示，所以当我点击“禁用”时，它会禁用执行代码，和单词“禁用”自动更改单词“启用”，这确实相反..等在html5音频中使用文本链接切换javascript执行开关

这里的是代码片段：

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>

来源

2017-10-06 Mike

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener – mplungjan

我会使用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>

来源

2017-10-06 09:08:20

当我点击它使整个文本与白色背景高亮按钮。我需要它与一个正常的无色bg。 – Mike

@Mike，我不确定我是否在这里跟着你，关心用截图来演示？ –

https://jsfiddle.net/06x1c4ke/ – Mike

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

或者您可以在f1()函数var enabled = true和f1之前具有函数，如果返回enabled === false开头，然后编写您的按钮单击侦听器以更改enabled变量。

来源

2017-10-06 09:06:31 TKoL

在html5音频中使用文本链接切换javascript执行开关

回答

相关问题