Javascript HTML5 ändern Symbol für fa-play

Question

Ich habe ein Audio (Autoplay) auf meiner Website hinzugefügt. Eigentlich möchte ich pausieren und die Musik abspielen, sollte das Symbol auch gleichzeitig auf fa-play umschalten.

Das ist mein HTML-Markup:

<script type="text/javascript"> 
    function toggleSound() { 
     var audioElem = document.getElementById('player'); 
     if (audioElem.paused) 
      audioElem.play(); 
     else 
      audioElem.pause(); 
    } 

</script> 

<li> 
    <a class="fa fa-pause" id="player" type="button" 
    onclick="javascript:toggleSound();"> 
     <span>Play/Pause</span> 
    </a> 
</li> 

<audio autoplay id="player" src="embrace.mp3"></audio> 

Answer 1

Sie Ihre JS damit abschließen können:

<script> 
    function toggleSound() { 
     var audioElem = document.getElementById('player'); 
     if (audioElem.paused) { 
      audioElem.className = "fa fa-play"; 
      audioElem.play(); 
     } else { 
      audioElem.className = "fa fa-pause"; 
      audioElem.pause(); 
     } 
    } 
</script> 

Edit: Wenn Sie diese Funktion aufgerufen wird, wenn Wenn Sie den Klick ausführen, sollten Sie die Funktion an das Ereignisbinden. Es gibt mehrere Möglichkeiten, aber die einfachste ist wie folgt:

<a class="fa fa-pause" onclick="toggleSound()" > 

Sie tun können, es in jeder DOM-Element, nicht nur in <a>, das war nur ein Beispiel.