EpicSoul/App.vue

<script>
	export default {
		globalData: {
			mainSliderIndex: 0,
			randomImages: [],
			bgMusic: null,
			isMusicPlaying: false
		},
		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 {
					let bgMusic;
			
					// 区分平台 - 小程序环境使用背景音频，H5等环境使用内部音频
					// #ifdef MP-WEIXIN
					try {
						bgMusic = uni.getBackgroundAudioManager();
						// 小程序环境需要设置title
						bgMusic.title = '背景音乐';
					} catch (e) {
						console.error('获取背景音频管理器失败，改用内部音频上下文', e);
						bgMusic = uni.createInnerAudioContext();
					}
					// #endif
			
					// #ifndef MP-WEIXIN
					bgMusic = uni.createInnerAudioContext();
					// #endif
			
					// 配置音频
					bgMusic.src = 'https://mp-8aaaff75-9c10-4e68-919c-7f4ee2d555b6.cdn.bspapp.com/xxdf.MP3';
					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 = 'https://static.ticket.sz-trip.com/epicSoul/xxdf.MP3';
							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);
				}
			}
		}
	}
</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);
		}
	}
</style>