H5 自动播放背景音频，兼容安卓和苹果手机， ios createInnerAudioContext 无法自动播放解决

a_靖

于 2021-03-03 12:23:50 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp框架零基础到开发应用详细教程 Web前端 uni-app 文章标签： AudioContext H5播放背景音乐 uniapp播放背景音乐 IOS无法自动播放背景音乐播放背景音乐

本文链接：https://blog.youkuaiyun.com/qq_35713752/article/details/114306999

uniapp框架零基础到开发应用详细教程同时被 3 个专栏收录

23 篇文章 ¥49.90 ¥99.00

订阅专栏

Web前端

406 篇文章

订阅专栏

uni-app

87 篇文章

订阅专栏

iOS系统由于安全原因禁止自动播放音频，可通过两种方式解决：1. 用户交互后播放；2. 页面加载完成后使用特定代码触发播放。此方案适用于H5和uniapp的背景音乐播放。

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

原因应该是IOS不允许自动播放音频，有两种解决方法

在main.js


Vue.prototype.innerAudioContext = uni.createInnerAudioContext(); //创建播放器对象  

Vue.prototype.playAudio = function(audioUrl) {
	console.log('播放')
	var innerAudioContext = Vue.prototype.innerAudioContext;
	innerAudioContext.autoplay = true;
	if (audioUrl) {
		innerAudioContext = uni.createInnerAudioContext(); //创建播放器对象 
		innerAudioContext.src = audioUrl ? audioUrl :
			'https://tcb-vue-8gipg3itbc96c957-1254304076.tcloudbaseapp.com/backMusic2.mp3'; //选择播放的音频  
	} else {

		innerAudioContext.src = 'https://tcb-vue-8gipg3itbc96c957-1254304076.tcloudbaseapp.com/backMusic2.mp3'; //选择播放的音频  
	}
	innerAudioContext.play(); //执行播放
}

Vue.prototype.playStop = function() {
	console.log('停止')
	var innerAudioContext = Vue.prototype.inner

了解本专栏