微信小程序音频播放失败:TypeError: Cannot read property ‘duration‘ of undefined

报错截图

最下面这个this.setData()报错可不用理会,是this取值的问题

解决

  1. 需要播放和暂停功能时,需要把audio以及他的src放在Page外面。
  2. 不能缺少 audioCtx.onPlay() 和 audioCtx.onError()两个方法,且需要放在play()方法之前
  3. 如果在wx.createInnerAudioContext()添加了 {useWebAudioImplement:true},把它去掉。
javascript 复制代码
//需要播放暂停音频功能时,需要将这两个变量放在 Page()上面
let audioCtx=wx.createInnerAudioContext()
audioCtx.src='http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3' //填入你自己的音频链接
Page({
     data: {
          isPlay: false,
     },
     playMusic(){
          audioCtx.onPlay(()=>{
               console.log("开始播放");
          })
           audioCtx.onError((res)=>{
             wx.showToast({
                title: '音乐播放错误',
                icon: 'error',
                duration: 3000
              })
           })
           let isPlay = !this.data.isPlay //控制播放和暂停的变量
           this.setData({
                isPlay:isPlay
               })
          if(isPlay){
               audioCtx.play()
               audioCtx.loop = true;
          }else{
               audioCtx.pause()
          }
     },
     },
     onLoad() {
          this.playMusic(); //加载完毕,开始播放
     },
});
相关推荐
sitellla1 小时前
Pydub:用 Python 处理音频,不写废话
开发语言·python·其他·音视频
大蚂蚁2号3 小时前
短视频批量生成技术深度解析与实战方案
python·aigc·音视频
Geek_Vison3 小时前
2026 跨端框架横评:FinClip、Taro、uni-app、Remax、mPaaS 五款工具技术+业务双维度测评
小程序·uni-app·taro·mpaas·小程序容器
chase。4 小时前
【学习笔记】Unified World Models:基于视频-动作耦合扩散的机器人预训练新范式
笔记·学习·音视频
VidDown5 小时前
VidDown 工具站:视频分辨率技术
javascript·网络·编辑器·音视频·视频编解码·视频
Cxiaomu5 小时前
React接入WebRTC实时视频实践
react.js·音视频·webrtc
kidding7235 小时前
高效备忘清单工具类小程序
前端·计算机网络·微信小程序·小程序
黄华SJ520it5 小时前
二二复制公排模式小程序开发全解析
小程序
小鹿研究点东西6 小时前
AI直播复盘实操:如何自动录制并拆解直播话术
人工智能·自动化·音视频
chase。6 小时前
【学习笔记】RIGVid:通过模仿生成视频实现机器人操作,无需物理演示
笔记·学习·音视频