From b426676627b0e48bbdd26fffb1d142f95c527d90 Mon Sep 17 00:00:00 2001
From: zhaofengliang <zhaofengliang@dcloud.io>
Date: Tue, 3 Dec 2024 15:47:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=83=8C=E6=99=AF=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE=E7=A4=BA=E4=BE=8B=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../get-background-audio-manager.uvue         | 317 ++++++++++--------
 1 file changed, 180 insertions(+), 137 deletions(-)

diff --git a/pages/API/get-background-audio-manager/get-background-audio-manager.uvue b/pages/API/get-background-audio-manager/get-background-audio-manager.uvue
index 31bd7add..a792bb4f 100644
--- a/pages/API/get-background-audio-manager/get-background-audio-manager.uvue
+++ b/pages/API/get-background-audio-manager/get-background-audio-manager.uvue
@@ -1,138 +1,181 @@
-<template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-padding-wrap">
-			<view class="uni-hello-text">注意：离开当前页面后背景音乐将保持播放</view>
-			<view class="page-body-buttons">
-				<template v-if="playing">
-					<view class="page-body-button" @tap="stop">
-						<image class="image" src="/static/stop.png"></image>
-					</view>
-					<view class="page-body-button" @tap="pause">
-						<image class="image" src="/static/pause.png"></image>
-					</view>
-				</template>
-				<template v-if="!playing">
-					<view class="page-body-button" @tap="play">
-						<image class="image" src="/static/play.png"></image>
-					</view>
-				</template>
-				<view class="page-body-button"></view>
-			</view>
-		</view>
-	</view>
-</template>
-<script>
-	export default {
-		data() {
-			return {
-				title: 'backgroundAudio',
-				bgAudioMannager: null as BackgroundAudioManager | null,
-				dataUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
-				playing: false,
-				playTime: 0,
-				formatedPlayTime: '00:00:00',
-				count: 100,
-			}
-		},
-		onLoad: function () {
-			let bgAudioMannager = uni.getBackgroundAudioManager();
-			bgAudioMannager.title = '致爱丽丝';
-			bgAudioMannager.singer = '路德维希·范·贝多芬';
-			bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
-
-			bgAudioMannager.onPlay(() => {
-				console.log("开始播放");
-				this.playing = true;
-			})
-			bgAudioMannager.onPause(() => {
-				console.log("暂停播放");
-				this.playing = false;
-			})
-			bgAudioMannager.onEnded(() => {
-				this.playing = false;
-			})
-			bgAudioMannager.onNext(() => {
-				console.log("下一曲");
-				this.bgAudioMannager?.stop()
-				bgAudioMannager.title = '致爱丽丝' + this.count++;
-				bgAudioMannager.singer = '路德维希·范·贝多芬';
-				bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
-				this.bgAudioMannager!.src = this.dataUrl;
-				this.bgAudioMannager?.play()
-			})
-			bgAudioMannager.onPrev(() => {
-				console.log("上一曲");
-				this.bgAudioMannager?.stop()
-				bgAudioMannager.title = '致爱丽丝' + this.count--;
-				bgAudioMannager.singer = '路德维希·范·贝多芬';
-				this.bgAudioMannager!.src = this.dataUrl;
-				this.bgAudioMannager?.play()
-			})
-			this.bgAudioMannager = bgAudioMannager;
-			this.playing = !bgAudioMannager.paused
-		},
-		methods: {
-			play: function () {
-				console.log('play')
-				this.bgAudioMannager!.src = this.dataUrl;
-				this.bgAudioMannager!.play()
-			},
-			pause: function () {
-				this.bgAudioMannager?.pause();
-			},
-			stop: function () {
-				this.bgAudioMannager?.stop();
-				this.playing = false
-			}
-		}
-	}
-</script>
-
-<style>
-	.image {
-		width: 150rpx;
-		height: 150rpx;
-	}
-
-	.page-body-text {
-		padding: 0 30rpx;
-	}
-
-	.page-body-wrapper {
-		margin-top: 0;
-	}
-
-	.page-body-info {
-		padding-bottom: 50rpx;
-	}
-
-	.time-big {
-		font-size: 60rpx;
-		margin: 20rpx;
-	}
-
-	.slider {
-		width: 630rpx;
-	}
-
-	.play-time {
-		width: 100%;
-		padding: 20rpx 0;
-		display: flex;
-		justify-content: space-between;
-		box-sizing: border-box;
-	}
-
-	.page-body-buttons {
-		display: flex;
-		justify-content: center;
-		margin-top: 100rpx;
-	}
-
-	.page-body-button {
-		flex-direction: row;
-		justify-content: center;
-    margin-bottom: 10px;
-	}
+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap">
+			<view class="uni-hello-text">注意：离开当前页面后背景音乐将保持播放，后台控制中心点击上一曲、下一曲切换到第102和104首音乐时会出现播放失败示例</view>
+			<view class="page-body-buttons">
+				<template v-if="playing">
+					<view class="page-body-button" @tap="stop">
+						<image class="image" src="/static/stop.png"></image>
+					</view>
+					<view class="page-body-button" @tap="pause">
+						<image class="image" src="/static/pause.png"></image>
+					</view>
+				</template>
+				<template v-if="!playing">
+					<view class="page-body-button" @tap="play">
+						<image class="image" src="/static/play.png"></image>
+					</view>
+				</template>
+				<view class="page-body-button"></view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				title: 'backgroundAudio',
+				bgAudioMannager: null as BackgroundAudioManager | null,
+				dataUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
+				playing: false,
+				playTime: 0,
+				formatedPlayTime: '00:00:00',
+				count: 100,
+				isCanplay: false,
+			}
+		},
+		onLoad: function () {
+			let bgAudioMannager = uni.getBackgroundAudioManager();
+			bgAudioMannager.title = '致爱丽丝' + this.count;
+			bgAudioMannager.epname = '专辑名：致爱丽丝' + this.count
+			bgAudioMannager.singer = '歌手：暂无' + this.count;
+			bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
+			bgAudioMannager.onCanplay(() => {
+				console.log("音频进入可以播放状态事件");
+				this.isCanplay = true
+				this.bgAudioMannager!.play()
+			})
+			bgAudioMannager.onPlay(() => {
+				console.log("开始播放");
+				this.playing = true;
+			})
+			bgAudioMannager.onPause(() => {
+				console.log("暂停播放");
+				this.playing = false;
+			})
+			bgAudioMannager.onStop(() => {
+				console.log("停止播放");
+				this.playing = false;
+			})
+			bgAudioMannager.onEnded(() => {
+				console.log("播放结束");
+				this.playing = false;
+				// this.playTime = this.playTime = 0;
+				// thi.formatedPlayTime = this.formatedPlayTime
+			})
+			bgAudioMannager.onNext(() => {
+				this.count++
+				console.log("下一曲", this.count);
+				this.bgAudioMannager?.stop()
+				bgAudioMannager.title = '致爱丽丝' + this.count;
+				bgAudioMannager.singer = '歌手：暂无' + this.count;
+				if (this.count == 102 || this.count == 104) {
+					this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise1.mp3'
+				} else {
+					this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
+				}
+				bgAudioMannager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
+				this.bgAudioMannager!.src = this.dataUrl;
+				this.bgAudioMannager?.play()
+			})
+			bgAudioMannager.onPrev(() => {
+				this.count--
+				console.log("上一曲", this.count);
+				this.bgAudioMannager?.stop()
+				bgAudioMannager.title = '致爱丽丝' + this.count;
+				bgAudioMannager.singer = '歌手：暂无' + this.count;
+				if (this.count == 102 || this.count == 104) {
+					this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise1.mp3'
+				} else {
+					this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
+				}
+				bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
+				this.bgAudioMannager!.src = this.dataUrl;
+				this.bgAudioMannager?.play()
+			})
+			bgAudioMannager.onSeeking(() => {
+				console.log('音频进行 seek 操作事件');
+			})
+			bgAudioMannager.onSeeked(() => {
+				console.log('音频完成 seek 操作事件');
+			})
+			bgAudioMannager.onWaiting(() => {
+				console.log('音频加载中事件');
+			})
+			bgAudioMannager.onTimeUpdate(() => {
+				console.log('onTimeUpdate', bgAudioMannager.currentTime)
+			})
+			bgAudioMannager.onError((err) => {
+				console.log('播放出错err', err);
+			})
+			this.bgAudioMannager = bgAudioMannager;
+			this.playing = !bgAudioMannager.paused
+		},
+		methods: {
+			play: function () {
+				console.log('play')
+				this.bgAudioMannager!.src = this.dataUrl;
+				if (this.isCanplay) {
+					this.bgAudioMannager!.play()
+				}
+			},
+			pause: function () {
+				this.bgAudioMannager?.pause();
+			},
+			stop: function () {
+				this.bgAudioMannager?.stop();
+				this.playing = false
+			}
+		}
+	}
+</script>
+
+<style>
+	.image {
+		width: 150rpx;
+		height: 150rpx;
+	}
+
+	.page-body-text {
+		padding: 0 30rpx;
+	}
+
+	.page-body-wrapper {
+		margin-top: 0;
+	}
+
+	.page-body-info {
+		padding-bottom: 50rpx;
+	}
+
+	.time-big {
+		font-size: 60rpx;
+		margin: 20rpx;
+	}
+
+	.slider {
+		width: 630rpx;
+	}
+
+	.play-time {
+		width: 100%;
+		padding: 20rpx 0;
+		display: flex;
+		justify-content: space-between;
+		box-sizing: border-box;
+	}
+
+	.page-body-buttons {
+		display: flex;
+		justify-content: center;
+		margin-top: 100rpx;
+		flex-direction: column;
+	}
+
+	.page-body-button {
+		flex-direction: row;
+		justify-content: center;
+	}
 </style>
-- 
GitLab