微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
AI天行健4 小时前
内容工作室 AI 视频量产选型:星宇智算无限画布能解决哪些生产卡点
人工智能·音视频
小猴子爱上树5 小时前
跨马翻译:批量图片翻译+视频字幕+智能抠图一站式工具
python·音视频
镭封5 小时前
基于微信小程序的移动端AI配音工作流设计
人工智能·小程序·媒体
火山引擎边缘云6 小时前
从“看见文字”到“读懂画面”:AI MediaKit 如何实现视频字幕无痕擦除
人工智能·音视频
光子物联单片机7 小时前
STM32传感器模块编程实践(二十二)DIY智能WIFI视频控制小车
c语言·stm32·单片机·嵌入式硬件·音视频
FX1317887KP_7 小时前
PET口语备考攻略:发音、语法、表达,三个问题怎么同时解决
小程序·ket口语·pet口语·fce备考·剑桥英语
特视界说7 小时前
产品参数还没最终确认,能做三维动画吗?可以,但要把不确定性标出来
微信·音视频·传媒·新浪微博·新人首发
地球@+jdhb447 小时前
企业私域运营新趋势:快手短视频平台跳转小程序企微卡片链路搭建成为商家运营重点
小程序·企业微信
程序鉴定师8 小时前
2026年深圳小程序/App开发公司技术选型指南:从架构设计到交付标准全维度评估
java·小程序·uni-app·php·objective-c
画绛集美术8 小时前
用开源AI语音合成做课程口播音频:一间美术教室的技术笔记
人工智能·笔记·音视频