npm install --save hexo-tag-aplayer

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

{% aplayer "Shape of You" "Ed Sheeran""http://music.163.com/song/media/outer/url?id=447925558.mp3" %}

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00] 歌词内容
...
{% endaplayerlrc %}

{% aplayerlist %}
{
    "narrow": false,                          // （可选）播放器袖珍风格
    "autoplay": true,                         // （可选) 自动播放，移动端浏览器暂时不支持此功能
    "mode": "random",                         // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 3,                             // （可选）歌词显示配置项，可选项有：1,2,3
    "mutex": true,                            // （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
    "theme": "#e6d0b2",	                      // （可选）播放器风格色彩设置，默认：#b7daff
    "preload": "metadata",                    // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",                 // (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

aplayer:
  script: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
  style: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css
  meting: true
  asset_inject: false

<!-- 简单示例 -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

<!-- 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/meting@2/dist/Meting.min.js"></script>

<meting-js
    server="netease"
    type="playlist"
    id="3779629">
</meting-js>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    <style>
      #aplayer-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 999;
      }

      #aplayer-button {
      width: 50px;
      height: 50px;
      background-image: linear-gradient(135deg, #6e8efb, #a777e3);
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      }

      #aplayer-button:hover {
      background-image: linear-gradient(135deg, #a777e3, #6e8efb);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      }

      #aplayer-button i {
      color: white;
      font-size: 20px; /* 调整图标大小 */
      }

      #aplayer-panel {
      display: none;
      position: absolute;
      top: 60px;
      right: 0;
      width: 300px;
      overflow-y: auto; /* 添加滚动条 */
      max-height: 400px; /* 限制最大高度，并显示滚动条 */
      background-color: #fff; /* 面板背景颜色 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 面板阴影 */
      border-radius: 10px; /* 面板边角圆滑 */
      }

      /* 自定义滚动条样式 */
      #aplayer-panel::-webkit-scrollbar {
      width: 5px;
      }

      #aplayer-panel::-webkit-scrollbar-thumb {
      background: #a777e3;
      border-radius: 10px;
      }

      #aplayer-panel::-webkit-scrollbar-track {
      background: #f0f0f0;
      }
    </style>

    <div id="aplayer-container">
      <div id="aplayer-button">
        <i class="fas fa-music"></i> <!-- 使用 Font Awesome 图标 -->
      </div>
      <div id="aplayer-panel">
        <meting-js server="netease" type="playlist" id="3778678"></meting-js>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
      const button = document.getElementById('aplayer-button');
      const panel = document.getElementById('aplayer-panel');
      button.addEventListener('click', function() {
      if (panel.style.display === 'none') {
      panel.style.display = 'block';
      } else {
      panel.style.display = 'none';
      }
      });
      });
    </script>

<!-- 网易云音乐歌单 -->
<meting-js
    server="netease"
    type="playlist"
    id="歌单ID"
    fixed="true">
</meting-js>

<!-- QQ音乐歌单 -->
<meting-js
    server="tencent"
    type="playlist"
    id="歌单ID"
    fixed="true">
</meting-js>

<!-- 酷狗音乐歌单 -->
<meting-js
    server="kugou"
    type="playlist"
    id="歌单ID"
    fixed="true">
</meting-js>

<!-- 酷我音乐歌单 -->
<meting-js
    server="kuwo"
    type="playlist"
    id="歌单ID"
    fixed="true">
</meting-js>

<!-- 喜马拉雅FM电台 -->
<meting-js
    server="ximalaya"
    type="program"
    id="电台ID"
    fixed="true">
</meting-js>

<!-- Bilibili音乐视频 -->
<meting-js
    server="bilibili"
    type="song"
    id="视频ID"
    fixed="true">
</meting-js>

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=28815250&auto=0&height=66">
</iframe>

npm install

<link rel="stylesheet" href="/dist/APlayer.min.css">
<script src="/dist/APlayer.min.js"></script>

<div data-id="496298744" data-server="netease" data-type="song"></div>

<script src="/dist/Meting.min.js"></script>