前言
众所周知网易云有个外链播放器，但是现在网易云的资源太少了，想布置在博客里的话单用它的话就过于枯燥，所以 Tom 找到了 APlayer 播放器，单用代码就可以实现，可以内置官方的音乐外链，也可以下载上传自己想要的歌曲外链，这样也不用担心没有自己想要的歌。
播放器代码
<!-- APlayer 播放器容器 -->
<div id="aplayer"></div>
<!-- 引入 APlayer 的 CSS 和 JS（建议在主题中加载，避免重复） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<style>
/* 移除默认边距，确保播放器紧贴容器 */
#aplayer { margin: 0 !important; padding: 0 !important; width:100%;
/* 播放器宽度占满容器 */max-width: 600px;
/* 限制最大宽度，保持美观 */box-sizing: border-box;}
/* 移除 WordPress 块或主题的默认间距 */ .wp-block-custom-html{ margin:0!important;padding: 0!important;}
</style><script> // 初始化
APlayer const ap = new APlayer({ container: document.getElementById('aplayer'), fixed: false, // 嵌入式播放器
autoplay: false, // 不自动播放
theme: '#b7daff', // 主题色
loop: 'all', // 循环模式
order: 'list', // 播放顺序
preload: 'auto', // 预加载
volume: 0.7, // 默认音量
mutex: true, // 互斥
listFolded: false, // 播放列表默认展开
listMaxHeight: '200px', // 播放列表高度
audio: [{ name: '光辉岁月', artist: 'Beyond', url: 'http://music.163.com/song/media/outer/url?id=347230.mp3', cover: 'https://p2.music.126.net/1eXgEN0Waxs2L3iHrY2sLA==/109951163250234241.jpg', theme: '#ebd0c2' },{name: '晴天',artist: '周杰伦',url: 'http://music.163.com/song/media/outer/url?id=185079.mp3',cover: 'https://p1.music.126.net/6y-UleORITEDbSKsvb5OFQ==/109951164169271112.jpg', theme: '#46718b'}]});</script>
配置说明
效果是这样，这个可以完美适配WordPress的argon主题。
APlayer 引用：通过 CDN 加载 APlayer 的 CSS 和 JS 文件（版本 1.10.1），无需本地存储。
歌曲配置：url：网易云音乐外链格式为 http://music.163.com/song/media/outer/url?id = 歌曲 ID.mp3。你需要在网易云音乐官网找到歌曲 ID（URL 中的数字）。
cover：歌曲封面图片可在网易云音乐页面右键获取，或使用默认图片。示例中的两首歌（《光辉岁月》和《晴天》）是公开可用的歌曲，ID 和封面已配置好。
歌曲外链获取
像直接在网页端的网易云，打开发者工具，选择网络监视器，过滤到媒体，然后开始播放就可以得到链接，但这个链接是有时效性的，所以直接用永久外链吧！
这个是永久外链的格式
https://music.163.com/song/media/outer/url?id=${id}.mp3
这是永久外链的格式，把 ${id} 替换成你想要的歌曲 ID 即可，例如这首歌的网址为
https://music.163.com/#/song?id=25906124
那么它后面的 25906124 就是这首歌的 ID，进行替换即可
这里 Tom 推荐用这个网址可以直接搜索找到官方的歌曲外链 https://mp3.ltyuanfang.cn/
外链制作
上面的是官方的外链获取方法，那肯定有些歌找不到啦或者歌手不是自己喜欢的啦，这种情况怎么办？很好，跟我来 (*^ω^*)
这里 Tom 推荐使用这个网站进行音乐的搜索以及下载 https://www.yinyueke.net/
下载好后可以直接托管到自己的云储存或者 cdn 里，也可以使用 https://music.gimhoy.com/ 这个网站来进行托管，上传之后选择自己上传的音乐复制地址即可获得一个外链。
<h2″>添加或删除音乐
在提供的这段代码中目前默认有两首歌曲，你可以进行替换或添加自己想要的歌曲来制成一个歌单？
audio:
[ { name: '光辉岁月',artist: 'Beyond',url: 'http://music.163.com/song/media/outer/url?id=347230.mp3',
cover: 'https://p2.music.126.net/1eXgEN0Waxs2L3iHrY2sLA==/109951163250234241.jpg',
theme: '#ebd0c2'},
{
name: '晴天',artist: '周杰伦', url: 'http://music.163.com/song/media/outer/url?id=185079.mp3',
cover: 'https://p1.music.126.net/6y-UleORITEDbSKsvb5OFQ==/109951164169271112.jpg',
theme: '#46718b'
}]
1. 删除一首歌曲
要删除一首歌曲，只需从 audio 数组中移除对应的歌曲对象（包括大括号 {} 及其内容）。每个歌曲对象由以下字段组成：
name：歌曲名
artist：歌手
url：歌曲外链
cover：封面图片
URLtheme：单曲主题色（可选）如：删除《晴天》假设你要删除第二首歌《晴天》，需要移除以下代码：
,// 注意：移除时保留前面的逗号（如果不是最后一个元素）
{name: '晴天',
artist: '周杰伦',
url: 'http://music.163.com/song/media/outer/url?id=185079.mp3',
cover: 'https://p1.music.126.net/6y-UleORITEDbSKsvb5OFQ==/109951164169271112.jpg',
theme: '#46718b'}
修改后的 audio 数组：
audio:
[{name: '光辉岁月',
artist: 'Beyond',
url: 'http://music.163.com/song/media/outer/url?id=347230.mp3',
cover: 'https://p2.music.126.net/1eXgEN0Waxs2L3iHrY2sLA==/109951163250234241.jpg',
theme: '#ebd0c2'}]
注意：如果删除的是最后一个歌曲对象，无需保留尾部的逗号。如果删除后 audio 数组为空（即没有歌曲），播放器将不显示任何内容，但不会报错。
2. 添加一首歌
要添加一首歌曲，需要在 audio 数组中插入一个新的歌曲对象。以网易云为例，你需要准备以下信息：
歌曲 ID：从网易云音乐歌曲页面 URL 获取（形如 /song?id=XXXXXX）。
歌曲外链：格式为 http://music.163.com/song/media/outer/url?id = 歌曲 ID.mp3。
封面图片：在网易云音乐页面右键歌曲封面，复制图片地址。
歌曲名和歌手：手动输入或从页面复制。主题色：可选，任意十六进制颜色代码（如 #ffffff）。
示例：
添加《海阔天空》假设你要添加 Beyond 的《海阔天空》（歌曲 ID：347491，假设封面和主题色已获取），需要添加以下歌曲对象：
, // 如果不是第一个元素，前面加逗号{name: '海阔天空',artist: 'Beyond',url: 'http://music.163.com/song/media/outer/url?id=347491.mp3',cover: 'https://p2.music.126.net/1eXgEN0Waxs2L3iHrY2sLA==/109951163250234241.jpg', // 示例封面theme: '#ff6347' // 自定义主题色}
添加位置:
如果想添加到列表末尾，将上述代码插入 audio 数组的最后一个 } 之前。如果想插入到特定位置（如第一首），在目标位置前添加并调整逗号。修改后的 audio 数组（添加到末尾）：
audio: [{
name: '光辉岁月',
artist: 'Beyond',
url: 'http://music.163.com/song/media/outer/url?id=347230.mp3',
cover: 'https://p2.music.126.net/1eXgEN0Waxs2L3iHrY2sLA==/109951163250234241.jpg',
theme:'#ebd0c2'},
{ name: '晴天',
artist: '周杰伦',
url: 'http://music.163.com/song/media/outer/url?id=185079.mp3',
cover: 'https://p1.music.126.net/6y-UleORITEDbSKsvb5OFQ==/109951164169271112.jpg',
theme: '#46718b'
},
{
name: '海阔天空',
artist: 'Beyond',
url: 'http://music.163.com/song/media/outer/url?id=347491.mp3',
cover: 'https://p2.music.126.net/1eXgEN0Waxs2L3iHrY2sLA==/109951163250234241.jpg',
theme: '#ff6347'
}]
