在博客的前端页面插入以下代码

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="2312165875" fixed="true"></meting-js>

一、Aplayer

Aplayer，是一个开源的播放器。
其中文官方https://aplayer.js.org/#/zh-Hans/

下面简单说明插入代码的作用

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>

第一行是加载 css 样式，播放器的皮肤。
第二行是加载 hls.js 文件。
第三行是APlayer。
第四行是根据封面自适应主题色。

二、MetingJS

官方文档https://gitee.com/pixcat/MetingJS
MetingJS 用来配合APlayer实现将自己在网易或者 QQ 音乐的歌单里的歌，直接放进播放器里。

html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="2312165875" fixed="true"></meting-js>

第一行是添加 Meting.js。
第二行是配置。
根据 MetingJS 的文档。

1. server 后面的是我们要用的音乐平台，可以填写的有netease, tencent, kugou, xiami, baidu 。
   
2. type 后面可以填写 song, playlist, album, search, artist，分别是歌曲，歌单，专辑，搜索，歌手。
   
3. id 是我们歌单的链接号码，这个数字我们可以登录网页版的网易云，打开一个歌单，从网址就能看出 id 是多少。
   
4. fixed 其实是 APlayer 的选项，作用是开启「吸底模式」true 是开启，默认情况是 false。作用就是一个缩小的选项。