微信小程序音频播放失败: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(); //加载完毕,开始播放
     },
});
相关推荐
YZ09919 小时前
Sora2 AI视频去水印接口
人工智能·音视频·api·ai编程
硅谷秋水20 小时前
mimic-video:机器人控制的可泛化视频-动作模型,超越VLA模型
人工智能·机器学习·计算机视觉·机器人·音视频
源代码•宸21 小时前
简版抖音项目——项目需求、项目整体设计、Gin 框架使用、视频模块方案设计、用户与鉴权模块方案设计、JWT
经验分享·后端·golang·音视频·gin·jwt·gorm
REDcker1 天前
RTP、RTCP 与 SRTP 协议详解
网络·音视频·webrtc·实时音视频·rtp·rtcp
JELEE.1 天前
原生微信小程序开发笔记
笔记·微信小程序
雪碧聊技术1 天前
什么是Seedance 2.0?字节自研多模态AI视频生成引擎全解析
人工智能·音视频·seedance2.0
咚咚王者1 天前
人工智能之视觉领域 计算机视觉 第十三章 视频背景减除
人工智能·计算机视觉·音视频
蓝黑20202 天前
从经纬度获取地理信息以及从地名获取经纬度
小程序
奔跑吧 android2 天前
【车载Audio】【AudioHal 08】【高通音频架构】【SA8295P 音频资源管理器 (ResourceManager) 决策逻辑深度解析 】
音视频·sa8295p·audiohal·高通音频架构·音频资源管理器
linux_cfan2 天前
拒绝“黑屏”与“哑剧”:Web视频播放器UX体验与自动播放选型指南 (2026版)
前端·javascript·音视频·html5·ux