Javascript Audio-Event

Question

Ich habe einfache Javscript-Funktion mit Play/Pause-Aktion. Leider arbeitet er nur mit onclick event. Jetzt muss ich auch die Symbolfarbe ändern, wenn mp3 endet. Jetzt am Ende Symbolfarbe bleiben von der Wiedergabe von Audio. Ich muss wieder auf die Farbe wechseln, wenn der Ton pausiert ist (hellgrün).

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> 

Hier istJSFIDDLE

Answer 1

Sie das ended Ereignis des Audio-API verwenden können:

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

Hier ist, was Sie zu Ihrem Code hinzufügen sollte:

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

Dies ist die Änderung Ihrer jsfiddle ist:
https://jsfiddle.net/71an95pa/4/