微信H5网页自动播放背景音乐

<template>
	<view @touchstart="aaa" :class="judgeBigScreen?'page_long':'page_6'">
		<swiper :class="judgeBigScreen?'swiper_long':'swiper_6'" @change="changeSwiper" vertical>
			<swiper-item :class="judgeBigScreen?'item_long':'item_6'" v-for="(item,index) in imgList">
				<img :class="isPlay?'music1':'music2'" :src="isPlay ? music : isMusic" @click="setMuissc" />
				<image class="youxia" :src="youxia" mode="widthFix"></image>

				<view class="">
					<image v-if="judgeBigScreen" class="pageBg1" :src="item"></image>
					<image v-else class="pageBg2" :src="item" mode="widthFix"></image>
				</view>
				<view v-if="index===0">
					<image class="b32 bc" v-if="show32" :src="b32" mode="widthFix"></image>
					<image class="b31 bc" v-if="show31" :src="b31" mode="widthFix"></image>
				</view>
				<view v-if="index==1">
					<image class="b11 bc" v-if="show11" :src="b11" mode="widthFix"></image>
					<image class="b12 bc" v-if="show12" :src="b12" mode="widthFix"></image>
					<image class="b13 bc" v-if="show13" :src="b13" mode="widthFix"></image>
				</view>
				<view v-if="index==2">
					<image class="b21 br" v-if="show21" :src="b21" mode="widthFix"></image>
					<image class="b22 br" v-if="show22" :src="b22" mode="widthFix"></image>
				</view>
				<view v-if="index==4">
					<image class="ma1" :src="ma1" mode="widthFix"></image>
					<image class="ma2" :src="ma2" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const showTime = 600;
	const oss = 'https://xxx/web/baobao-msd-h5/'
	var innerAudioContext;
	export default {
		components: {

		},
		data() {
			return {
				isMusic: 'http://xxx.cn/merckGame/imagesv2/2023news/isMusic.png?v=1',
				music: 'http://xxx.cn/merckGame/imagesv2/2023news/music.png?v=1',
				isPlay: false,
				judgeBigScreen: true,
				show11: false,
				show12: false,
				show13: false,
				show21: false,
				show22: false,
				show31: false,
				show32: false,
				b11: oss + '1b1.png?v=2',
				b12: oss + '1b2.png?v=2',
				b13: oss + '1b3.jpg?v=2',

				b21: oss + '2b1.png?v=2',
				b22: oss + '2b2.png?v=2',

				b31: oss + '3b1.png?v=2',
				b32: oss + '3b2.jpg?v=2',

				imgList: [
					// oss + '1.jpg?v=2',
					// oss + '2.jpg?v=2',
					// oss + '3.jpg?v=2',
					oss + '3b.jpg?v=2',
					oss + '1b.jpg?v=2',
					oss + '2b.jpg?v=2',
					oss + '4.jpg?v=2',
					oss + '5.jpg?v=2',
					// oss + '6.jpg?v=1'
				],
				ma1: oss + '5_1.png?v=2',
				ma2: oss + '5_2.png?v=2',
				issuoplay: false,
				youxia: oss + 'youxia.png?v=2',
			};
		},
		onLoad(option) {
			this.$common.Init.call(this);
			this.initAudio()
			this.initJudge()

			setTimeout(() => {
				this.show32 = true
			}, showTime)
			setTimeout(() => {
				this.show31 = true
			}, showTime + showTime)
		},
		methods: {
			initJudge() {
				let judgeBigScreen = false;
				const res = wx.getSystemInfoSync();
				const rate = res.windowHeight / res.windowWidth;
				let limit = res.windowHeight == res.screenHeight ? 1.8 : 1.65; // 临界判断值
				if (rate > limit) judgeBigScreen = true;
				this.judgeBigScreen = judgeBigScreen
				console.log('是否长屏', judgeBigScreen);
			},
			initAudio() {
				let that = this
				innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = 'https://oss.consultech.com.cn/web/baobao-msd-h5/baobao-msd-bg2.mp3';
				document.addEventListener("WeixinJSBridgeReady", function() {
					that.playAudio()
				}, false);

				innerAudioContext.onPlay(() => {
					that.issuoplay = true;
					that.isPlay = true;
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			setMuissc() {
				this.issuoplay = true;
				if (!this.isPlay) {
					console.log('点击播放');
					this.isPlay = true;
					this.playAudio()
				} else {
					console.log('点击暂停');
					this.isPlay = false;
					this.playStop()

				}
			},
			aaa() {
				if (!this.issuoplay && !this.isPlay) {
					this.isPlay = true;
					this.playAudio()
				}
				this.issuoplay = true;
			},
			playAudio() {
				innerAudioContext.play();
			},
			playStop() {
				innerAudioContext.stop();
			},
			changeSwiper(e) {
				this.show11 = false
				this.show12 = false
				this.show13 = false
				this.show21 = false
				this.show22 = false
				this.show31 = false
				this.show32 = false
				console.log('e', e.detail.current);
				let idx = e.detail.current;
				if (idx === 0) {
					setTimeout(() => {
						this.show31 = true
					}, showTime)
					setTimeout(() => {
						this.show32 = true
					}, showTime + showTime)
				} else if (idx === 1) {

					setTimeout(() => {
						this.show11 = true
					}, showTime)
					setTimeout(() => {
						this.show12 = true
					}, showTime + showTime)
					setTimeout(() => {
						this.show13 = true
					}, showTime + showTime + showTime)
				} else if (idx === 2) {
					setTimeout(() => {
						this.show21 = true
					}, showTime)
					setTimeout(() => {
						this.show22 = true
					}, showTime + showTime)

				}

			},
		},
	};
</script>

<style lang="scss" scoped>
	.youxia {
		position: absolute;
		right: 30rpx;
		bottom: 10rpx;
		width: 262rpx;
		z-index: 5;
	}

	.music1 {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		width: 62rpx;
		height: 62rpx;
		z-index: 5;
		animation: rotate 4s linear infinite;
	}

	.music2 {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		width: 62rpx;
		height: 62rpx;
		z-index: 5;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.b31 {
		width: 90vw;
		top: 400rpx;
		left: 50vw;
		transform: translateX(-50%);
	}

	.b32 {
		width: 100vw;
		bottom: 0;
	}

	.b21 {
		width: 100vw;
		top: 0;
		animation: b21a 3s;
	}

	.b22 {
		width: 100vw;
		top: 530rpx;
		animation: b22a 3s;
	}

	.b11 {
		width: 370rpx;
		top: 400rpx;
		left: 50vw;
		transform: translateX(-50%);
	}

	@keyframes b21a {
		0% {
			left: -100vw;
			opacity: 0;
		}

		100% {
			left: 0;
			opacity: 1;
		}
	}

	@keyframes b22a {
		0% {
			left: 100vw;
			opacity: 0;
		}

		100% {
			left: 0;
			opacity: 1;
		}
	}

	.b12 {
		width: 86vw;
		top: 530rpx;
		left: 50vw;
		transform: translateX(-50%);
	}

	.b13 {
		width: 100vw;
		top: 780rpx;
		left: 50vw;
		transform: translateX(-50%);
	}

	.bc {
		position: absolute;
		z-index: 2;
		animation: myanimation 3s;
	}

	.br {

		position: absolute;
		z-index: 2;
	}

	@keyframes myanimation {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.page_long,
	.swiper_long,
	.item_long {
		width: 100vw;
		min-height: 100vh;
	}

	.page_6,
	.swiper_6,
	.item_6 {
		width: 100vw;
		min-height: 1448rpx;
	}

	// image {
	// 	display: block;
	// }
	.ma1 {
		position: absolute;
		top: 450rpx;
		left: 150rpx;
		width: 200rpx;
		height: 200rpx;
		z-index: 3;
	}

	.ma2 {
		position: absolute;
		top: 450rpx;
		left: 400rpx;
		width: 200rpx;
		height: 200rpx;
		z-index: 3;
	}

	.pageBg1 {
		width: 100vw;
		height: 100vh;
		animation: myanimation2 1s;
	}

	@keyframes myanimation2 {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.pageBg2 {
		width: 100vw;
		animation: myanimation2 1s;
	}
</style>