微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
启雀AI3 小时前
AI 驱动的视频课程自动摘要与知识点提取:ASR + LLM 流水线工程实践
人工智能·阿里云·华为云·音视频·培训saas平台
java1234_小锋5 小时前
【免费】基于Python的微信小程序网约车(打车,在线叫车,移动出行)系统(FastAPI+Vue3) 锋哥原创出品,必属精品
微信小程序·小程序·fastapi·网约车系统·在线叫车系统
FinelyYang5 小时前
基于 LiveKit 实现一对一视频通话:从信令到媒体进房的完整实践
音视频·媒体
2501_9160074710 小时前
Bundle ID 注册与管理 App ID 创建指南 命名规则 权限开关与删除注意事项
android·ios·小程序·https·uni-app·iphone·webview
程序员老陆11 小时前
M3U8(HLS 索引协议)深度详解:它不存一帧画面,却指挥了整个互联网视频
音视频·hls·m3u8
雪的季节11 小时前
音视频(51-52)
音视频
hz5678912 小时前
视频会议终端品牌如何选择?主流产品特点与选型标准
安全·音视频·实时音视频·信息与通信
NutShell Wang14 小时前
国产全模态开源潮:从语言模型到视频模型,中国开源生态再升级
人工智能·语言模型·开源·大模型·音视频·多模态·vibe coding
凡科网小帆15 小时前
2026小程序商城做的比较好的品牌,怎么选小程序商城品牌
小程序·小程序商城
民乐团扒谱机16 小时前
【读论文】复调音乐信号的主旋律提取:方法、应用与挑战
开发语言·人工智能·算法·音视频·音乐