Wechat applet learning notes (VIII) music player (playlist)

The playlist defaults to the first song. Click the recommended songs to add songs to the playlist for playing. When adding songs to the list, if the user clicks the same song, it will not be added to the list, but will play directly. Therefore, when adding songs to the list, you need to first determine whether the songs are in the list. This is judged by adding id to each song.

1, musicdemo.js

First, you need to add a list in the data of musicdemo.js to store the songs added by users. The code is as follows:

data: {
    /**List of songs */
    musicList:[
      {
        id: 0,
        musicName: "Plum blossom and three flowers",
        musicImage: "/img/list_1.jpg",
        singerName: "Jiang Yuheng",
        musicSrc: "/music/Plum blossom and three flowers.mp3"
      }
    ],
    /**Recommended songs */


/**Playing song information */
    currentPlayMusic: {
      id: 0,
      musicName: "Plum blossom and three flowers",
      musicImage: "/img/list_1.jpg",
      singerName: "Jiang Yuheng",
      musicSrc: "/music/Plum blossom and three flowers.mp3"
    },

2, musicdemo.wxml

In order to recommend each song in the song to be bound with click event, all information of the song needs to be passed to the program in the event, and the code is as follows:

<!--Recommended songs-->
      <view class="hot-music">
        <view class="hot-music-title">Recommended songs</view>
          <scroll-view class="hot-music-content" scroll-y="true">
            <view class="hot-music-info" wx:for="{{hotMusics}}" wx:key="index" bindtap="hotMusicClick" data-id="{{item.id}}">
              <image src="{{item.musicImage}}"/>
              <view>{{item.musicName}}</view>
            </view>
          </scroll-view>
        </view>

The data id is a custom attribute, which is used to pass the song id to the back-end program

3, musicdemo.js

When adding a song to the list, first determine whether there is a song in the list. If there is a song, it will not be added, but will be played directly. If it does not exist, add it and play it again.

/**Recommended song Click function -- switch music */
  hotMusicClick: function (e) {
    var mid=e.currentTarget.dataset.id;//Get the id value of the click song
    var playMusic;
    var mList=this.data.musicList;
    //Get the hit song first
    this.data.hotMusics.forEach(item => {
      if (item.id == mid){
        playMusic=item;
      }
    })
    //Determine if the song exists in the list
    var isExit=true;//Let's first assume that the song doesn't exist
    this.data.musicList.forEach(item=>{
      if(item.id==mid){
        isExit=false;
      }
    })
    if(isExit){
      mList.push(playMusic)//Add click songs to the list
    }
    this.setData({
      currentPlayMusic: playMusic,
      currentid:playMusic.id,
      musicList:mList
    })
    this.data.musicCtx.src = this.data.currentPlayMusic.musicSrc
  },

4, Playlist interface in musicdemo.wxml

<!--Song list interface-->
    <view class="music-list-page" hidden="{{tab!=2}}">
      <block wx:for="{{musicList}}" wx:key="index">
        <view>
          <view class="music-title">{{index+1}}   {{item.musicName}}</view>
        </view>
      </block>
    </view>

At this time, if the song is playing, it needs to be displayed in red, and a playing song will be displayed after it. Method, in the js file data, set a data current to record the id of the song being played. If the id at this time is the same as the id in the list, it will be displayed as being played.

data: {
    /**id of the currently playing song */
    currentid:0,
    /**List of songs */

<!--Song list interface-->
    <view class="music-list-page" hidden="{{tab!=2}}">
      <block wx:for="{{musicList}}" wx:key="index">
        <view>
          <view class="music-title">{{index+1}}   {{item.musicName}}</view>
          <view class="music-isplay" hidden="{{currentid!=item.id}}">Playing now</view
        </view>
      </block>
    </view>

Its style file is as follows:

/*Playlist*/
.music-list-page{
  padding: 4px;
  height: 80vh;
  font-size: 30rpx;
}
.music-title{
  display: inline-block;
  width: 45vw;
}
.music-isplay{
  display: inline-block;
  width: 45vw;
  text-align: right;
  color: red;
}

Modify the musicdemo.js file, and set current when clicking the recommended song

/**Recommended song Click function -- switch music */
  hotMusicClick: function (e) {
    var mid=e.currentTarget.dataset.id;//Get the id value of the click song
    var playMusic;
    var mList=this.data.musicList;
    //Get the hit song first
    this.data.hotMusics.forEach(item => {
      if (item.id == mid){
        playMusic=item;
      }
    })
    //Determine if the song exists in the list
    var isExit=true;//Let's first assume that the song doesn't exist
    this.data.musicList.forEach(item=>{
      if(item.id==mid){
        isExit=false;
      }
    })
    if(isExit){
      mList.push(playMusic)//Add click songs to the list
    }
    this.setData({
      currentPlayMusic: playMusic,
      currentid:playMusic.id,
      musicList:mList
    })
    this.data.musicCtx.src = this.data.currentPlayMusic.musicSrc
    console.log(playMusic.id+"  "+this.data.currentid);
  },

5, Handling list click events

When you click a song in the list, you need to play the corresponding song. In musicdemo.wxml, modify the following code:

<!--Song list interface-->
    <view class="music-list-page" hidden="{{tab!=2}}">
      <block wx:for="{{musicList}}" wx:key="index">
        <view bindtap="playListItem" data-id="{{item.id}}">
          <view class="music-title">{{index+1}}   {{item.musicName}}</view>
          <view class="music-isplay" hidden="{{currentid!=item.id}}">Playing now</view>
        </view>
      </block>
    </view>

Add the following code to musicdemo.js:

/**Click the song function in the playlist */
  playListItem:function(e){
    console.log(e)
    var id=e.currentTarget.dataset.id;//Get the clicked song id
    var playMusic;
    this.data.musicList.forEach(item=>{
      if(item.id==id){
        playMusic=item;//Get click song object
      }
    })
    //Set the currently playing song and the id of the playing song
    this.setData({
      currentPlayMusic:playMusic,
      currentid:playMusic.id,
    })
    this.data.musicCtx.src = this.data.currentPlayMusic.musicSrc
  },

So far, the playlist function is basically completed. After the song is played, it will not automatically switch to the next song. How to realize the function of the previous song and the next song,