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

 
相关推荐
Xin_ye100862 分钟前
C# 零基础到精通教程 - 第十二章:异常处理与调试——让程序更健壮
开发语言·c#
m0_502724953 分钟前
vue3生成pdf
前端·javascript·vue.js·pdf
m0_634666733 分钟前
Stability Audio 3.0 把 AI 音乐推过了一个门槛:从“音频片段”走向“完整歌曲”
人工智能·音视频
楼田莉子4 分钟前
C#学习之C#入门学习
开发语言·后端·学习·c#
我命由我123454 分钟前
PHP - PHP 简易 Web 服务器、基础接口开发
服务器·开发语言·前端·php·intellij-idea·idea·intellij idea
Reload.5 分钟前
CZ航司,shopping JS逆向 acw_sc__v2
开发语言·javascript·python·网络爬虫·ecmascript
码界筑梦坊6 分钟前
130-基于Python的体育用品销售数据可视化分析系统
开发语言·python·信息可视化·flask·毕业设计
2的n次方_6 分钟前
健身 Agent:不止视频,更有 AI 人物实时跟练交互
人工智能·音视频·交互·魔珐星云
码界筑梦坊7 分钟前
131-基于Flask的美国新泽西州自动售货机销售数据可视化分析系统
开发语言·python·信息可视化·数据分析·flask·毕业设计
努力努力再努力wz8 分钟前
【QT入门系列】QWidget 六大常用属性详解:windowOpacity、cursor、font、focus、toolTip 与 styleSheet
android·开发语言·数据结构·c++·qt·mysql·算法