uniapp：播放音频（uni.createInnerAudioContext()）

sunly_

已于 2023-09-22 16:48:30 修改

阅读量1w

点赞数 3

分类专栏： uniapp 文章标签： uniapp 前端

于 2022-03-19 11:13:03 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/123591049

版权

uniapp 专栏收录该内容

106 篇文章

订阅专栏

这篇博客介绍了如何在H5和uni-app中利用uni.createInnerAudioContext()方法创建并控制音频播放，特别是在H5端处理播放权限问题。通过在音频结束事件中切换音频源，实现了背景音乐的循环播放功能。同时，提供了暂停和继续播放的控制逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni.createInnerAudioContext()

src			音频的数据链接，用于直接播放。
play		播放（H5端部分浏览器需在用户交互时进行）
onEnded		音频自然播放结束事件

onShow() {
	var music = null;
	music = uni.createInnerAudioContext(); //创建播放器对象
	music.src = '../../static/1.mp3'; // static文件夹下的音频
	music.play(); //执行播放
	music.onEnded(() => {
		//播放结束
		music = null;
	});
},

H5端部分浏览器，需要写在事件中才能触发。否则会有报错
在这里插入图片描述
DOMException: play()失败，因为用户没有首先与文档交互

更新内容，实现背景音乐循环播放

data() {
	return {
		musicShow:true,// 默认音乐播放
		musicData:null,
		bgmList:[], //背景音乐
		current_bgm:0,// 当前播放歌曲位置
		current_src:'', //当前播放音乐的url
	}
},
onLoad() {
	this.$http.get('/api/ee/bgms').then(res=>{
		if(res.code == 200){
			this.bgmList = res.data.bgms
			this.current_bgm = 0;
			this.current_src = this.bgmList[this.current_bgm].url
			console.log(this.bgmList.length);
			this.musicData = null;
			this.musicData = uni.createInnerAudioContext(); //创建播放器对象
			this.musicData.src = this.current_src; // static文件夹下的音频
			this.musicData.play(); //执行播放
			this.musicData.onEnded(() => {
				if(this.current_bgm == this.bgmList.length-1){
					console.log('重头播放');
					// 重头播放
					this.current_bgm = 0
					this.current_src = this.bgmList[this.current_bgm].url
					this.musicData.src = this.current_src; // static文件夹下的音频
					this.musicData.play(); //播放结束，循环播放
				}else{
					console.log('下一首音乐');
					this.current_bgm++
					this.current_src = this.bgmList[this.current_bgm].url
					this.musicData.src = this.current_src; // static文件夹下的音频
					this.musicData.play(); //播放结束，循环播放
				}
			});
		}
	})
},
// 音乐暂停播放按钮
changeMusic(){
	if(this.musicShow){
		console.log('暂停');
		this.musicData.pause();
		this.musicShow = !this.musicShow
	}else{
		console.log('开始');
		this.musicData.play(); //播放结束，循环播放
		this.musicShow = !this.musicShow
	}
},