Vue移动端项目中音乐播放器

思路解析：

1,先写dom层结构

2，css样式

3，js逻辑

（1）先通过选择器获取audio标签

（2）监听play与pause

（3）进入页面之前，图片不旋转，不给图片添加旋转

（4）当点击play播放，通过.classList.remove移除按钮的当前默认状态，使其处于播放状态，通过.classList.add给图片添加旋转

（5）当点击pause按钮，通过.classList.add增加按钮的暂停状态，使其处于暂停

第一步：DOM层结构

<div class="ig">
<img :src="item.img_url?netif.imagePrefix+item.img_url:''" alt="" mode="widthFix">
</div>

第二步：css样式

<style>
@keyframes myrotate{
	from{
		transform: rotate(0deg);
	}

	to{
		transform: rotate(360deg);
	}
}
.cover-animation{
	animation: myrotate 8s linear infinite;
}
.cover-animation-pause{
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}
</style>

第三步：JS逻辑结构

<script>
mounted(){
var player = document.querySelector("audio")
player.addEventListener("play",function(){
document.querySelector(".ig").classList.remove("cover-animation-pause")
document.querySelector(".ig").classList.add("cover-animation")

})
player.addEventListener("pause",function(){
document.querySelector(".ig").classList.add("cover-animation-pause")
})
},
</script>