EpicSoul/App.vue

<script>
	export default {
		globalData: {
			mainSliderIndex: 0,
			randomImages: [],
			bgMusic: null,
			isMusicPlaying: false,
			musicSrc: 'https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3'
		},
		onLaunch: function() {
			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
			console.log('App Launch')
			// 移除初始化背景音乐的调用
			// this.initBackgroundMusic();
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			initBackgroundMusic() {
				try {
					console.log('bgMusic',this.globalData.bgMusic)
					// 销毁旧的音频实例（关键！）
					if (this.globalData.bgMusic) {
						this.globalData.bgMusic.stop();
						this.globalData.bgMusic.destroy()
						this.globalData.bgMusic = null;
					}

					let bgMusic;

					// 区分平台 - 小程序环境使用背景音频，H5等环境使用内部音频
					// #ifdef MP-WEIXIN
					//            try {
					//                bgMusic = uni.getBackgroundAudioManager();
					//                // 小程序环境需要设置title
					//                bgMusic.title = '背景音乐';
					// // 设置音频组件的 ID
					// bgMusic.id = 'mp-audio';
					//            } catch (e) {
					//                console.error('获取背景音频管理器失败，改用内部音频上下文', e);
					//                bgMusic = uni.createInnerAudioContext();
					//            }
					bgMusic = uni.createInnerAudioContext();
					// #endif

					// #ifndef MP-WEIXIN
					bgMusic = uni.createInnerAudioContext();
					// #endif

					// 配置音频
					bgMusic.src = this.globalData.musicSrc;
					console.log(bgMusic.src)
					bgMusic.loop = true; // 循环播放

					// 使用不同的事件监听方式，兼容两种音频上下文
					if (bgMusic.onPlay) {
						// BackgroundAudioManager 方式
						bgMusic.onPlay(() => {
							this.globalData.isMusicPlaying = true;
						});

						bgMusic.onPause(() => {
							this.globalData.isMusicPlaying = false;
						});

						bgMusic.onStop(() => {
							this.globalData.isMusicPlaying = false;
						});

						bgMusic.onEnded(() => {
							// 循环播放 (BackgroundAudioManager需要重新设置src)
							bgMusic.src = this.globalData.musicSrc;
							bgMusic.play();
						});
					} else {
						// InnerAudioContext 方式
						bgMusic.onPlay(() => {
							this.globalData.isMusicPlaying = true;
						});

						bgMusic.onPause(() => {
							this.globalData.isMusicPlaying = false;
						});

						bgMusic.onStop(() => {
							this.globalData.isMusicPlaying = false;
						});

						bgMusic.onEnded(() => {
							// InnerAudioContext设置了loop不需要手动重新播放
							this.globalData.isMusicPlaying = false;
						});
					}

					// 保存到全局
					this.globalData.bgMusic = bgMusic;

					// 创建全局方法供其他页面调用
					uni.$bgMusic = {
						play: () => {
							if (bgMusic && bgMusic.play) {
								bgMusic.play();
							}
							return this.globalData.isMusicPlaying;
						},
						pause: () => {
							if (bgMusic && bgMusic.pause) {
								bgMusic.pause();
							}
							return this.globalData.isMusicPlaying;
						},
						toggle: () => {
							if (!bgMusic) return false;

							if (this.globalData.isMusicPlaying) {
								if (bgMusic.pause) bgMusic.pause();
							} else {
								if (bgMusic.play) bgMusic.play();
							}
							return this.globalData.isMusicPlaying;
						},
						isPlaying: () => this.globalData.isMusicPlaying
					};
				} catch (err) {
					console.error('初始化背景音乐失败:', err);
				}
			},
			updateMusicSrc(newSrc) {
				this.globalData.musicSrc = newSrc;
				if (this.globalData.bgMusic) {
					this.globalData.bgMusic.src = newSrc;
				}
			}
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	@import "@/static/css/base.css";

	/* #ifndef APP-NVUE */
	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}

	/* 清除按钮默认样式 */
	button::after {
		border: none;
	}

	@keyframes bounce {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-20rpx);
		}

		60% {
			transform: translateY(-10rpx);
		}
	}

	/* 音乐控制按钮动画 */
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 隐藏微信小程序默认音频组件 */
	#mp-audio {
		display: none;
	}
</style>