uni-app h5页面在ios使用uni.createInnerAudioContext()播放音频延迟三秒才开始播放

uni-app h5页面在ios使用uni.createInnerAudioContext()播放音频延迟三秒才开始播放

示例代码：

var innerAudioContext = this.innerAudioContext = uni.createInnerAudioContext();  
innerAudioContext.autoplay = false;  
innerAudioContext.src = encodeURI('../../../static/img/music/A1.wav');  
innerAudioContext.onPlay(() => {    
    console.log('开始播放');    
});  
innerAudioContext.onError((res) => {    
    console.log(res);  
});  
innerAudioContext.play();

操作步骤：

var innerAudioContext = this.innerAudioContext = uni.createInnerAudioContext();  
innerAudioContext.autoplay = false;  
innerAudioContext.src = encodeURI('../../../static/img/music/A1.wav');  
innerAudioContext.onPlay(() => {    
    console.log('开始播放');    
});  
innerAudioContext.onError((res) => {    
    console.log(res);  
});  
innerAudioContext.play();

预期结果：

在安卓没有任何延迟效果，希望ios也一样。

实际结果：

有最少三秒的延迟

bug描述：

h5页面在ios使用uni.createInnerAudioContext()播放音频，延迟三秒才开始播放！

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.12
浏览器平台 手机系统浏览器
浏览器版本 12.28.0.14
项目创建方式 HBuilderX

更多关于uni-app h5页面在ios使用uni.createInnerAudioContext()播放音频延迟三秒才开始播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请问现在解决这个问题了吗

更多关于uni-app h5页面在ios使用uni.createInnerAudioContext()播放音频延迟三秒才开始播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我这边IOS端H5 onplay方法根本就不走,不知道为啥

这是iOS Safari浏览器对音频自动播放的限制导致的。iOS系统要求音频播放必须由用户主动触发（如点击事件），否则会延迟播放或静音。

解决方案：

  1. 使用用户交互事件触发：将play()调用放在按钮点击等用户交互事件中
// 在按钮点击事件中初始化并播放
playAudio() {
  if (!this.innerAudioContext) {
    this.innerAudioContext = uni.createInnerAudioContext();
    this.innerAudioContext.src = '../../../static/img/music/A1.wav';
  }
  this.innerAudioContext.play();
}
  1. 预加载音频：在用户交互前先加载音频
// 页面加载时创建但不播放
onLoad() {
  this.innerAudioContext = uni.createInnerAudioContext();
  this.innerAudioContext.autoplay = false;
  this.innerAudioContext.src = '../../../static/img/music/A1.wav';
  // 预加载
  this.innerAudioContext.onCanplay(() => {
    console.log('音频已准备好');
  });
}

// 用户点击时直接播放
playAudio() {
  this.innerAudioContext.play();
}
回到顶部