uniapp音乐播放createInnerAudioContext

利用uniapp的api createInnerAudioContext音乐播放

1.html部分

javascript 复制代码

<template>
	<view style="padding: 30vh 20% 0 20%;" class="flex-space-center">
		<view @click="handleDo('stop')" v-if="status != 'stop'">
			结束
		</view>
		<view @click="handleDo('play')" v-if="status =='stop'">
			开始
		</view>
		<view @click="handleDo('pause')" v-if="status == 'play' || status =='resum'">
			暂停
		</view>
		<view @click="handleDo('resum')" v-if="status == 'pause'">
			继续
		</view>

		<view :class="{play:isPlay,pause:isPause}"
			style="display: inline-block;height: 40rpx;width: 40rpx;background: red;" @click="handleImg">
			5
		</view>
	</view>
</template>

2.script部分

javascript 复制代码

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		components: {},

		data() {
			return {
				isPause: false,
				isPlay: false,
				status: 'stop', //stop 结束  play播放  pause暂停  resum继续
				bgmusic: '',
				src_bgmusic: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
			}
		},

		onLoad(options) {
			this.init(options)

		},
		onHide() {
			//注意：uni.navigateBack到下一个页面时，音乐会继续播放，所以我们要在这里设置一下暂停
			if (this.bgmusic) {
				this.voice_pause()
			}
		},
		onShow() {
			// 从下一个返回到这个页面时继续
			if (this.bgmusic) {
				this.audioResum()
			}
		},
		onUnload() {
			// 页面销毁时暂停音乐
			this.voice_stop()
		},
		onReady() {},
		methods: {
			init(options) {
				// 自然播放结束事件
				innerAudioContext.onEnded(() => {
					this.audioPaly()
				})
				// 模拟接口请求背景音乐---
				setTimeout(() => {
					this.bgmusic = this.src_bgmusic;
				}, 0)
			},
			// 播放
			audioPaly() {
				this.isPause = false
				this.isPlay = true
				innerAudioContext.src = this.bgmusic
				innerAudioContext.play()
				this.status = 'play'
			},
			// 继续
			audioResum() {
				this.isPause = false
				this.isPlay = true
				innerAudioContext.play()
				this.status = 'resum'
			},
			// 暂停
			audioPause() {
				this.isPause = true;
				this.isPlay = false;
				innerAudioContext.pause()
				this.status = 'pause'
			},
			// 结束
			audioStop() {
				this.isPause = true
				this.isPlay = false;
				innerAudioContext.stop()
				this.status = 'stop'
			},
			// 操作
			handleDo(status) {
				switch (status) {
					case 'stop':
						this.audioStop()
						break;
					case 'play':
						this.audioPaly()
						break;
					case 'pause':
						this.audioPause()
						break;
					case 'resum':
						this.audioResum()
						break;
				}
			},
			// 点击旋转
			handleImg() {
				switch (this.status) {
					case 'play':
						this.audioPause()
						break;
					case 'pause':
						this.audioResum()
						break;
					case 'resum':
						this.audioPause()
						break;
					case 'stop':
						this.audioPaly()
						break;
				}
			}

		}

	}
</script>

style部分

javascript 复制代码

<style lang="scss" scoped>
	.play {
		animation: rotate 3s linear infinite;
	}

	.pause {
		animation-play-state: paused;
	}

	@keyframes rotate {
		to {
			transform: rotate(360deg);
		}
	}
</style>