前言
最近一直在找好的音乐播放器,原先是使用了WordPress插件实现,效果不太理想,布局丑就不说了,关键是不支持全站播放,一刷新界面就重置了,用户体验非常差,在经过有一段时间寻找以后终于找到了现在用的这款——大名鼎鼎的Aplayer。
这个播放器可能有的人用过,功能很强大,但是需要复杂的配置,使用起来不是那么的容易上手,但是胜在功能十分强大,后来 metowolf 开源了metingJS ,于是两者发生了奇妙的化学反应。
介绍
通过简单地配置,你就可以在网站上展示你喜爱的歌单或专辑。我的网站一样使用的是网易云的歌单,需要注意的是,一些需要会员版权的音乐,可能无法播放喔。
使用方法
使用方法也很简单,在全局的页脚文件的body末尾中加上:
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
首先要引用 JS 文件,然后添加如下标签:
<meting-js
mini="true"
fixed="true"
server="netease"
type="playlist"
id="395671107"> <!--网易云歌单id-->
</meting-js>
提示:
使用此配置,在打开页面的时候歌词会默认显示在页面底部,如果你不想让他默认显示歌词,这个时候就需要修改APlayer.min.js了,然后将修改之后的JS存放到你的站点下,重新引用。你也可以直接将我修改过的js文件下载保存到你的站点下面。
更多设置
如果你想使用其他音源,或者添加更多设置呢,可以参考以下参数:
Comments | NOTHING