javascript onended audioイベント

Question

私は再生/一時停止のアクションでシンプルなjavスクリプト機能を手に入れました。残念ながら、彼はonclickイベントでのみ動作します。再生されたmp3が終了すると、今私もアイコンの色を変更する必要があります。終了アイコンの色は、オーディオを再生してからです。オーディオが一時停止（明るい緑色）しているときに、色に戻す必要があります。

はJavaScript

function aud_play_pause(object) { 
    var myAudio = object.querySelector(".xnine-player"); 
    var myIcon = object.querySelector(".control"); 
    if (myAudio.paused) { 
     myIcon.className = "control icon-pause"; 
     myAudio.play(); 
    } else if (myAudio.onend) { 
     myIcon.className = "control icon-play"; 
    } else { 
     myIcon.className = "control icon-play"; 
     myAudio.pause(); 
    } 
    } 

HTMLここ

<p> 
     <a href="javascript:void(0)" onclick="aud_play_pause(this)"> 

      <i class="control icon-play"></i> 
      <audio class="xnine-player" 
       src="http://www.noiseaddicts.com/samples_1w72b820/29.mp3" 
      preload="auto"></audio> 

     </a> - audio #1 
    </p> 

    <p> 
     <a href="javascript:void(0)" onclick="aud_play_pause(this)"> 

      <i class="control icon-play"></i> 
      <audio class="xnine-player" 
       src="http://www.noiseaddicts.com/samples_1w72b820/2235.mp3" 
      preload="auto"></audio> 

     </a> - audio #2 
    </p> 

はあなたがオーディオAPIのendedイベントを使用することができますJSFIDDLE

Answer 1

です：

ここで

audio_element.addEventListener("ended", function() { 

あなたのコードに追加するべきである：

document.querySelectorAll('audio').forEach(function(el) { 
    el.addEventListener("ended", function() { 
    this.parentElement.querySelector('.control').className = 'control icon-play'; 
    }, true); 
}) 

これはあなたのjsfiddleへの変更である：
https://jsfiddle.net/71an95pa/4/