微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
烟囱土著10 小时前
如何让相册「动」起来❓看这里❗
微信·微信小程序·小程序
REDcker14 小时前
Oryx开发者快速入门
服务器·后端·音视频·实时音视频·srs·流媒体·oryx
REDcker14 小时前
Oryx完整文档
服务器·后端·音视频·实时音视频·srs·流媒体·oryx
美狐美颜SDK开放平台15 小时前
美颜sdk哈哈镜功能开发指南:从人脸识别到动态变形
人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
小鹿软件办公17 小时前
音频比特率设置多少最好?320kbps 真的比 128kbps 好很多吗
音视频·音频比特率如何设置
大模型实验室Lab4AI17 小时前
山大提出攻克视频大模型时间理解短板新方案
人工智能·深度学习·算法·机器学习·音视频
azhou的代码园17 小时前
基于SpringBoot与微信小程序的招聘管理系统的设计与实现
spring boot·微信小程序·毕业设计·求职招聘小程序
lusasky18 小时前
公安交通领域多模态视频分析+Video-Chat/Video-RAG产品案例与技术原理
音视频
查无此人byebye18 小时前
从DDPM到DiT:扩散模型3大核心架构演进|CNN到Transformer的AIGC生成革命(附实操要点)
人工智能·pytorch·深度学习·架构·cnn·音视频·transformer
蓝帆傲亦19 小时前
Web前端Mock数据实战指南:正确使用Mock.js提升开发效率
微信小程序·小程序·uni-app