uni-app uni.createInnerAudioContext() 播放结束没有触发onEnded

发布于 1周前 作者 eggper 来自 Uni-App

uni-app uni.createInnerAudioContext() 播放结束没有触发onEnded

示例代码

const AIAudioContext = uni.createInnerAudioContext();
AIAudioContext.src = url; // 设置本地音频路径
AIAudioContext.play();  

AIAudioContext.onEnded = () => {  
  console.log('播放结束onEnded')  
  onEnd();  
};

操作步骤

  1. 播放一个音频
  2. 音频播放结束
  3. 没有触发 onEnded

预期结果

  1. 音频播放结束触发 onEnded，或者有其他事件可以判断音频播放结束？

实际结果

  1. 音频播放结束完全没有触发 onEnded

bug描述

  1. uni.createInnerAudioContext() 播放结束，没有触发 onEnded
  2. 为什么不会触发，那我怎么去监听音频播放结束，开始下一个音频播放？

开发环境信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Mac Apple M2；MacOS 14.5 (23F79) 正式 4.36 Android Android 13 OPPO OnePlus 8/安卓平板 vue vue3 云端

Harmonyos Next教程
6 回复

你好，我使用下面的代码，使用 HBuilderX alpha 4.45， vue3，安卓 15，小米 13 运行正常，可以正确触发 play/seek/end，音频长度 175s，你可以基于我提供的代码指出如何修改和复现。
<template>
<view>
<button @click=“onPlay”>play</button>
</view>
</template>

<script> export default { onLoad() { const auctx = uni.createInnerAudioContext() this.auCtx = auctx auctx.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3' auctx.onPlay(() => { console.log('开始播放'); }); auctx.onError((res) => { console.log('on error'); console.log(res.errMsg); console.log(res.errCode); }); auctx.onEnded((e)=>{ console.log('onend',e); }) auctx.onSeeking(e=>{ console.log('on seeking',e); }) auctx.onSeeked(e=>{ console.log('on onSeeked',e); }) }, methods:{ onPlay(){ this.auCtx.play() setTimeout(()=>{ this.auCtx.seek(170) },1000) } } } </script>

seek的触发不包括 拖动进度条吗

回复 菜菜2: 没理解，这是纯 js 播放和拖动，没有 ui 页面怎么拖动？我 seek 是为了快点让音频播放结束，早点触发 onEnd

我 seek 170 秒是为了快速到播放的最后几秒，你根据我这个改改

回复 DCloud_UNI_OttoJi: 抱歉，我问错问题了，这个音频播放结束能正常触发 onEnded 了

在uni-app中，uni.createInnerAudioContext() 用于创建并返回一个内部音频上下文对象，允许你控制音频的播放、暂停、音量等操作。关于你提到的 onEnded 事件没有触发的问题，通常是因为事件监听没有正确设置或者存在一些特定的场景导致事件未能正常触发。

以下是一个基本的代码示例，展示了如何正确设置和使用 onEnded 事件：

// 创建一个内部音频上下文
const innerAudioContext = uni.createInnerAudioContext();

// 设置音频文件的src
innerAudioContext.src = 'https://example.com/audio/sample.mp3';

// 监听播放结束事件
innerAudioContext.onEnded(() => {
    console.log('音频播放结束');
    // 在这里添加播放结束后的逻辑处理
});

// 监听错误事件，帮助调试可能的问题
innerAudioContext.onError((err) => {
    console.error('音频播放出错:', err);
});

// 播放音频
innerAudioContext.play();

排查问题步骤

  1. 检查音频URL：确保 src 指向的音频文件是可访问的，并且文件格式是支持的。

  2. 网络权限：如果是在小程序中运行，确保已在 manifest.json 中配置了必要的网络请求权限。

  3. 事件监听设置：确认 onEnded 事件监听是在音频开始播放之前或之时设置的。

  4. 重复播放问题：如果音频设置了循环播放 (innerAudioContext.loop = true)，onEnded 事件将不会触发。检查是否有此类设置。

  5. 组件销毁问题：如果音频上下文在组件销毁后还在尝试触发事件，可能会导致事件不被处理。确保组件销毁时清理相关资源。

  6. 平台差异：不同平台（如微信小程序、H5、App等）可能存在实现差异，检查是否在特定平台上出现问题。

  7. 版本更新：检查uni-app和相关平台的SDK是否有更新，有时候bug会在新版本中得到修复。

如果以上步骤都确认无误但问题依旧存在，可以考虑在开发者社区或者官方论坛寻求帮助，提供详细的错误日志和代码示例，以便他人更好地理解和定位问题。

回到顶部