uni-app 七牛CDN音频在背景音乐播放首次加载onUpdateTime不生效

uni-app 七牛CDN音频在背景音乐播放首次加载onUpdateTime不生效

9 回复

仅 安卓 App 出现此问题吗？

更多关于uni-app 七牛CDN音频在背景音乐播放首次加载onUpdateTime不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还没有在iOS设备进行测试

小米11 miui12.5.9 也是这样的问题，设置URL开始播放声音后，必须手动点暂停再播放onUpdateTime 才能响应，雷电模拟器4又没有问题。

组件demo里面的音频就没问题，我自己的七牛音频就有问题

beijingyinyue.src = “”;
setTimeout(function(){ beijingyinyue.pause(); beijingyinyue.play(); },3000);
完美解决

自动播放的节点呢？onEnded触发也有不稳定，有时候会触发2次onEnded

回复 江月照我眠: 只要设置src就来一次，播放结束可以用setInterval检查当前播放状态以及播放进度来判断是否播放完毕。

回复 4***@qq.com: 我试过这种写法，实际山系统的onUpdateTime触发极不稳定，有时候2秒才跳一下，有时候会卡好几秒，我最终才用每次播放都销毁-重进计时器，记录计时器的播放时间（如果检测到播放器有currentTime小于当前播放时间会修正）

在 uni-app 中使用七牛 CDN 音频作为背景音乐播放时，首次加载 onUpdateTime 不生效，通常是由于音频资源加载时机与播放器事件监听顺序问题导致的。以下是具体原因和解决方案：

原因分析

  1. 音频未预加载：首次播放时，音频文件需要从 CDN 下载，可能尚未完全加载，导致时间更新事件无法触发。
  2. 事件监听时机不当：onUpdateTime 事件监听可能在音频加载完成前就已绑定，但首次加载时播放器内部状态未就绪。
  3. 跨平台差异：不同平台（如 iOS、Android）对背景音频播放的事件支持可能存在差异，影响首次加载时的回调执行。

解决方案

1. 预加载音频资源

在播放前提前加载音频，确保资源就绪：

const backgroundAudioManager = uni.getBackgroundAudioManager();
backgroundAudioManager.src = 'https://cdn.example.com/audio.mp3';
// 预加载：设置 title 等属性可触发加载
backgroundAudioManager.title = '音频标题';
// 监听 canplay 事件，确保可播放后再操作
backgroundAudioManager.onCanplay(() => {
  console.log('音频可播放');
});

2. 延迟监听 onUpdateTime 事件

在音频加载完成后再绑定时间更新事件：

backgroundAudioManager.onCanplay(() => {
  backgroundAudioManager.onTimeUpdate((res) => {
    console.log('当前时间:', res.currentTime);
  });
});

3. 使用 onPlay 事件触发首次更新

通过 onPlay 事件确保播放开始后立即更新时间：

backgroundAudioManager.onPlay(() => {
  // 手动触发一次时间更新或设置定时器
  setInterval(() => {
    console.log('当前时间:', backgroundAudioManager.currentTime);
  }, 500);
});

4. 检查跨平台兼容性

  • iOS 限制：iOS 可能要求用户交互后才能播放音频，首次加载需确保由用户触发（如按钮点击）。
  • 使用 uni.createInnerAudioContext() 测试基础功能，排除背景音频管理器的特定问题。

5. 确保网络权限与 CDN 配置

  • 检查音频 CDN 地址是否可跨域访问（CORS 配置）。
  • 在 manifest.json 中配置网络权限：
    "networkTimeout": {
  "request": 10000
}

示例代码整合

export default {
  methods: {
    playAudio() {
      const bgAudio = uni.getBackgroundAudioManager();
      bgAudio.src = 'https://cdn.example.com/audio.mp3';
      bgAudio.title = '示例音频';

      bgAudio.onCanplay(() => {
        bgAudio.onTimeUpdate((res) => {
          console.log('时间更新:', res.currentTime);
        });
        bgAudio.play(); // 确保在 canplay 后播放
      });

      // 备用方案：onPlay 触发更新
      bgAudio.onPlay(() => {
        console.log('开始播放，当前时间:', bgAudio.currentTime);
      });
    }
  }
}
回到顶部