uniapp 开发h5页面,音乐播放

<template>
    <view class="imgcon">
		<image src="/static/music.png" :class="[muteBgMusic ? '' : 'music']" @click="playMusic" mode="aspectFill" ></image>
    </view>
</template>

<script>
export default {
	data() {
		return {
			muteBgMusic: true, //静音
		}
	},
	watch: {
		muteBgMusic(newValue, oldValue) {
			if (newValue) {
				// 开启静音
				this.$music.playBgm({ mute: true });
			} else {
				// 关闭 静音
				this.$music.playBgm({ mute: false });
			}
		}
	},
	methods: {
        //点击是否静音  由于ios不能自动播放，所以我统一安卓 iOS 双端需要手动点击开始播放
        //如果想打开页面就播放，只需在music.js中 把默认值改为false, 并且设置自动播放即可
		playMusic(){
			this.muteBgMusic = !this.muteBgMusic;
		}
	}
};
</script>
<style lang="scss" scoped>
 .imgcon{
	 @include size(70rpx);
	 //background:#fff000;
	 position:fixed;
	 left:80rpx;
	 bottom:80rpx;
	 image{
		@include size(70rpx);
	 }
	 .music {
	 	animation: music 2.5s linear 0s infinite normal none;
	 }
	 @keyframes music {
	 	0% {
	 		transform: rotate(0deg);
	 	}	 
	 	10% {
	 		transform: rotate(36deg);
	 	}	 
	 	20% {
	 		transform: rotate(72deg);
	 	}	 
	 	30% {
	 		transform: rotate(108deg);
	 	}	 
	 	40% {
	 		transform: rotate(144deg);
	 	}	 
	 	50% {
	 		transform: rotate(180deg);
	 	}	 
	 	60% {
	 		transform: rotate(216deg);
	 	}	 
	 	70% {
	 		transform: rotate(252deg);
	 	}	 
	 	80% {
	 		transform: rotate(288deg);
	 	}	 
	 	90% {
	 		transform: rotate(324deg);
	 	}	 
	 	100% {
	 		transform: rotate(360deg);
	 	}
	 }
 }

</style>