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

古城微笑少年丶 2022-01-28 01:29 716阅读 0赞

### 问题描述 ###

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

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

### 思路 ###

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

### 实现 ###

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

音乐的播放与暂停操作是受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
            });
          }
          
    }