本文最后更新于 420 天前，其中的信息可能已经有所发展或是发生改变。

前言

众所周知网易云有个外链播放器，但是现在网易云的资源太少了，想布置在博客里的话单用它的话就过于枯燥，所以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>

配置说明

效果是这样，也算是完美适配了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/这个网站来进行托管，上传之后选择自己上传的音乐复制地址即可获得一个外链。

添加或删除音乐

在提供的这段代码中目前默认有两首歌曲，你可以进行替换或添加自己想要的歌曲来制成一个歌单？

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'    }]

免责说明

音频版权来自各网站，本站只提供数据查询服务，不会修改任何音频文件，不提供任何音频存储和贩卖服务。