已更新,音乐复活了
写在开始
之前因为搭建好这个站点后,音乐播放也是用aplayer试过,但是自从将站点全面https后,每次使用aplayer播放音乐,小绿锁就消失了,这点就很不好,于是就放弃了。但是最近看到一篇文章中成功的添加了https支持,果断在自己的小站上使用,确实很好用
开始
APlayer无疑是最好用的,不仅支持https,还支持众多主流音乐平台的音乐播放
需要引入下面两个js文件
APlayer.min.js & APlayer.min.css
1
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>Meting.min.js
1
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>
将上面的的两行代码顺序引进自己的网站就可以使用了,例如我是放在/next/layout/_custom/header.swig
文件中的
使用
在需要使用音乐的地方插入一下代码即可使用1
<div class="aplayer" data-id="29732992" data-server="netease" data-type="song" data-autoplay="true"></div>
效果如下
其中参数如下, 加粗表示必须填写
- data-id: 歌曲/专辑/歌单ID
- data-server: 音乐平台,支持以下参数
- netease(网易云音乐)
- tencent(qq音乐)
- xiami(虾米音乐)
- kugou(酷狗音乐)
- baidu(百度音乐)
- data-type: 请求类型,有以下参数
- song(单曲)
- album(专辑)
- playlist(歌单)
- search(搜索)
- data-mode: 播放模式
- random(随机)
- single(单曲)
- circulation(列表循环)
- order(列表)
data-autoplay: 自动播放
- false
- true
更多参数详见APlayer
致谢