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

2018-01-18  本文已影响0人  啊哈_b34b

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

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')
  },
上一篇 下一篇

猜你喜欢

热点阅读