记录小程序音乐上一首下一首

前言

目录: 这里我们的项目有musicListmusicPlay以上两个文件夹,存放音乐列表和音乐详情页

参数讲解: 代码都很简单,但是这儿有几个要讲的参数,正是上一首下一首的关键之所在

  • musicArr 缓存请求过来的音乐数据 类型:array
  • index 缓存当前音乐对应在musicObj里的索引,下一首需要根据这个索引来获取下一首音乐的id
  • song_id 要播放音乐的 id

musicList页面onload时发起 wx.request 来渲染音乐列表

//渲染音乐列表
 wx.request({
  url: requestUrl + '/api/Music/getCommentList?pagesize=10',
  success: function (res) {
    if(res.data.code === 200){
        //缓存请求过来的数据,备用
        wx.setStorageSync("musicArr", res.data.data)
      that.setData({
        recommendList: res.data.data
      })
    } else {
      wx.showToast({
        title: '加载失败',
        duration: 20000
      })
    }
    
}

当我们点击音乐时,需要跳到点击的音乐播放界面

 //跳转播放页面
  linkPlay:function(e){
    let songId = e.currentTarget.dataset.songid;
    let index = e.currentTarget.dataset.index
    wx.navigateTo({
      url: '../../play/index?songid=' + songId+'&index='+index,
    })
  }

音乐列表wxml

<block wx:for="{{recommendList}}" wx:key="{{item.song_id}}">
    <view class='common_list_wrap'>
      <view class="weui-cell__bd" bindtap='linkPlay' data-songId='{{item.song_id}}' data-index='{{index}}'>
        <view class='common_list_title'>{{item.title}}</view>
        <view class='common_list_small'>{{item.author}}</view>
      </view>
      <view class="common_list_right">
        <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
          <view class="picker">
            <image src='../../../image/other.png' class='common_list_img'></image>
          </view>
        </picker>
      </view>
    </view>
</block>

点击音乐列表其中的一首音乐进入音乐详情页onload

这里options是点击音乐传过来的值,既song_idindex

onLoad: function (options) {
    let that = this
    let songId = options.songid
    currentIndex = options.index
    mOBj = (wx.getStorageSync("musicArr"));
    that.fetchMusic(songId)
}

音乐详情音乐控件wxml

<view class='icon'>
  <image src='image/prev.png' bindtap='prevPlay'></image>
  <image src='{{playImg}}' bindtap='{{tabPlay}}' class='img2'></image>
  <image src='image/next.png'  bindtap='nextPlay'></image>
</view>

控件下一首对应的方法

 //下一首
  nextPlay: function () {
    let nextIndex =  currentIndex ++
    let nextSongId = mOBj[nextIndex].song_id
    this.fetchMusic(nextSongId)
  }

顺带把获取音乐的函数给封装了下

 //获取播放歌曲
  fetchMusic:function(songId){
      let that = this
      wx.request({
          url: requestUrl + '/api/Music/getPlay?songid=' + songId,
          success: function (res) {
              if (res.data.code === 200) {

                  that.setData({
                      songInfo: res.data.data
                  })
                  audioManager.title = res.data.data.title
                  audioManager.epname = res.data.data.title
                  audioManager.singer = res.data.data.author
                  audioManager.coverImgUrl = res.data.data.picture
                  audioManager.src = res.data.data.file_link
                  //获取歌词
                  wx.request({
                      url: requestUrl + '/api/Music/getSongWord?songid=' + songId,
                      success: function (res) {
                          if (res.data.code === 200) {
                              var lrc = res.data.data.content;
                          } else if (res.data.code === -1) {
                              var lrc = "无歌词";
                          }
                          that.setData({
                              Lyric: that.sliceNull(that.parseLyric(lrc))
                          })
                          console.log(that.data.Lyric)
                      }
                  })
                  //音乐播放进度更新事件
                  audioManager.onTimeUpdate(function () {
                      var currentTime = parseInt(audioManager.currentTime.toFixed(0))
                      var duration = parseInt(audioManager.duration.toFixed(0))
                      if (currentTime > duration) {
                          currentTime = duration
                      }
                      console.log(currentTime)
                      var startTime = that.timeToString(currentTime)
                      var totalTime = that.timeToString(duration)

                      if (that.data.Lyric) {
                          that.handleLyric(currentTime)
                      }
                      that.setData({
                          value: currentTime,
                          max: duration,
                          startTime: startTime,
                          totalTime: totalTime,
                      })
                  })

              }
          }
      });
  }
  

扫描二维码,在手机上阅读!