小程序笔记-关于wx.createInnerAudioContext() /InnerAudioContext的使用与踩坑

该博客介绍了在微信小程序中如何实现音频的循环播放,通过销毁旧实例、创建新实例来避免音频重叠播放的问题。同时,展示了监听音频播放状态的详细过程,包括播放开始、错误处理、暂停和结束等事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用

用方法封装,也可以不封装

/**
   * 操控音频播放
   * @params: Audios: 音频地址列表
   * */ 
  handleAudio(Audios){
    
    AppMusic.destroy()  //销毁上次的实例(必须有)AppMusic是全局实例
    AppMusic = wx.createInnerAudioContext() //创建实例(记住一定放这里,因为每次新播放音频都要新建实例,否则会播放上次和本次的音频)
    AppMusic.src = Audios[0]  // 播放地址
    AppMusic.autoplay = true  // 自动播放,默认位false
    AppMusic.onPlay(() => {   // 监听播放开始
      console.log('开始播放')
    })
    AppMusic.onError((res) => { //监听播放报错
      console.log(res.errMsg)
      console.log(res.errCode)
      // AppMusic.destroy()
    })
    AppMusic.onPause( () =>{  //监听播放暂停
      console.log('暂停播放')
     }
    )
    let jishu = Audios.length  //获取地址列表长度,方便下面的循环播放
    let soundsIndex = 0 //音频索引
    let offEnded = AppMusic.onEnded( (res) =>{  //使用类似递归的方法循环,播放上一首结束,继续下一首
      console.log(AppMusic.src)
      jishu --
      if(jishu > 0){
        soundsIndex ++
        AppMusic.src = Audios[soundsIndex]     
      }
    })
  },

踩坑:

如果在调用方法前不使用AppMusic.destroy()  就会出现同一个音频多次被监测和播放:

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值