微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
小疯仔1 小时前
轨迹在地图上“漂“了 500 米?一文吃透 WGS-84→GCJ-02 坐标转换引擎(GPX→JSON 实战源码剖析)
小程序·json·notepad++
烟雨江南7854 小时前
200路并发语音识别系统实践:CPU、GPU与国产昇腾三种部署方案怎么选?
人工智能·websocket·音视频·语音识别·ai客服
视频技术分享5 小时前
视频会议系统技术全解:底层架构、选型标准与实战优化
架构·音视频
林墨聊AIGC6 小时前
AI视频怎么做跳舞的动作效果:从入门到精通的舞蹈动画制作指南
大数据·人工智能·自动化·aigc·音视频
lhldsg6 小时前
全民健身解决方案软件开发实战:从架构设计到部署指南
java·前端·数据库·小程序
小鱼爱吃草灬灬9 小时前
实时面试辅助排查清单:音频来源、问题输入与上下文
面试·职场和发展·音视频
可乐鸡翅yeah_9 小时前
HLS 自动化拨测与手动调试分工,流媒体线上监控体系建设实践
运维·自动化·测试用例·音视频·媒体·m3u8·音视频在线播放
2501_9160074711 小时前
使用Apple Dashboards显示和自定iOS应用性能指标与数据可视化指南
android·ios·小程序·https·uni-app·iphone·webview
欧特克_Glodon11 小时前
OpenCV计算机视觉开发入门与实践<三十五>:开发视频播放器
c++·opencv·计算机视觉·音视频
2301_7681034912 小时前
AI视频创作Agent实战05:Wan场景融合与VideoRetalk口型驱动
人工智能·音视频