<div class="btn-audio">
<audio id="mp3Btn" >
<source src="http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/张茜 - 有没有那么一首歌 [mqms2]_1601549586268.mp3" type="audio/mpeg" />
</audio>
</div>
//alert("ddwedwef"+ $('#mp3Btn').html())
$(function(){
//播放完毕
$('#mp3Btn').on('ended', function() {
console.log("音频已播放完成");
//alert("dsdd")
$('.btn-audio').css({'background':'url(http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/imgSvg-1601552311513.svg) no-repeat center bottom','background-size':'cover'});
})
//播放器控制
var audio = document.getElementById('mp3Btn');
audio.volume = .3;
setTimeout(function() {
audio.play()
$('.btn-audio').toggleClass("rotate");
}, 5000);
$('.btn-audio').click(function() {
$(this).toggleClass("rotate");
event.stopPropagation();//防止冒泡
// audio.paused
if($(this).hasClass("rotate")){ //如果当前是暂停状态
// $('.btn-audio').css({'background':'url(http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/imgSvg-1601552624518.svg) no-repeat center bottom','background-size':'cover'});
audio.play(); //播放
return;
}else{//当前是播放状态
// $('.btn-audio').css({'background':'url(http://wangyang-bucket.oss-cn-beijing.aliyuncs.com/cms/image/imgSvg-1601552311513.svg) no-repeat center bottom','background-size':'cover'});
audio.pause(); //暂停
}
});
})