使用uni.createInnerAudioContext()播放指定音频(踩坑分享功能)

步骤一:封装音频初始化函数,确保配置完整

javascript 复制代码
function initAudio() {
  const audio = uni.createInnerAudioContext()
  audio.src = '/static/music.mp3'
  audio.loop = true
  audio.obeyMuteSwitch = false
  audio.volume = 0.7

  // 监听错误(调试用)
  audio.onError((e) => {
    console.error('音频错误', e)
  })

  audioInstance.value = audio
}

步骤二:初始化调用

javascript 复制代码
 onMounted(() => {
      initAudio()
    })

    onShow(() => {
      // 页面显示时尝试恢复播放
      audioInstance.value?.play().catch(e => {
        console.log('播放被阻止,等待用户交互')
      })
    })

    onHide(() => {
      // 页面隐藏时暂停(不销毁!)
      audioInstance.value?.pause()
    })

    onUnload(() => {
      // 页面卸载时才销毁
      audioInstance.value?.destroy()
    })

 
相关推荐
linux_cfan18 分钟前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
Bruce_Liuxiaowei2 小时前
Python 实例赋值遮蔽类属性:一个从不报错的静默陷阱
开发语言·python·语法糖
音视频牛哥2 小时前
视频编码的终局不是“更省码率”:从 H.266、AV2 到 AI 编解码的下一场竞争
音视频·h.266·rtsp h.266·h.266编解码·rtp h.266·rtp vvc·ai编解码
何何____2 小时前
Vue 生命周期详解
前端·javascript
aramae3 小时前
MySQL内置函数(7)
开发语言·笔记·后端·mysql·其他
默_笙4 小时前
💫 闭包是个背包:拆解小米前端面试题里的三道"闭包陷阱"
前端·javascript·面试
程序员老陆6 小时前
WHIP 与 WHEP:WebRTC 直播的标准化入口与出口
ffmpeg·音视频·webrtc·whip·whep
码行山野赴时序归途6 小时前
链表家族收官篇:循环链表
c语言·开发语言·数据结构·链表
景熙55236 小时前
单体项目编写思路和落地形式
java·开发语言
尾善爱看海6 小时前
《JavaScript 数组操作全攻略:12 类 API + 30 个实战场景 + 20 个避坑指南》
前端·javascript·面试