前几天写了一个简易的音乐播放器,也收到了大家的一些反馈。最大的问题就是总是资源失效，针对这一点昨天我进行了一次重写，也把重构过程中的一些知识点和心得记录下来与大家一起分享。 没怎么写过文章，语句不通或者错误地方也请大家指出，我多多改正。项目地址
下面开始进入正题
现在已经有很多基于binaryify大佬的网易云API的web音乐播放器。界面都很美观体验也不错，但是在大家在使用时还是官方的。
写这个项目的初衷是因为突然想听周杰伦的歌了，然后去网上一搜，试听都要收费了，然后再油猴的市场里翻到了一个能免费听歌曲的在线工具，这段时间也比较喜欢用node，所以就在摸鱼时，用 puppeteer把周杰伦所有的歌曲地址都整理下来了，然后写成了一个简单的网页播放器。并且发了一个沸点，收到了大家很多的评论和点赞，github上面也出现了我人生中的第一次星星，同时也收到了很多反馈，其中最严重的是歌曲失效问题。
第一次解决失效问题
在查找失效原因时，发现了整理的歌曲地址中存在一个有时效性的key，应该就是为了防止我这种人做的处理。解决办法是，我写了一个定时任务，每隔三个小时重新去拉取一次列表。同时将GitHub的体验地址重定向到了我的博客中，使用的是我自己的服务器资源。我的服务器配置很低，3个小时也是为了节省一些资源。
但是，依然会出现间隔性失效的问题。
第二次解决失效问题
这次换了个思路，既然访问源地址有时效性，那么我就直接了当的把所有的歌曲都下载下来，一劳永逸。怎么下载呢，肯定不是手动，手动是没有灵魂的。然后还是node，使用了node 的 request模块。于是引出了小知识点，同时下载394个文件？肯定不行啊，于是手动实现了一个下载队列的函数，可以自定义同时下载多少个任务数。函数已经写好了，源码或者文章都有。
...
下载完之后又来了一个问题，我存哪里呢？放自己服务器，不可能的。于是选择了七牛云来做储存。get一个小知识点，文件上传七牛云。
至此，再也不用担心歌曲连接失效的问题了，除非唱片公司告我侵权，我给全部删了。。。
关于UI和功能新增的问题
这个项目非常简单，主要是node的知识运用。前端方面只有一个简单的html页面。UI也很难看。如果大家有兴趣可以自己来修改扩展。
一个小槽点
我的node代码里很多地方没有加 ; 大家不要学我，在写node的时候最好把;加上哈。尤其在require()后
第一次写这么多话，我的表达能力很差，如果看不懂我说的，可以移步GitHub直接查看源码。就说这么这么多了，溜了溜了。另外我这里招前端开发，1年经验起步。不要实习，坐标河北廊坊。我的微信在文章最后。
一个下载队列函数
前两天写的那个在线播放周杰伦所有歌曲的小项目，因为总是歌曲地址失效，所以准备把歌曲全部下载下来。放到七牛或者其他的云进行储存。
一共是394条数据，同时下载肯定不行的，所以自己手动写了一个下载的方法，只允许最多同时下载5首歌曲。最后封装成了一个通用的方法并且与大家一起交流分享。
/**
* 下载队列
* @param {Number} max @default 5 -最大并行下载数
* @param {Array} list -下载列表
*
* state not : 未下载; loading : 下载中; done : 下载完成
* */
function downloadQueue(list, max) {
for (let i of list) {
i.state = 'not'
}
// 是否下载完成
let allDone = false
const down = () => {
let noIndex = null
let notDownload = null
for (let i = 0; i < list.length; i++) {
const item = list[i]
if (item.state === 'not') {
notDownload = item
noIndex = i
break
}
}
if (!notDownload) {
console.log('全部下载完毕')
allDone = true
return
}
const downLoadings = list.filter(item => item.state === 'loading')
if (downLoadings.length >= max) {
return
}
notDownload.state = 'loading'
console.log(`下载第 ${noIndex} 个`)
down()
setTimeout(() => {
console.log(`下载第 ${noIndex} 个完成`)
console.log(`剩余 ${list.length} 个`)
list[noIndex].state = 'done'
if (allDone) {
return
}
down()
}, 300)
}
down()
}
