javascript onended 音频事件

Question

我得到了带有播放/暂停动作的简单 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/