get-background-audio-manager.uvue

<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap">
			<text>
				注意：1.离开当前页面后背景音乐将保持播放；\n
				2. 硬退出app、调用stop api、播放结束都会清理后台控制中心和锁屏信息显示
			</text>
			<view class="uni-common-mt">
				<slider ref="slider" :value="position" :min="0" :max="duration" @changing="onchanging"
					@change="onchange"></slider>
			</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" style="margin-top: 20px;">
						<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,
				isPlayEnd: false,
				duration: 100,
				currentTime: 0,
				_isChanging: false,
				buffered: 0,
			}
		},
		computed: {
			position() {
				return this.isPlayEnd ? 0 : this.currentTime;
			},
		},
		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.src = this.dataUrl;
      this.currentTime = bgAudioMannager.currentTime
      this.duration = bgAudioMannager.duration
			bgAudioMannager.onCanplay(() => {
				console.log("音频进入可以播放状态事件");
				this.buffered = bgAudioMannager.buffered;
				this.duration = bgAudioMannager.duration
			})
			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.currentTime = 0;
				this.isPlayEnd = true;
				(this.$refs["slider"] as UniSliderElement).value = 0
			})
			bgAudioMannager.onNext(() => {
				this.count++
				console.log("下一曲", this.count);
				this.bgAudioMannager?.stop()
				bgAudioMannager.title = '致爱丽丝' + this.count;
				bgAudioMannager.singer = '歌手：暂无' + this.count;
				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;
				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)
				if (this._isChanging) { return; }
				this.currentTime = this.bgAudioMannager!.currentTime;
				this.buffered = this.bgAudioMannager!.buffered;
				console.log('onTimeUpdateCb', this.currentTime)

				// #ifdef MP
				// 微信小程序安卓端过早的时机获取的buffered、duration为0，改为在此处获取
				if (this.bgAudioMannager!.duration === 0) {
					this.buffered = this.bgAudioMannager!.buffered;
					this.duration = this.bgAudioMannager!.duration
				}
				// #endif
				if (this.currentTime > this.buffered) {
					console.log('缓冲不足');
				}
			})
			bgAudioMannager.onError((err) => {
				console.log('播放出错err', err);
			})
			this.bgAudioMannager = bgAudioMannager;
			this.playing = !bgAudioMannager.paused
			console.log('currentTime=', this.bgAudioMannager!.currentTime, this.bgAudioMannager!.currentTime == 0)
		},
		methods: {
			play: function () {
				console.log('play')
				this.isPlayEnd = false;
				this.bgAudioMannager!.play()
			},
			pause: function () {
				this.bgAudioMannager?.pause();
			},
			stop: function () {
				this.bgAudioMannager?.stop();
				this.playing = false
			},
			onchanging() {
				this._isChanging = true;
			},
			onchange(e : UniSliderChangeEvent) {
				let pos = e.detail.value;
				console.log('pos', pos);
				this.bgAudioMannager!.seek(pos);
				this._isChanging = 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>