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

(终于填了之前的坑)

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

需要传几个参数,比如

1
2
3
4
5
6
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获取。

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

首先获取输入框的歌单id

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

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

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

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

1
2
3
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的用法。

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

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

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

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

.