Gridea添加Aplayer音乐播放器

在head.ejs中添加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">

如图:

在footer.ejs中添加

<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>

如图:

相应的插入代码

 <!-- 吸底模式 默认播放表列隐藏 如需默认显示 删除 aplayer-narrow 即可 -->
 <div id="aplayer" class="aplayer aplayer-fixed aplayer-narrow" data-id="94700905" data-server=”netease" data-type="playlist" data-autoplay=”false” data-mode=”circulation”></div>
 <!-- 迷你模式 -->
 <div id="aplayer" class="aplayer aplayer-narrow" data-id="94700905" data-server=”netease" data-type="playlist" data-autoplay=”false” data-mode=”circulation”></div>
 <!-- 列表模式 -->
 <div id="aplayer" class="aplayer aplayer-withlrc aplayer-withlist" data-id="94700905" data-server=”netease" data-type="playlist" data-autoplay=”false” data-mode=”circulation”></div>

其中各参数的含义如下:

  • data-id: 歌曲/专辑/歌单对应的id
  • data-server: 音乐平台

    • netease(网易云音乐)
    • tecent(qq音乐)
    • xiami(虾米音乐)
    • kugou(酷狗音乐)
  • data-type:请求类型

    • song(单曲)
    • album(专辑)
    • playlist(歌单)
    • search(搜索)
  • data-mode: 播放模式

    • random(随机)
    • single(单曲)
    • circulation(列表循环)
    • order(列表)
  • data-autoplay: 自动播放

    • false
    • true

使用

此处以网易云为例,打开一首歌地址栏中会有相关信息:


在id和type处修改红圈内信息

在文章首端插入音乐

![](https://s2.ax1x.com/2019/09/28/uldxtf.png)
效果:
![](https://s2.ax1x.com/2019/09/28/ulB8fK.md.jpg)

参考:

[https://borber.cn/post/add-aplayer/#outline-heading-3](https://borber.cn/post/add-aplayer/#outline-heading-3)
[https://github.com/MoePlayer/APlayer](https://github.com/MoePlayer/APlayer)
Last modification:July 12th, 2020 at 01:16 am