Aplayer&&Metingjs

关于Aplayer和Metingjs,折腾了一天也没折腾出自己想要的样子,单用Aplayer需要引用外链歌曲的方法需要解决https访问请求http资源的问题。当然把自己的协议换成http也可以实现,但是不想更换。
Aplayer添加歌单非常的麻烦。而Metingjs官方文档中主要针对于把播放器放在博客文章中。但是我就想把它放在任意位置。我放的是左下角,不影响其它内容又方便也是开发者默认的位置之一
所以我查了很多文档和别的博主的博客,大部分没有我需要的内容,思前想后方法这样。
首先下载 Aplayer,然后打开这个 Metingjs 复制所有代码到新建一个名为"Meting.min.js"的js文件中,把这个js文件放到你主题下的js文件中,当然dist路径也可,相应下面路径就用你的路径,下载后解压aplayer压缩包,复制Aplayer中的dist目录到你主题下的source文件夹中。
然后在你博客页面布局中body中添加
<link rel="stylesheet" href="/dist/APlayer.min.css">
<script type="text/javascript" src="/js/Meting.min.js"></script>  //这里我放在js路径下
<div class="aplayer" data-id="歌单id" data-server="netease" data-type="playlist" data-mode="fixed"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
然后还没完,这里如果就打开的网页的话,会占一大框。先上它两的官方开发文档 Aplayer开发文档 和 Metingjs ,这里面你可以仔细看看。
我设置的播放器风格是fixed吸附形的对应有默认的还有一个mini的。
这时打开js中的“Meting.min.js”文件,打开是密密麻麻的代码,不要急你可以用VS code按CTR+F然后输入fixed你可以看见,它官方默认的是null值,改为true即可;前面便是mini形,相应你可以设置,其它地方的代码包括播放器器大小颜色,歌词等都可以通过浏览器运行后,按F12结合播放器的CSS和JS进行修改。这里大力推荐浏览器使用火狐开发者版本和谷歌开发者版本,功能强大。
点赞