我通过播放/暂停动作获得了简单的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