静态博客网页中的网易云音乐播放器

见我的博客 https://blog.wyue.site/2020/04/12/1/

转载前请联系我，联系方式请见我博客 https://blog.wyue.site/

一直想做个博客中的音乐播放器，之前做的那个版本因为啥懂不懂就瞎写的，性能太差，搞不好就把网页搞卡死了。 最近重新修改了一下，新版本就流畅很多了。 纯前端实现，可以用在各种静态博客中，比如hexo，hugo等。

可以先体验一下, 点这里哦

大概思路

主要是用到APlayer这个组件，自己写的部分主要在于网易云音乐的部分。

简而言之就是利用网易云音乐的api，通过网易云音乐的歌单id，获取音乐的url地址，歌词，歌名，歌手信息等。

网易云音乐api

关于网易云音乐的api，如果不滥用的话，可以用我搭在heroku上的这个

https://y-cloud-music-api.herokuapp.com/

api网址就是这个，想要看接口细节的话，可以通过点开链接看文档，也可以看我的代码实现的例子。

代码

首先上代码，代码在这里

https://gist.github.com/xfdywy/57b61f13a1a4e48d69c611bdbff407d2

自己copy下来到一个文件里面去， 搞一个http server， 然后用类似 http://localhost:端口号 就可以跑起来看效果了。 比如你用vscode，可以右击用 open with live server，又或者你用webstorm，直接点“浏览器打开”应该就可以。

如果你直接点开html文件，可能会遇到问题，因为你是file：//协议打开的，需要是http：//协议（我猜的我不懂）。

分析

大概分这么几步

1. 先写个网页ui
2. 引用APlayer模块
3. 跟网易云音乐api交互，获得歌曲信息
4. 把歌曲信息传给APlayer进行播放。

新版本修改了逻辑，我先获取第一首歌的信息，然后传给播放器播放，之后再去获取剩下的，并且所有api的交互都是用axio进行异步操作，保证网页的流畅性，可以一边播放一边获取剩下的歌的信息，这样就不会出现网页等好久都刷不出来的情况了。等第一首歌放到一半，后面的肯定也都加载出来了，完美~

网页ui

我写的巨丑。。。。哪位大佬给改改，帮我改改吧。
其实就是一个输入框，一个提交按钮，一个播放器占位符,
gist代码的27行以上。

APlayer 模块

根据APlayer的文档，new一个对象就好了，在gits文件的第200行。

文档在这里：

https://aplayer.js.org/#/zh-Hans/

需要传几个参数，比如

var ap = new APlayer({
    container: document.getElementById('player1'),
    lrcType: 1,
    fixed: false,
    audio: first_song,
        });

container是之前html代码预留的div
lrcType是歌词的类型，我这里选1，具体可以看文档
fixed: 是否开启吸底模式,
audio: 参数是一个 array，每个元素是一个对象，每个对象需要的属性下面来说。

歌曲信息

主要是歌曲的url地址，为了美观还需要歌词，封面等，需要通过api获取。

 var input = document.getElementById("subdiv2");

首先获取输入框的歌单id

 var playlist =   downloadplaylist(input.textContent);
 playlist = await playlist; 
  

然后获取歌单中所有歌曲的id

 var first_song = await  loadplaylist([playlist[0]]) ; 

先获取第一首歌的信息，之后传给播放器，开始播放。

var rest_songs =  await  loadplaylist(playlist.slice(1)) ;

ap.list.add(rest_songs);

之后再同步获取剩下的歌曲信息，并且加到播放器中去。

我代码的逻辑是：

downloadplaylist 函数输入为网易云音乐的歌单id，返回值为歌单中所有歌曲的id。

loadplaylist 函数的输入为所有歌曲的id，输出为上面说到的audio需要的 array

gist代码 160-173行是调用其他几个小函数与api进行交互，分别获取信息

这里注意我们143到152行提出get请求后，这些请求是以async的方式同时请求出去的，互相不阻塞。 直到所有的get请求都发出去了，我们再利用await的方法把结果都拿到（154-156行）， 这样性能会比较好。

178-185行是把其中一首歌的信息封装到一个对象里面去，tmp。 然后把tmp放到 res这个array里面去， 不断循环这段代码就可以把歌单里面所有歌曲的信息都封装好了。

总结

主要是学习了axio的使用，以及async 和await的使用。
此外82到93行简单试验了一下addEventListener的用法。

作为一个外行，如果有更好的想法，欢迎与我交流，可以在博文下面留言，也可以去博客的留言板 留言。

我博客音乐的网址： https://blog.wyue.site/music

APlayer 网址： https://aplayer.js.org/#/

axio 网址：http://axios-js.com/

.