小程序-写个专属音乐播放器给自己

最近周董又出新歌，刮起了一阵“龙卷风”，不得不说周董还是厉害。也不知道是自己老了接收新鲜事物的能力弱了还是什么，老想听听周董的老歌。什么爱在西元前，七里香，以父之名... 可打开网易云，我真的网抑云了。5级大会员听个周杰伦都不行，难道还要下载个QQ音乐，再充个会员？-_-|| 我说漏！
用小程序写个播放器，加上他免费的云服务，不就解决了吗？
开始搞！

找歌

这是最关键的一步，对于我们这些老司机来说爱情动作片都找的到，还找不到周董的歌吗？某磁场不用翻墙还一大堆的资源。

某磁场

云服务

下载好了资源需要上传到微信小程序的云服务器上（创建项目的时候需要勾选上云服务）

点击云开发

进入后点击选择到存储选项，创建两个文件夹一个叫music存放音乐一个叫images存放专辑封面，将自己下载的音乐资源和图片上传到云服务器上。注意上传的音乐和图片文件最好用英文命名避免中文转换的时候带来不必要的麻烦。

上传

上传好资源后我们开始创建数据库，建一张表存放专辑的信息。
这里提供一些参考

数据建表

其中的字段albumIcon 存放专辑图片，albumName存放专辑名称，indexNum存放其专辑顺序，比如JAY这张专辑是周董的第一张专辑所以我写了个1。musicDic存放专辑的详细内容，包括单曲名称和MP3存放在云盘中的地址。

专辑页面

这个其实也没什么好说的自己按自己喜欢的风格来编写，怎么方便怎么来。不过UI设计好一些自己用着也顺手些嘛。专辑的数据就是从云服务器上获取来的

//创建数据库
    const db = wx.cloud.database()
    const albumListDB = db.collection('album')
    var that = this
    albumListDB.get({
      success: function (res) {
//处理获取的数据
    }
    })

提供一个参考

专辑

专辑列表

播放器

由于我们听歌大多数时候是在后台播放的所以我们选择微信小程序中的背景音频BackgroundAudioManager

// 声明为一个全局的常量
const backgroundAudioManager = wx.getBackgroundAudioManager()
onLoad: function (options) {
        backgroundAudioManager.title = 专辑名
        backgroundAudioManager.epname = 专辑名
        backgroundAudioManager.singer = '周杰伦'
        backgroundAudioManager.coverImgUrl = 专辑图片地址
        backgroundAudioManager.src = 专辑歌曲资源地址
}
backgroundAudioManager.onPlay(() => {
        //处理一下播放时间
        var duration = backgroundAudioManager.duration;
        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
        //进行UI渲染
        that.setData({
            playing:true,
            musicTime:timeStr
         })
})
    //暂停
    backgroundAudioManager.onPause(() =>{
      that.setData({
        playing:false
      })
    })
    //错误
    backgroundAudioManager.onError((res) => {
      that.setData({
        playing:false
      })
    })
    //缓冲中
    backgroundAudioManager.onWaiting((res) =>{
      wx.showToast({
        title: '数据加载中......',
        icon:'none'
      })
    })
    //播放完毕
    backgroundAudioManager.onEnded((res) =>{
        that.playNext()
    })
    //iOS 上点击下一曲
    backgroundAudioManager.onNext((res) => {
        that.playNext()
    })
    //iOS 上点击上一曲
    backgroundAudioManager.onPrev((res) => {
        that.playPrev()
    })
    // 时间更新
    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
      })
    })
}
// 进度跳转
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()
    }
  },

提供一个UI参考

播放界面

播放界面

后台播放界面

这样妈妈再也不用担心我找不到歌听了，而且小伙伴们还可以将自己的女朋友添加为开发者这样不就是你们两个人的专属播放器了。缺点就是歌曲更新全靠自己手动录入Demo