多平台音乐播放APlayer - 支持https

aplayer

已更新,音乐复活了

写在开始

之前因为搭建好这个站点后,音乐播放也是用aplayer试过,但是自从将站点全面https后,每次使用aplayer播放音乐,小绿锁就消失了,这点就很不好,于是就放弃了。但是最近看到一篇文章中成功的添加了https支持,果断在自己的小站上使用,确实很好用

开始

APlayer无疑是最好用的,不仅支持https,还支持众多主流音乐平台的音乐播放
需要引入下面两个js文件

  1. 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>
  2. 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

    致谢

坚持原创技术分享,您的支持将鼓励我继续创作!