UNI-APP_小程序或h5页面背景音乐的播放与暂停

在线音频mp3测试地址
http://music.163.com/song/media/outer/url?id=447925558.mp3

在uni-app中写小程序或h5页面时，用到背景音乐，以及图标的旋转动画

一、创建music.js 放在static或新建文件夹

const bgm = uni.createInnerAudioContext();
bgm.src = '../static/bgMusic.mp3'
bgm.loop = true;  //循环播放
// bgm.autoplay=true;  //自动播放
bgm.sessionCategory = 'soloAmbient'; //在后台时不播放，如有其他播放，会暂停其他播放（但在移动端h5中 后台不播放失效）（其他属性自行百度）
bgm.volume = 0.4  //音量
var music = {
	//mute 表示是否是静音，，默认静音
	playBgm({
		mute = true
	}) {
		if (!bgm) return;
		if (mute) {
			bgm.pause()
		} else {
			bgm.play()
		}
 
		bgm.onPause(() => {})
		bgm.onPlay(() => {})
		bgm.onError((res) => {})
	}
}
module.exports = music

二、挂载到vue实例中，在main.js中

import music from './base/music.js'
Vue.prototype.$music = music

三、放在需要的页面中

动态添加旋转样式

<template>
    <view>
		<img src="../../static/music.png" alt="" :class="[muteBgMusic ? '' : 'music']" @click="playMusic"/>
    </view>
</template>
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>
 .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>