微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
smartpi_ai28 分钟前
JL-17T 能接传感器并把数据发到小程序吗?GPIO/ADC/UART 平台可做,I2C/SPI 要二开
人工智能·小程序·语音识别
刘广睿1 小时前
断点续传与分片下载是怎么实现的?Range 请求在视频下载中的工程实践
okhttp·ffmpeg·音视频·下载·python3.11
andrsted3 小时前
在线刷小程序推荐
学习·微信小程序·小程序·学习方法
Mark108593 小时前
【踩坑】Uni-app微信小程序自定义组件在 Flex 布局中未铺满整行
微信小程序·小程序·uni-app
Dshaw3 小时前
抖音去水印下载:支持视频与图集
音视频
2601_962100734 小时前
2026年财报数据动画制作教程:财报图解转视频的完整流程
音视频
天天进步20155 小时前
Pixelle-Video 源码解析 #15:AI 视频片段生成:从静态配图到动态短视频
人工智能·音视频
深瞳智检5 小时前
深瞳智检(小程序)正式上线!【免费/快捷/方便】获取YOLO检测数据集
人工智能·yolo·目标检测·小程序·数据集·cv数据收集
美狐美颜SDK开放平台5 小时前
直播APP开发核心功能详解:美颜SDK、音视频、礼物等功能成本怎么计算?
android·人工智能·计算机视觉·音视频·直播美颜sdk
2601_962100735 小时前
手绘医学科普视频制作教程(2026 年)
音视频