uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager()

文章发布于2021年03月27日 18:28, 归类于: 前端

uniapp 中使用uni.getBackgroundAudioManager()接口简单封装背景音频组件。

微信小程序背景音频播放组件

微信小程序背景音频播放组件 微信小程序背景音频播放组件 微信小程序背景音频播放组件

播放组件

<template>
	<view class="">
		<view class="my-audio-warp" :class="{'show':show}">
			<view class="schedule-warp">
				<view class="schedule-bg" :style="scheduleStyle"></view>
				<view class="text-warp">
					<view class="text">
						{{audioCurrentDuration.minute}}:{{audioCurrentDuration.second}}
					</view>
					<view class="text">
						{{audioDuration.minute}}:{{audioDuration.second}}
					</view>
				</view>
			</view>
			<view class="play-btn" :class="audioStatus" @click="handlePlay"></view>
		</view>

		<!-- 设置播放进度 -->
		<view class="seek-warp" v-if="show">
			<input type="number" v-model="second" placeholder="输入秒数" />
			<button type="default" @click="seek">跳到指定秒数</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否自动播放
			autoplay: {
				default: false
			}
		},
		data() {
			return {
				show: false,
				currentTime: 0,
				audioProgress: 0,
				// 播放状态
				audioPlay: false,
				// playing:播放中 pause:暂停 ended:结束
				audioStatus: 'pause',
				innerAudioContext: null,
				duration: 0,
				audioDuration: {
					m: 0,
					s: 0,
					minute: '00',
					second: '00'
				},
				audioCurrentDuration: {
					m: 0,
					s: 0,
					minute: '00',
					second: '00'
				},
				// 测试
				second: '',
				// 测试
			}
		},
		computed: {
			scheduleStyle() {
				return `width:${this.audioProgress}%;`
			}
		},
		created() {
			this.innerAudioContext = uni.getBackgroundAudioManager()

			this.innerAudioContext.onCanplay(() => {
				this.getAudioDuration()
			});

			this.innerAudioContext.onTimeUpdate((e) => {
				this.currentTime = this.innerAudioContext.currentTime || 0
				// 进度条比例
				this.audioProgress = (this.currentTime / this.duration) * 100

				if (this.duration == 0) {
					this.getAudioDuration()
				}
				// 已播放时间
				this.audioCurrentDuration = this.timeStampFormat(this.currentTime)
				// console.log('onTimeUpdate', this.currentTime);
			});

			this.innerAudioContext.onPlay(() => {
				this.audioPlay = true
				// playing:播放中 pause:暂停 ended:结束
				this.audioStatus = 'playing'
			});

			this.innerAudioContext.onPause(() => {
				this.audioPlay = false
				this.audioStatus = 'pause'
			});

			this.innerAudioContext.onEnded(() => {
				this.audioPlay = false
				this.audioStatus = 'ended'
			});

			this.innerAudioContext.onError((res) => {
				console.log('onError', JSON.stringify(res));
			});
		},
		methods: {
			seek() {
				this.innerAudioContext.seek(parseInt(this.second))
			},
			// 初始化音频
			initAudio({
				title = '暂无',
				singer = '暂无',
				coverImgUrl = '',
				src = ''
			}) {

				this.show = src ? true : false
				this.innerAudioContext.autoplay = false;
				// 音频播放信息,必须设置标题、作者,不设置可能无法播放
				this.innerAudioContext.title = title
				this.innerAudioContext.singer = singer
				this.innerAudioContext.coverImgUrl = coverImgUrl
				this.innerAudioContext.src = src

			},
			// 获取音频时长
			getAudioDuration() {
				// 先调用一次,否则获取失败
				let duration = this.innerAudioContext.duration || 0

				setTimeout(() => {
					duration = parseFloat(JSON.stringify(this.innerAudioContext.duration))
					this.duration = duration
					// 总时长
					this.audioDuration = this.timeStampFormat(this.duration)
				}, 500)
			},
			// 点击播放
			handlePlay() {
				if (!this.innerAudioContext) return
				if (!this.audioPlay) {
					this.innerAudioContext.play()
				} else {
					this.innerAudioContext.pause()
				}
			},
			// 获取时间
			timeStampFormat(duration) {
				var second = Math.floor(duration);
				var m = Math.floor(second / 60) || 0
				// 秒
				var s = Math.floor(second % 60) || 0

				return {
					duration,
					m,
					s,
					minute: m.toString().padStart(2, '0'),
					second: s.toString().padStart(2, '0')
				}
			},
			// 销毁
			destroy() {
				if (this.innerAudioContext) {

					// 停止
					if (this.innerAudioContext.stop) {
						this.innerAudioContext.stop()
					}

					// 销毁
					if (this.innerAudioContext.destroy) {
						this.innerAudioContext.destroy()
					}
				}
			},
			// 暂停
			pause() {
				if (this.innerAudioContext && this.innerAudioContext.pause) {
					this.innerAudioContext.pause()
				}
			},
			// 播放
			play() {
				if (this.innerAudioContext && this.innerAudioContext.play) {
					this.innerAudioContext.play()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 测试 start
	.seek-warp {
		// position: absolute;
		// top: 0;
		// left: 0;
		width: 100%;
		background-color: #888888;

		input {
			padding: 0 24upx;
			height: 88upx;
			line-height: 88upx;
			background-color: #fefefe;
			color: #333333;
		}
	}

	// 测试 end
	.my-audio-warp {
		display: none;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		margin-bottom: 40rpx;
		padding: 24upx 40upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24upx rgba(0, 0, 0, 0.06);
		border-radius: 24upx;

		&.show {
			display: flex;
		}

		.schedule-warp {
			position: relative;
			flex: 1;
			margin-right: 40upx;
			height: 12upx;
			background: #F0F0F0;
			border-radius: 12upx;

			.schedule-bg {
				position: absolute;
				top: 0;
				left: 0;
				height: 12upx;
				background-color: #CA0000;
				border-radius: 12upx;
				overflow: hidden;
			}

			.text-warp {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				top: 18upx;
				width: 100%;

				.text {
					font-size: 24upx;
					font-weight: 400;
					color: #888888;
				}
			}
		}

		.play-btn {
			width: 98upx;
			height: 98upx;
			border-radius: 49upx;
			background-size: 100%;
			background-repeat: no-repeat;

			&.playing {
				// background-image: url('/static/images/icon/SubtitlesDetail/playing.png');
				&::after {
					content: "暂停播放";
					display: block;
					width: 98upx;
					height: 98upx;
					line-height: 98upx;
					font-size: 24upx;
					background-color: red;
				}
			}

			&.pause {
				// background-image: url('/static/images/icon/SubtitlesDetail/pause.png');
				&::after {
					content: "开始播放";
					display: block;
					width: 98upx;
					height: 98upx;
					line-height: 98upx;
					font-size: 24upx;
					background-color: red;
				}
			}

			&.ended {
				// background-image: url('/static/images/icon/SubtitlesDetail/ended.png');
				&::after {
					content: "重新播放";
					display: block;
					width: 98upx;
					height: 98upx;
					line-height: 98upx;
					font-size: 24upx;
					background-color: red;
				}
			}
		}
	}
</style>

父组件

<template>
	<view class="Test">
		<myAudio ref="myAudio" />
		<button @click="initAudio">设置 src</button>
		<button @click="destroy">销毁</button>
	</view>
</template>

<script>
	import myAudio from './components/my-BackgroundAudioManager.vue'
	export default {
		components: {
			myAudio
		},
		data() {
			return {
				data: {
					title: '致爱丽丝',
					singer: '暂无',
					coverImgUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
					src: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3"
				}
			}
		},
		methods: {
			initAudio() {
				this.$refs.myAudio.initAudio(this.data)
			},
			destroy() {
				this.$refs.myAudio.destroy()
			}
		},
		onUnload() {
			this.destroy()
		}
	}
</script>

<style lang="scss" scoped>
	.Test {
		padding: 24upx;

		button {
			margin: 24upx 0;
		}
	}
</style>

转载请注明来源:《 uniapp 微信小程序背景音频播放 uni.getBackgroundAudioManager()》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1616840928.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:微信公众号网页,微信jssdk需要刷新页面才可以使用 下一篇:uniapp 苹果授权登录