微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
视频技术分享几秒前
技术赋能生态革新:音视频产业开启千亿增长新周期 视频会议成核心增长亮点
音视频
reasonsummer22 分钟前
【教学类-160-14】20260425 AI视频培训-练习014“豆包AI视频《月下枯蔷(哥特风)》+豆包图片风格:油画”
人工智能·音视频·豆包
AI服务老曹1 小时前
深度解析:支持 GB28181/RTSP 及异构计算(X86/ARM+GPU/NPU)的 AI 视频管理平台架构方案(附源码交付与 Docker 部署)
arm开发·人工智能·音视频
互联科技报1 小时前
2026小程序店铺装修模板怎么选?小程序店铺装修教程是什么?
小程序
byte轻骑兵1 小时前
【LE Audio】BASS精讲[5]: 状态特征解析,广播接收状态实时可视全流程
人工智能·算法·音视频·语音识别·le audio·低功耗音频
LCMICRO-133108477461 小时前
长芯微LD1871完全P2P替代AD1871,是一款立体声音频ADC
单片机·嵌入式硬件·fpga开发·音视频·硬件工程·dsp开发·音频adc
甄心爱学习1 小时前
【数字图像处理】什么是视频任务的隐式神经表征?
音视频
开开心心就好2 小时前
支持批量添加水印的实用工具推荐
人工智能·游戏·ci/cd·docker·音视频·语音识别·媒体
y小花2 小时前
安卓音频低延时与AAudio
android·音视频