Javascript HTML5ファープレイのアイコンを変更

Question

私のウェブサイトにオーディオ（自動再生）を追加しました。 実際には、音楽を一時停止して再生したい場合は、 アイコンも同時にfa-playに切り替える必要があります。

これは私のHTMLマークアップです：

<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

あなたはこれであなたのJSを完了することができます：あなたが呼び出され、その関数を使用する場合は ：

<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> 

編集あなたは、イベントに関数をバインドする必要がありますクリックを実行しますclick。そこは、いくつかの方法がありますが、最も簡単にはこのようなものです：

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

あなたは<a>だけでなく、どんなDOM要素でそれを行うことができ、これは一例でした。