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

 
相关推荐
我命由我123454 小时前
React - 组件优化、children props 与 render props、错误边界
前端·javascript·react.js·前端框架·html·ecmascript·js
鲸渔4 小时前
【C++ 基本数据类型】整型、浮点型、字符型、布尔型及大小
开发语言·c++
程序员zgh4 小时前
C/C++ 单元测试系统 构建
c语言·开发语言·c++·学习·单元测试
love530love4 小时前
从零搭建本地版 Claurst:基于 Rust 重构的 Claude Code 终端编码助手 + LM Studio 模型接入测试
开发语言·人工智能·windows·重构·rust·lm studio·claude code
小书房4 小时前
Java的运行时数据区
java·开发语言·运行时数据区
Crazy________4 小时前
docker4.9数据卷/网络模式
java·开发语言
小陈工4 小时前
Python Web开发入门(十三):API版本管理与兼容性——让你的接口优雅地“长大”
开发语言·前端·人工智能·python·安全·oracle
李宏伟~4 小时前
大文件分片案例html + nodejs + 视频上传案例
javascript·html·音视频
被摘下的星星4 小时前
Go赋值操作的关键细节
开发语言·golang
jwn9994 小时前
Laravel2.x经典特性回顾
开发语言·php·laravel