UNI-APP_ Playback and pause of background music of applet or H5 page

Online audio mp3 Address of the test
http://music.163.com/song/media/outer/url?id=447925558.mp3

stay uni-app Write small programs or h5 When the page is , Use background music , And the rotation animation of the icon

One 、 establish music.js Put it in static Or create a new folder

const bgm = uni.createInnerAudioContext();
bgm.src = '../static/bgMusic.mp3'
bgm.loop = true;  // Loop Playback 
// bgm.autoplay=true; // Auto play 
bgm.sessionCategory = 'soloAmbient'; // Do not play in the background , If there is any other play , Will pause other playback （ But on the mobile side h5 in   Failure of background not playing ）（ Other properties are self Baidu ）
bgm.volume = 0.4  // The volume 
var music = {
    
	//mute  Indicates whether it is mute ,, Default mute 
	playBgm({
      mute = true }) {
    
		if (!bgm) return;
		if (mute) {
    
			bgm.pause()
		} else {
    
			bgm.play()
		}
 
		bgm.onPause(() => {
    })
		bgm.onPlay(() => {
    })
		bgm.onError((res) => {
    })
	}
}
module.exports = music

Two 、 Mount to vue In the example , stay main.js in

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

3、 ... and 、 Put it on the required page

Dynamically add rotation styles

<template>
    <view>
		<img src="../../static/music.png" alt="" :class="[muteBgMusic ? '' : 'music']" @click="playMusic"/>
    </view>
</template>
export default {
	data() {
		return {
			muteBgMusic: true, // Mute 
            }
	},
	watch: {
		muteBgMusic(newValue, oldValue) {
			if (newValue) {
				//  Turn on mute 
				this.$music.playBgm({ mute: true });
			} else {
				//  close   Mute 
				this.$music.playBgm({ mute: false });
			}
		}
	},
	methods: {
        // Click whether to mute    because ios Can't auto play , So I unify Android  iOS  Both ends need to manually click to start playing 
        // If you want to open the page, play , Just in music.js in   Change the default value to false,  And set automatic playback 
		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>