最近周董又出新歌，刮起了一陣“龍卷風(fēng)”，不得不說(shuō)周董還是厲害。也不知道是自己老了接收新鮮事物的能力弱了還是什么，老想聽(tīng)聽(tīng)周董的老歌。什么愛(ài)在西元前，七里香，以父之名... 可打開(kāi)網(wǎng)易云，我真的網(wǎng)抑云了。5級(jí)大會(huì)員聽(tīng)個(gè)周杰倫都不行，難道還要下載個(gè)QQ音樂(lè)，再充個(gè)會(huì)員？-_-|| 我說(shuō)漏！
用小程序?qū)憘€(gè)播放器，加上他免費(fèi)的云服務(wù)，不就解決了嗎？
開(kāi)始搞！

找歌

這是最關(guān)鍵的一步，對(duì)于我們這些老司機(jī)來(lái)說(shuō)愛(ài)情動(dòng)作片都找的到，還找不到周董的歌嗎？某磁場(chǎng)不用翻墻還一大堆的資源。

某磁場(chǎng)

云服務(wù)

點(diǎn)擊云開(kāi)發(fā)

上傳

數(shù)據(jù)建表

其中的字段albumIcon 存放專輯圖片，albumName存放專輯名稱，indexNum存放其專輯順序，比如JAY這張專輯是周董的第一張專輯所以我寫(xiě)了個(gè)1。musicDic存放專輯的詳細(xì)內(nèi)容，包括單曲名稱和MP3存放在云盤(pán)中的地址。

專輯頁(yè)面

這個(gè)其實(shí)也沒(méi)什么好說(shuō)的自己按自己喜歡的風(fēng)格來(lái)編寫(xiě)，怎么方便怎么來(lái)。不過(guò)UI設(shè)計(jì)好一些自己用著也順手些嘛。專輯的數(shù)據(jù)就是從云服務(wù)器上獲取來(lái)的

//創(chuàng)建數(shù)據(jù)庫(kù)
    const db = wx.cloud.database()
    const albumListDB = db.collection('album')
    var that = this
    albumListDB.get({
      success: function (res) {
//處理獲取的數(shù)據(jù)
    }
    })

提供一個(gè)參考

專輯

專輯列表

播放器

由于我們聽(tīng)歌大多數(shù)時(shí)候是在后臺(tái)播放的所以我們選擇微信小程序中的背景音頻BackgroundAudioManager

// 聲明為一個(gè)全局的常量
const backgroundAudioManager = wx.getBackgroundAudioManager()
onLoad: function (options) {
        backgroundAudioManager.title = 專輯名
        backgroundAudioManager.epname = 專輯名
        backgroundAudioManager.singer = '周杰倫'
        backgroundAudioManager.coverImgUrl = 專輯圖片地址
        backgroundAudioManager.src = 專輯歌曲資源地址
}
backgroundAudioManager.onPlay(() => {
        //處理一下播放時(shí)間
        var duration = backgroundAudioManager.duration;
        var min = parseInt(duration / 60);
        var sec = parseInt(duration % 60);
        //不滿兩位補(bǔ)全兩位
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        var timeStr = min+':'+sec
        //進(jìn)行UI渲染
        that.setData({
            playing:true,
            musicTime:timeStr
         })
})
    //暫停
    backgroundAudioManager.onPause(() =>{
      that.setData({
        playing:false
      })
    })
    //錯(cuò)誤
    backgroundAudioManager.onError((res) => {
      that.setData({
        playing:false
      })
    })
    //緩沖中
    backgroundAudioManager.onWaiting((res) =>{
      wx.showToast({
        title: '數(shù)據(jù)加載中......',
        icon:'none'
      })
    })
    //播放完畢
    backgroundAudioManager.onEnded((res) =>{
        that.playNext()
    })
    //iOS 上點(diǎn)擊下一曲
    backgroundAudioManager.onNext((res) => {
        that.playNext()
    })
    //iOS 上點(diǎn)擊上一曲
    backgroundAudioManager.onPrev((res) => {
        that.playPrev()
    })
    // 時(shí)間更新
    backgroundAudioManager.onTimeUpdate((res) =>{
      var duration = backgroundAudioManager.currentTime;
      var min = parseInt(duration / 60);
      var sec = parseInt(duration % 60);
      if (min.toString().length == 1) {
        min = `0${min}`;
      }
      if (sec.toString().length == 1) {
        sec = `0${sec}`;
      }
      var timeStr = min+':'+sec
      var value = backgroundAudioManager.currentTime/backgroundAudioManager.duration * 100
      // console.log(value)
      that.setData({
        currentTime:timeStr,
        timeValue:value
      })
    })
}
// 進(jìn)度跳轉(zhuǎn)
seekAct(e){
    var timeSeek = e.detail.value/100.0
    backgroundAudioManager.seek(timeSeek * backgroundAudioManager.duration)
  },
//播放暫停
playPause(){
    var that = this
    var object = that.data
    if (object.playing) {
      backgroundAudioManager.pause()
    }else{
      backgroundAudioManager.play()
    }
  },

提供一個(gè)UI參考

播放界面

播放界面

后臺(tái)播放界面