使用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()
    })

 
相关推荐
一粒黑子5 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
IT枫斗者5 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
九转成圣6 小时前
Java 性能优化实战:如何将海量扁平数据高效转化为类目字典树?
java·开发语言·json
Beginner x_u6 小时前
链表专题:JS 实现原理与高频算法题总结
javascript·算法·链表
SmartRadio6 小时前
ESP32-S3 双模式切换实现:兼顾手机_路由器连接与WiFi长距离通信
开发语言·网络·智能手机·esp32·长距离wifi
m0_726365836 小时前
Ai漫剧系统 几分钟,让AI 把一篇小说变成了一部漫剧成片:从剧本到视频的全流程系统实现
人工智能·语言模型·ai作画·音视频
laowangpython6 小时前
Rust 入门:GitHub 热门内存安全编程语言
开发语言·其他·rust·github
我叫汪枫6 小时前
在后台管理系统中,如何递归和选择保留的思路来过滤菜单
开发语言·javascript·node.js·ecmascript
_.Switch6 小时前
东方财富股票数据JS逆向:secids字段和AES加密实战
开发语言·前端·javascript·网络·爬虫·python·ecmascript
软件技术NINI6 小时前
webkit简介及工作流程
开发语言·前端·javascript·udp·ecmascript·webkit·yarn