评论

云开发之音频列表播放

云开发播放音频列表时出现了问题?看看这里吧~希望对你们有点小小的帮助。

说明
音频播放列表中播放云开发中存储的音频文件,可以使用fileid,直接播放。
错误实现方式
在xml文件中添加<audio>组件,src为云存储文件的fileid来实现音频播放,报错Uncaught (in promise) NotSupportedError: The element has no supported sources.,截图如下:

原因为该组件src只能设置具体地址,该组件无法解析云文件的fileid到详情里的地址。
解决办法:使用wx.createInnerAudioContext()创建内部 audio 上下文 InnerAudioContext 对象,xml无需写<audio>组件,通过innerAudioContext.src设置为获取到的fileid。
遇到的问题:因为切换音频列表中的任意音频播放(当前音频正在播放中),而生成的音频实例只有一个,所以播放暂停等操作都是在同一个音频实例上,导致不暂停当前播放直接播放另一个音频还会继续播放前一段音频。
解决办法:定义一个全局InnerAudioContext 对象,在播放方法中首先销毁掉原来的对象并重新生成一个,之后再设置src并play()。注意:需在可播放状态监听事件里play()。暂停方法中则执行pause()。
完善:这样的话暂停当前选中音频,再重新点击播放会从头开始播放。暂停时设置一个变量preIndex存当前选中index,播放时判断当前选中index是否为preIndex,若不是则代表切换到了另一个音频,销毁当前InnerAudioContext 对象并重新生成一个。否则继续播放这个对象。当播放完时可以添加监听方法,改变播放状态。
部分代码

var innerAudioContext = wx.createInnerAudioContext();
Page({
  data:{
    voiceList:[],//音频列表,fileid
    preIndex:-1,//正在播放中的音频index
  },
  //播放
  play: function(e) {
    var that = this;
    //获取下一个播放的音频index
    var index = e.currentTarget.dataset.index;
    //正在播放的音频
    var preIndex = that.data.preIndex;
    if (index != preIndex) {
      innerAudioContext.destroy();
      innerAudioContext = wx.createInnerAudioContext();
      innerAudioContext.src = voiceList[index].fileId;
      innerAudioContext.onCanplay(function() {
        innerAudioContext.play();
      })
    } else {
      innerAudioContext.play();
    }
  },
  //暂停
  pause: function() {
    var that = this;
    innerAudioContext.pause();
    that.setData({
      preIndex:that.data.selectIndex
    })
  }
})
最后一次编辑于  2019-03-07  
点赞 4
收藏
评论

4 个评论

  • a 阳
    a 阳
    2021-11-24

    参照你这个解决的 但是销毁前 nnerAudioContext.destroy(); 不然会报错

    2021-11-24
    赞同
    回复 1
    • a 阳
      a 阳
      2021-11-24
      nnerAudioContext.stop()
      2021-11-24
      回复
  • A-小程序软件开发-张光辉
    A-小程序软件开发-张光辉
    2019-05-28

    你好,我在用innerAudioContext做播放音乐,遇到点问题能否给看看。https://developers.weixin.qq.com/community/develop/doc/000888a0c90168f5d1986205051000

    2019-05-28
    赞同
    回复
  • 2019-05-15

    也是通过wx 这个创建实例的方法 创建的,但是直接.src 后面如果是一个写死的链接ios 可以正常播放,只要搞成动态的就没声音了,安卓是好的

    2019-05-15
    赞同
    回复 4
    • 痛快科技
      痛快科技
      2019-05-16

      没太懂,可以提供一个代码片段看看

      2019-05-16
      回复
    • 2019-05-16回复痛快科技

      找到原因了后台返回的音频地址里面有汉字,编码一下ios 就可以了

      2019-05-16
      回复
    • 痛快科技
      痛快科技
      2019-05-16回复

      嗯嗯

      2019-05-16
      回复
    • 大左
      大左
      2020-06-10回复
      你好,我也遇到这个问题了,用什么api对src编码?
      2020-06-10
      回复
  • myO
    myO
    2019-04-13

    你好,我发现我的小程序里也有问题2。请问全局使用同一个innerAudioContext和每次新建销毁有何不同?是否尝试过用同一个实例,每次修改src后play() ?

    2019-04-13
    赞同
    回复 2
    • 痛快科技
      痛快科技
      2019-04-13

      不销毁只是修改src,存在不可控问题,具体可以尝试一下

      2019-04-13
      回复
    • 2019-05-15

      为什么通过接口获取的视频链接动态写上去不可以呢,但是直接写死一个src 后面的就可以了

      2019-05-15
      回复
登录 后发表内容