微信小程序Audio列表音乐单独播放-蒲公英云

微信小程序Audio列表音乐单独播放

问题描述

官方文档仅给出了一首音乐的播放/暂停的操作说明，而我们的音乐有时候是以列表的形式展开的。

具体操作是点击音乐播放，再次点击暂停，各音乐播放不会发生冲突。

思路

想要动态实现暂停/播放，必须动态绑定，则必须有一个变量记录当前播放的状态，我选择加入控制播放的action到音乐播放数组的每个元素中(数组是List)，然后触发一个点击事件更改点击音乐的action值即可

实现

若要实现点击播放或暂停效果是一定要通过数据绑定动态实现的(代码解释在下边)

<block wx:for="{
   {bgmList}}">
    <view class='container'>
        <audio name="{
   {item.name}}" author="{
   {item.author}}" bindtap='playorpause'
            action="{
   {item.action}}"
            src="{
   {serverUrl}}{
   {item.path}}" style='width:300px' id="myAudio" 
            data-arrindex='{
   {index}}' controls loop>
        </audio>
   </view>
</block>

音乐的播放与暂停操作是受action控制的，具体为

myAction：{
    method:"pause" //暂停
}
myAction：{
    method:"play" //播放
}

我是把音乐保存到一个bgmList中，包括名称(name)，歌手(author)和播放地址(src)，定义了一个点击事件(playorpause)和当前音乐在列表中的下标(data-arrindex)。然后在onLoad()方法中对data赋值时，便历bgmList，为每一个bgm增加一个action数据记录音乐是暂停还是播放

var action = {method:"pause"};
for(var index in bgmList){
   bgmList[index].action = action;
}
me.setData({
  bgmList: bgmList,
});

关键在于playorpause方法的编写

playorpause:function(e){
      var me=this;
      var index = e.target.dataset.arrindex; //获取点击音乐的下标
      var item = 'bgmList['+index+'].action'; //获取音乐的播放状态
      var actionPlay = {method:"play"}; //定义播放
      var actionPause = {method:"pause"}; //定义暂停
      if(me.data.bgmList[index].action.method == "pause"){  //若当前是暂停，则点击后播放
        me.setData({
          [item] : actionPlay
        });
      }else{  //若当前是播放，则点击后暂停
        me.setData({
          [item] : actionPause
        });
      }
}