javascript onended 音频事件

Question

我得到了带有播放/暂停 Action 的简单 javscript 函数。不幸的是，他只处理 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>

这是 JSFIDDLE

Answer 1

您可以使用音频 API 的 ended 事件:

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/