前言

最近一直在找好的音乐播放器,原先是使用了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/[email protected]/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文件下载保存到你的站点下面。

右键另存为

更多设置

如果你想使用其他音源,或者添加更多设置呢,可以参考以下参数:2019-5-31-15-53-51.png
2019-5-31-15-54-26.png


没啥技术的程序员,每天只会生产bug