微信小程序练手项目-音乐播放器
该项目只适合练手，大佬请绕道
项目展示图：
项目介绍
微信小程序音乐播放器
页面： 音乐推荐、播放器、播放列表
功能： 播放、暂停、上一首、下一首、跳转播放列表、实时进度条
未实现功能： 实时歌词、私人FM、每日歌曲推荐、云音乐新歌榜
歌曲文件和图片由本地服务器存储
项目链接
项目详解
启动服务端
- 打开服务器文件夹
- 在文件夹下打开Git Bash Here
- 输入
node index.js
需先安装NodeJs和Git，自行百度下载安装
启动项目
- 将项目导入到微信开发者工具
- 选择测试号
- 即可启动项目
部分功能讲解
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()
总结
该项目主要只讲解了各个方法的具体实现功能和思路，前端不是太精通就不丢人现眼了
文章在未经同意前禁止转载
本文中的项目也只能用于学习