Activer/désactiver l'exécution de javascript avec un lien textuel dans html5 audio

Question

J'utilise un code pour mettre en surbrillance les mots qui sont lus en fonction de "l'heure" et qui est activé par défaut. J'en ai besoin pour rester par défaut, mais ajouter une fonction sur un "lien texte" qui peut activer/désactiver la surbrillance (donc il n'y a pas de surlignage quand on clique.) Quand je clique sur le mot "Désactiver", cela désactive l'exécution du code, et le mot « Désactiver » change automatiquement au mot « Activer », ce qui fait au contraire .. etc.

et voici un extrait du 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>

Answer 1

Je voudrais utiliser CSS et cibler les intervalles en fonction de la classe du parent. Cela rend la logique mieux moins compliquée.

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

Vous pouvez utiliser removeEventListener: audi.removeEventListener(f1)

Ou vous pouvez avoir une fonction avant votre f1() fonction, var enabled = true, et en F1, retourner au début si enabled === false, et écrivez vos écouteurs de clic de bouton pour changer la variable enabled.