微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_38:(DocumentFragment 文档片段接口详解)
前端·javascript·ui·html·音视频
空中海8 小时前
微信小程序 - 03 工程实践层与综合 Demo
微信小程序·小程序·notepad++
深度智能Ai8 小时前
云声配音(MelodyCloud Studio):AI驱动的全链路音视频创作平台
人工智能·音视频
小徐_23339 小时前
Wot UI v1 升级 v2?这份迁移指南帮你少踩坑!
前端·微信小程序·uni-app
IC_1577961147610 小时前
国产立体声音频数模转换器(DAC):CJC4344
音视频
优睿远行10 小时前
微信小程序云开发环境搭建与REST API混合架构实战
微信小程序·小程序
Greg_Zhong11 小时前
解决绘制的雷达图在页面有滚动时,雷达图出现`轻微上下偏移`的问题
微信小程序·canvans绘制雷达图
空中海11 小时前
微信小程序 - 02 基础概念层与核心能力层
微信小程序·小程序
ZFSS12 小时前
PixVerse 视频生成 API 实战教程
人工智能·ai·ai作画·音视频·ai编程
byte轻骑兵12 小时前
【LE Audio】CAP精讲[4]: Acceptor合规指南,从程序到协同全流程落地
人工智能·音视频·le audio·音视频控制