uni-app中uni.createInnerAudioContext在安卓app频繁播放音频时声音卡顿,微信小程序中未出现问题
uni-app中uni.createInnerAudioContext在安卓app频繁播放音频时声音卡顿,微信小程序中未出现问题
产品分类
uniapp/App
开发环境、版本号、项目创建方式
项⽬目信息 | 详细信息 |
---|---|
PC开发环境操作系统 | Mac |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.36 |
手机系统 | Android |
手机系统版本号 | Android 12 |
手机厂商 | OPPO |
手机机型 | oppo a36 |
页面类型 | vue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
示例代码
// 创建一个新的音频上下文对象
initAudioContext: function() {
console.log("[initAudioContext]");
// 在初始化时销毁之前的音频上下文
this.destroyAudioContext();
// 创建一个新的 InnerAudioContext 实例
t = uni.createInnerAudioContext({
useWebAudioImplement: !0 // 使用 WebAudio 实现
});
// 设置自动播放为 false
t.autoplay = !1;
// 绑定音频播放事件
t.onPlay(function() {
// 播放开始时的回调(当前为空)
});
// 绑定音频播放结束事件
t.onEnded(function() {
// 播放结束时的回调(当前为空)
});
// 绑定音频播放错误事件
t.onError(function(error) {
console.log("[initAudioContext] 播放错误 cod=" + error.errCode + ", message=" + error.errMsg);
// 打印播放错误的错误码和信息
});
// 绑定音频停止播放事件
t.onStop(function() {
// 打印停止播放的日志
});
// 绑定音频等待事件(例如等待缓冲等)
t.onWaiting(function() {
console.log("[initAudioContext] onWaiting");
// 打印等待状态的日志
});
// #ifdef MP-WEIXIN
// 检查是否支持设置音频选项
if (wx.setInnerAudioOption) {
// 设置音频选项,不受静音开关影响
wx.setInnerAudioOption({
obeyMuteSwitch: !1
});
} else {
// 如果不支持 setInnerAudioOption,则直接设置属性
t.obeyMuteSwitch = !1;
}
// #endif
},
// 处理逻辑
updatePlayBeat() {
// 触发播放
// this.lineIsLeft = (this.lineIsLeft === 0 || this.lineIsLeft === 1) ? 2 : 1; // 切换指针
// 音频判断
this.startIndex = (this.startIndex === this.beat[0] || this.startIndex === -1) ? 0 : this.startIndex + 1;
this.playBeat(this.startIndex)
return true
},
// 播放音频
playBeat: function(index) {
if (t) {
t.stop();
var n = this.getAudioSrc(index);
if (n) {
t.src = n;
console.log('播放声音' + index);
t.play()
}
}
},
// 设置一个定时器,根据节拍时间间隔更新节拍
let a = setInterval(function() {
// 更新当前播放的节拍,如果更新成功,继续设置新的间隔时间
if (t.updatePlayBeat()) {
t.updateIntervalWithBPM(e); // 更新节拍的间隔时间
} else {
console.log("[handlePlayIgnorePlayStatus] #更新失败,停止播放#");
t.endFunction(); // 更新失败,停止播放
}
}, e);
t.intervalNumber = a // 保存定时器的 ID,以便后续停止定时器
bug描述
uni.createInnerAudioContext创建音频,setInterval定时切换的时候,音频播放卡顿,不精准且定时任务是没问题,慢一点的时候是可以的,当快一点 400ms - 250ms 的时候就会有问题。
更多关于uni-app中uni.createInnerAudioContext在安卓app频繁播放音频时声音卡顿,微信小程序中未出现问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于uni-app中uni.createInnerAudioContext在安卓app频繁播放音频时声音卡顿,微信小程序中未出现问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在uni-app中使用uni.createInnerAudioContext
播放音频时,如果遇到安卓设备上频繁播放音频导致声音卡顿的问题,这通常与音频资源的加载、解码和播放管理有关。虽然微信小程序中未出现问题,但安卓原生应用可能会因为资源管理和系统限制等因素导致性能瓶颈。以下是一些可能的解决方案,通过代码示例来优化音频播放逻辑:
1. 缓存音频资源
为了避免频繁加载音频文件导致的性能问题,可以将音频文件缓存到本地,并在需要时重用这些缓存的音频资源。
const audioCtx = uni.createInnerAudioContext();
const cachedAudios = {};
function playAudio(url) {
if (cachedAudios[url]) {
audioCtx.src = cachedAudios[url];
audioCtx.play();
} else {
uni.request({
url: url,
responseType: 'arraybuffer',
success: (res) => {
const filePath = `${uni.env.USER_DATA_PATH}/${new Date().getTime()}.mp3`;
const fs = uni.getFileSystemManager();
fs.writeFile({
filePath,
data: res.data,
encoding: 'binary',
success: () => {
cachedAudios[url] = filePath;
audioCtx.src = filePath;
audioCtx.play();
},
fail: (err) => {
console.error('Failed to write file:', err);
}
});
},
fail: (err) => {
console.error('Failed to download audio:', err);
}
});
}
}
2. 管理音频上下文
确保在播放新的音频之前停止当前播放的音频,避免多个音频同时播放造成的资源冲突。
function stopCurrentAudio() {
if (audioCtx.src) {
audioCtx.stop();
}
}
function playNewAudio(url) {
stopCurrentAudio();
playAudio(url);
}
3. 释放资源
在音频播放完毕后,及时释放相关资源,避免内存泄漏。
audioCtx.onEnded(() => {
audioCtx.destroy(); // 销毁音频上下文
// 清理缓存(可选,根据需求决定是否保留缓存)
// delete cachedAudios[audioCtx.src];
});
4. 优化播放逻辑
避免在短时间内频繁触发播放操作,可以通过设置播放间隔或队列来管理播放请求。
结论
通过上述方法,可以有效减少安卓设备上频繁播放音频时的卡顿问题。这些方法包括缓存音频资源以减少加载时间、管理音频上下文以避免资源冲突、及时释放资源以避免内存泄漏,以及优化播放逻辑以减少不必要的播放请求。根据具体场景,可以进一步调整和优化这些策略。