效果见左下角~

首先你需要一个网易云歌单

在网易云音乐上寻找你喜欢的歌曲,并且加入歌单(也可以是默认的我喜欢的歌曲),或者也可以找别人现成的歌单

客户端点击分享,复制链接(网页版直接点进歌单查看地址栏),得到这样的一个链接https://music.163.com/playlist?id=xxx,后面的id就是我们需要的歌单ID,把它记下来~
(不是userid,不要搞错了)

然后下载APlayer和MetingJS的程序

这两个程序都是开源的,可以在Github上找到:
APlayer: https://github.com/MoePlayer/APlayer
MetingJS: https://github.com/metowolf/MetingJS

我个人的习惯是全部下载到本地。因为第一之后很可能是需要自己改一些东西的,第二如果以后第三方源失效(停止服务或者因为各种原因无法访问),再全部更换掉也是一件有点麻烦的事情,不如一开始就都放在自己的网站里

下载完以后把文件分别放进自己网站主题的CSS和JS目录,然后在模板里引入对应的CSS和JS,并在</body>前添加HTML代码
(我使用的是1.2版本的MetingJS,因为我测试最新版貌似加载不出歌词。如果使用最新版,请不要照抄下面的代码

1
2
3
4
5
6
7
8
<div class="aplayer" 
data-id="xxx"
data-server="netease"
data-type="playlist"
data-fixed="true"
data-order="random"
preload="none">
</div>

data-id处填写你的歌单ID。我这里使用的设置是fixed模式(固定在左下角)、不预加载歌曲、默认随机播放

测试效果

自己去访问一下自己的页面,查看播放器是否会被页面上其他元素挡住。如果被挡住了,就需要修改APlayer CSS中的z-index为大于遮挡它的元素的值,让播放器在最上面

或者可以自己加一些其他效果,比如我添加了收起状态下自动隐藏播放器,只有鼠标移动到展开按钮时才完整展示,个人认为这样会好看一点。简单修改下CSS就可以做到:
找到

1
2
3
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
width: 66px!important
}

修改成

1
2
3
4
5
6
7
8
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
width: 66px!important;
left: -66px
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0
}

如果想默认隐藏歌词,可以看这里,有修改好的js可以直接下载使用
或者使用本站使用的版本,歌词会在第一次展开播放器时自动显示

最后检查一下播放、歌词显示等等是不是正常,没问题的话就大功告成了~