window.onload = function () { var music = document.getElementById("music"); var audio = document.getElementsByTagName("audio")[0]; audio.addEventListener("ended", function (event) { music.setAttribute("class", ""); }, false); music.addEventListener("touchstart",function (event) { if (audio.paused) { audio.play(); this.setAttribute("class"," music_play"); //this.setAttribute("class","music_play"); //停止时变形 // this.style.animationPlayState="running"; 兼容性不行 } else { audio.pause(); this.setAttribute("class",""); //this.style.animationPlayState="paused"; } },false); };
CSS部分:
.music > img.music_disc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 79%; margin: auto; z-index: 0; } .music > img.music_play { -webkit-animation: music_disc 4s linear infinite; -o-animation: music_disc 4s linear infinite; animation: music_disc 4s linear infinite; }
这个不兼容啊
music.onclick = function(){
if (audio.paused) {
audio.play();
// this.setAttribute("class","play");
this.style.webkitAnimationPlayState="running";
}else{
audio.pause();
// this.setAttribute("class","");
this.style.webkitAnimationPlayState="paused";
};
};我添加的是onclick 事件就可以亲也试一下