微信小程序练手项目-音乐播放器

微信小程序练手项目-音乐播放器

该项目只适合练手，大佬请绕道

项目展示图：

项目介绍

微信小程序音乐播放器
页面： 音乐推荐、播放器、播放列表
功能： 播放、暂停、上一首、下一首、跳转播放列表、实时进度条
未实现功能： 实时歌词、私人FM、每日歌曲推荐、云音乐新歌榜
歌曲文件和图片由本地服务器存储

项目链接

gitee码云链接

项目详解

启动服务端

1. 打开服务器文件夹
2. 在文件夹下打开Git Bash Here
3. 输入 node index.js

需先安装NodeJs和Git，自行百度下载安装

启动项目

1. 将项目导入到微信开发者工具
2. 选择测试号
3. 即可启动项目

部分功能讲解

index.js

data: {
  item: 0,
  tab: 0,
  // 播放列表数据
  playlist: [{
    id: 1,
    title: '战争',
    singer: '陈冠希',
    src: 'http://192.168.1.102:3000/1.mp3',
    coverImgUrl: 'http://192.168.1.102:3000/images/战争.png'
  }, {
    id: 2,
    title: '盛夏光年',
    singer: '邓紫棋&五月天',
    src: 'http://192.168.1.102:3000/2.mp3',
    coverImgUrl: 'http://192.168.1.102:3000/images/邓紫棋.jpg'
  }, {
    id: 3,
    title: '违背的青春',
    singer: '薛之谦&汪苏泷',
    src: 'http://192.168.1.102:3000/3.mp3',
    coverImgUrl: 'http://192.168.1.102:3000/images/怪咖.png'
  }, {
    id: 4,
    title: '你给我听好',
    singer: '陈奕迅',
    src: 'http://192.168.1.102:3000/4.mp3',
    coverImgUrl: 'http://192.168.1.102:3000/images/你给我听好.jpg'
  }],
  state: 'paused',
  playIndex: 0,
  play: {
    currentTime: '00:00',
    duration: '00:00',
    percent: 0,
    title: '',
    singer: '',
    coverImgUrl: 'http://192.168.1.102:3000/images/cover.jpg',
  }
}

首先是将歌曲和歌曲图片存入playlist

需要将192.168.1.102更换成自己本地ip
查看IP方法：
打开 CMD 后输入ipconfig查看自己的IP地址，才能在手机预览的时候访问到服务器

state: 'paused' 播放器页面默认暂停状态

实现播放器的播放功能

// 实现播放器播放功能
  audioCtx: null,
  onReady: function() {
    this.audioCtx = wx.createInnerAudioContext()
    // 默认选择第1曲
    this.setMusic(0)
    var that = this
    // 播放进度检测
    this.audioCtx.onError(function() {
      console.log('播放失败：' + that.audioCtx.src)
    })
    // 播放完成自动换下一曲
    this.audioCtx.onEnded(function() {
      that.next()
    })
    // 自动更新播放进度
    this.audioCtx.onPlay(function() {})
    this.audioCtx.onTimeUpdate(function() {
      that.setData({
        'play.duration': formatTime(that.audioCtx.duration),
        'play.currentTime': formatTime(that.audioCtx.currentTime),
        'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
      })
    })
    // 格式化时间
    function formatTime(time) {
      var minute = Math.floor(time / 60) % 60;
      var second = Math.floor(time) % 60
      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  }

初始化设置：this.setMusic设置默认从playlist中选择第一首歌开始

使用audioCtx中的方法去判断播放进度从而辅助实现自动切换下一首歌

自动更新播放进度

通过格式化时间formatTime()方法去控制时间的显示，在通过audioCtx中的onTimeUpdate方法实现自动更新播放进度。

播放按钮

 // 播放按钮
  play: function() {
    this.audioCtx.play()
    this.setData({
      state: 'running'
    })
  }

调用audioCtx的play方法实现播放功能
再将 state 设置为 running

在按钮那里调用该函数实现点击按钮播放

暂停按钮

调用audioCtx的pause方法实现播放功能
再将 state 设置为 paused

在按钮那里调用该函数实现点击按钮播放

切歌

  // 上一曲按钮
  infer: function() {
    var index = this.data.playIndex == 0 ? this.data.playlist.length - 1 : this.data.playIndex - 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },
  // 下一曲按钮
  next: function() {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

这里判断时所用到的是三元运算符
顺便科普一下刚入门的小白
语法为：条件表达式?表达式1:表达式2。
先判断条件，如果为真执行表达式1，反之执行表达式2
其实很像我们平时的说话的语法
疑问句？陈述句1：陈述句2
只要理解了这个之后对一会要讲的内容就没什么难度了

切歌主要是判断当前的歌曲在列表中的位置

点击下一首按钮

• 如果当前的playIndex大于等于playlist的长度-1，意味着这首歌是列表中最后一首歌，要实现循环播放就需要将index赋值为0回到第一首歌
• 如果是小于playlist的长度-1，就将playIndex + 1即可

解释一下为什么要playlist.length-1，因为数组的下标是从0开始的，所以下标是从0-3，但是长度为4，于是要判断是否下标为3（最后一首）就需要减去1

了解了下一首按钮的原理，那么理解上一首也就没那么困难了
点击上一首按钮

• 如果当前的playIndex等于0，意味着这首歌是列表中第一首歌，要实现循环播放就需要将index赋值为playlist的长度-1跳到最后一首歌
• 如果是不等于0，就将playIndex - 1即可

上一首不同于下一首的思路，但是也异曲同工，下一首是不断地加1，上一首则是不断地减1，当到达临界值时，就需要去判断，然后执行不同的操作

滚动条调节歌曲进度

  // 滚动条调节歌曲进度
  sliderChange: function(e) {
    var second = e.detail.value * this.audioCtx.duration / 100
    this.audioCtx.seek(second)
  },

没什么难度，先判断你把进度条拉到哪个位置计算出一个second进行存储，然后通过seek() 方法去调整到对应的歌曲进度进行播放。

播放列表换曲功能

  // 播放列表换曲功能
  change: function(e) {
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  }

通过获取你点击的歌曲所对应的index去setMusic() 然后再调用play()

总结

该项目主要只讲解了各个方法的具体实现功能和思路，前端不是太精通就不丢人现眼了

---

文章在未经同意前禁止转载
本文中的项目也只能用于学习