小程序音频播放状态切换失败问题

项目赶需要在添加音频设置，初识小程序两周直接正题

image

效果大概这样

此处页面代码

<view class="muiscBox">
  <view class="musicList" wx:for="{{ musicArr }}" wx:key="item.bgm.id">
    <view class="musicName" bindtap='choseMusic' data-index="{{ index }}">
      <view><icon type="{{ item.bgm.types }}" size="16" color="{{ item.bgm.color }}"/> </view>
       <text>{{ item.bgm.name }}</text>
    </view>
    <view
       class="audition"
       bindtap='audition'
       data-index="{{ index }}"
       data-url="{{ item.bgm.bgmUrl }}"
       data-ids="{{ item.bgm.id }}"
    >
       <text wx:if="{{ item.bgm.haveTry }}">试听</text>
       <image wx:else src="../../images/icon-yinybf.png" />
     </view>
    </view>
  </view>
  <audio class="auditionAudio" id="itemBgm" controls loop></audio>

js代码（oldidx记录上一个点击的index号，这里遇到的坑是audio标签的src不要使用setData给音频标签快速切换时会有音频加载延迟问题，使用this.audioCtx.setSrc(url)来切换音频文件）

audition(e) { //试听功能
    let oldidx = this.data.musicidx, musicidx = e.currentTarget.dataset.index, ids = e.currentTarget.dataset.ids, urls = e.currentTarget.dataset.url
    if(oldidx == musicidx){ //点击同一个试听按钮时
      if (this.data.musicArr[musicidx].bgm.haveTry) {
        this.audioCtx.setSrc(urls)
        this.audioCtx.play()
      } else {
        this.audioCtx.seek(0)
        this.audioCtx.pause()
      }
    } else { //点击的非同一个按钮将上一关闭打开下一个
      this.audioCtx.setSrc(urls)
      this.data.musicArr[oldidx].bgm.haveTry = true
      this.audioCtx.play()
    }
    this.data.musicArr[musicidx].bgm.haveTry = !this.data.musicArr[musicidx].bgm.haveTry
    this.setData({ musicidx: musicidx, musicArr: this.data.musicArr })
  },

这里补上相关api：wx.createAudioContext
需要在onReady函数内创建并返回 audio 上下文 audioContext 对象（具体请查看小程序开发文档）

onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('itemBgm')
  },