background-audio.uvue

<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap">
			<view class="uni-hello-text">注意：请确保通知权限开启，离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
			<view class="page-body-buttons">
				<block 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>
				</block>
				<block v-if="!playing">
					<view class="page-body-button" @tap="play">
						<image class="image" src="/static/play.png"></image>
					</view>
				</block>
				<view class="page-body-button"></view>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef APP-ANDROID
	import Build from 'android.os.Build'
	import Application from 'android.app.Application'
	// #endif
	// import {
	// 	*
	// } from "@/uni_modules/uni-getBackgroundAudioManager"
	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;
				// this.playTime = this.playTime = 0;
				// thi.formatedPlayTime = this.formatedPlayTime
			})
			bgAudioMannager.onNext(() => {
				console.log("下一曲");
				this.bgAudioMannager?.stop()
				bgAudioMannager.title = '致爱丽丝'+this.count++;
				bgAudioMannager.singer = '暂无2'+this.count++;
				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.count--;
				this.bgAudioMannager!!.src = this.dataUrl;
				this.bgAudioMannager?.play()
			})
			// bgAudioMannager.onTimeUpdate((e) => {
			// 	if (Math.floor(bgAudioMannager.currentTime) > Math.floor(this.playTime)) {
			// 		this.$backgroundAudioData.formatedPlayTime = this.formatedPlayTime = util.formatTime(Math.floor(bgAudioMannager.currentTime));
			// 	}
			// 	this.$backgroundAudioData.playTime = this.playTime = bgAudioMannager.currentTime;
			// })

			this.bgAudioMannager = bgAudioMannager;
		},
		methods: {
			play: function () {
				console.log('play')
				this.bgAudioMannager!!.src = this.dataUrl;
				// #ifdef APP-ANDROID
				if (UTSAndroid.checkSystemPermissionGranted(UTSAndroid.getUniActivity()!, ["android.permission.POST_NOTIFICATIONS"])) {
					this.bgAudioMannager!!.play()
				} else {
					// 检查当前 Android 版本和 targetSdkVersion
					if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
						// Android 13 及以上版本
						if ((UTSAndroid.getAppContext() as Application).applicationInfo.targetSdkVersion >= 33) {
							UTSAndroid.requestSystemPermission(UTSAndroid.getUniActivity()!, ["android.permission.POST_NOTIFICATIONS"], (_ : boolean, p : string[]) => {
								this.bgAudioMannager!!.play()
							}, (_ : boolean, p : string[]) => {
								uni.showToast({
									title: "权限被拒绝了",
									position: "bottom"
								})
								console.log(p)
							})
						} else {
							uni.showToast({
								title: '请手动打开通知权限'
							})
						}
					} else {
						uni.showToast({
							title: '请手动打开通知权限'
						})
					}
				}
				// #endif
			},
			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;
	}
</style>