微信小程序音乐播放器实例

微信小程序音乐播放器实例

效果展示

wxml

<view>
    <text class="catalogText">最近添加</text>
    <view class="photoList">
        <view class="photoItem" bindtap="playSong" data-num="{{index}}" wx:for="{{songList}}">
            <image class="musicImage" src="{{item.imageUrl}}"></image>
            <text class="musicName">{{item.name}}</text>
            <text class="musicSinger">{{item.singer}}</text>
        </view>
    </view>   
</view>
<!--选择播放-->
<view class="groupSelector" bindtap="showHiddenList">
    <text class="groupSelectorText">{{groupName}}</text>
    <image src="../icon/下箭头.png" class="groupSelectorImage"></image>
</view>
<action-sheet hidden="{{listIsHidden}}" bindtap="sheetChange">
    <block wx:for="{{sheetItems}}">
        <action-sheet-item data-sheetItem="{{item}}">
            {{item}}
        </action-sheet-item>
    </block>
    <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
<!--底部播放栏-->
<view class="player">
    <view class="playerImageView">
        <image class="playerImage" src="{{bottomPlayer.imageUrl}}"></image>
    </view>
    <text>{{bottomPlayer.name}}</text>
    <block wx:if="{{playing==false}}">
        <image src="../icon/播放.png" class="playButton" data-num="{{playSongNum}}" bindtap="playSong"></image>
    </block>
    <block wx:if="{{playing==true}}">
        <image src="../icon/暂停.png" class="playButton" data-num="{{playSongNum}}" bindtap="pause"></image>
    </block>
</view>

js

下面是js中除了生命周期函数之外的部分

var items=["播放列表","歌曲","歌手","专辑"];
var songList=[
  {
    dataUrl:"http://www.mvpdj.com/media/attachment/track/201910/20191001_4923325525d92e81e21e0c.mp3",
    name:"Feel So Unity Ciao Adios",
    singer:"Calvin Har",
    imageUrl:"https://www.0dutv.com/upload/magic/244.jpg"
  },{
    dataUrl:"http://m10.music.126.net/20210128113631/cecab302f502fed02254f6c26b76f12f/ymusic/efdf/7b1b/8051/acf8cd8dfe558183e22e4f6a59da9b74.mp3",
    name:"Pump This (Original Mix)",
    singer:"Snails,Herobust",
    imageUrl:"https://www.0dutv.com/upload/magic/251.jpg"
  },{
    dataUrl:"http://www.mvpdj.com/media/attachment/track/201907/20190723_8993094645d369a6fea902.mp3",
    name:"Beast Mode (Extended Mix)",
    singer:"Kura",
    imageUrl:"https://www.0dutv.com/upload/magic/172.jpg"
  },{
    dataUrl:"http://www.mvpdj.com/media/attachment/track/201910/20191001_4923325525d92e81e21e0c.mp3",
    name:"Feel So Unity Ciao Adios",
    singer:"Calvin Harris",
    imageUrl:"https://www.0dutv.com/upload/magic/256.jpg"
  }
];
Page({
  /**
   * 页面的初始数据
   */
  data: {
    songList:songList,
    //只有data里的数据才有wx:for
    groupName:items[0],
    playSongNum:0,
    listIsHidden:true,
    sheetItems:items,
    playing:false,
    bottomPlayer:{
      dataUrl:"",
      name:"",
      singer:"",
      imageUrl:""
    }
  },
  playSong:function(e){
    /*获取点击的歌曲*/ 
    var num=e.currentTarget.dataset.num;
    var res=this.data.songList[num];
    var that=this;
    this.setData({
      bottomPlayer:res,
      playing:true,
      playSongNum:num
    });
    /*播放*/
    wx.playBackgroundAudio({
      dataUrl:res.dataUrl,
      name:res.name,
      singer:res.singer,
      imageUrl:res.imageUrl,
      success:function(res){
        that.setData({
          playing:true
        })
      }
    })
  },
  pause:function(){
    var that=this;
    wx.pauseBackgroundAudio({
      success: (res) => {
        that.setData({
          playing:false
        });
      },
    })
  },
  sheetChange:function(){
    this.setData({
      listIsHidden:!this.data.listIsHidden.num
    });
  },
  showHiddenList:function(){
    this.setData({
      listIsHidden:!this.data.listIsHidden
    });
  },
})

wxss

.catalogText{
    font-size: 28rpx;
    line-height: 30rpx;
}
.photoList{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.photoItem{
    width: 280rpx;
    display: flex;
    flex-direction: column;   
    padding: 5rpx 0;
}
.musicImage{
    width: 280rpx;
    height: 280rpx;
    border-radius: 10rpx;
}
.musicName{
    font-size: 24rpx;
    line-height: 32rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 文本溢出时显示...overflow也要设置才有用 */
    overflow: hidden;
}.musicSinger{
    font-size:24rpx;
    line-height: 32rpx;
    color: rgb(159, 160, 163);
}
.groupSelector{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 10rpx 0;
}
.groupSelectorText{
    font-size: 28rpx;
}
.groupSelectorImage{
    width: 40rpx;
    height: 40rpx;
}
.player{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 200rpx;
    background-color: rgb(223, 223, 223);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.playerImageView{
    width: 75rpx;
    height: 75rpx;
    padding-left: 30rpx;
}
.playerImage{
    width: 100rpx;
    height: 100rpx;
    border-radius: 30rpx;
}
.playButton{
    width: 80rpx;
    height: 80rpx;
    padding-right: 30rpx;
}