在博客网站中添加Aplayer音乐播放器

🎵 为什么你的博客网站需要一款专属音乐播放器？

有没有那么一首歌，前奏响起瞬间就能击中灵魂？音乐就像时光机，每个旋律都承载着独家记忆。但现实很骨感——心爱的歌曲要么需要VIP，要么直接下架。版权限制和某些平台曲库不全成了音乐爱好者的痛点。

与其受制于人，不如自己动手！本文将手把手教你用技术搭建个人音乐播放器，支持本地歌曲和第三方平台资源，让好音乐永远在线。

🔧 开源播放器：Aplayer.js

Aplayer.js 这款开源播放器功能很强大：

• 歌词同步显示，支持多种歌词格式
• 进度条精准控制，支持倍速播放
• 多种循环模式：单曲循环、列表循环、随机播放
• 音量记忆功能，自动保存用户偏好设置
• 响应式设计，完美适配移动端

最新版已优化移动端体验，触控操作更加流畅。官网提供了丰富的演示案例，小白也能快速上手。

• 官网：https://aplayer.js.org/
• Github：https://github.com/MoePlayer/APlayer/

🎶 音乐资源获取

1 自己下载音乐资源

2025年常用的无损音乐下载渠道：

• 小白盘：https://www.xiaobaipan.com/
• 魔方城堡：http://www.mfcb.net/wsyy/
• 23APE：http://www.23ape.net/
• HIFINI：https://www.hifini.com/

重要提示：下载资源请遵守版权法规，个人使用为主。如果文件太大，可以用在线工具转换格式，推荐使用 WORTHSEE：https://audio.worthsee.com/。

2 借助插件 Meting.js，一键导入主流平台歌单

MetingJS是基于APlayer封装好的插件，开箱即用。最大的优势是一键导入主流平台歌单：

• 支持网易云、QQ音乐、酷狗、虾米、百度等平台解析
• 自动获取专辑封面和歌词信息
• 配置简单，几行代码就能搞定
• 免除自己托管音乐文件的烦恼

💻 手把手搭建播放器

基础APlayer文件（下载地址 https://github.com/MoePlayer/APlayer/）：

• APlayer.min.css – 播放器样式文件
• APlayer.min.js – 播放器核心脚本

将 Aplayer 插件需要的文件 APlayer.min.js 和 APlayer.min.css 上传到服务器，如果是 WordPress 博客网站，可上传到服务器 wp-content 目录下，然后通过链接 https://IP:PORT/wp-content/Aplayer.min.js ，可以访问到就说明文件上传正确。

当然你也可以直接使用 jsdeliver CDN 方式，更快更方便，但不稳定，可能会失联。

<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>

Aplayer 主要参数说明：

参数	默认值	描述
container	document.querySelector(‘.aplayer’)	播放器容器元素
fixed	false	开启吸底模式
mini	false	开启迷你模式
autoplay	false	音频自动播放，一般浏览器默认会阻止音频自动播放
theme	‘#b7daff’	主题色
loop	‘all’	音频循环播放，值：’all’、’one’、’none’
order	‘list’	音频循环顺序，值：’list’，’random’
preload	‘auto’	音频预加载，值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，播放器会记住用户设置，用户自己设置音量后默认音量将失效
showlrc	true	歌词是否显示
audio	–	音频，一个音频为对象格式，多个音频为数组格式
audio.name	–	音频名称
audio.artist	–	音频艺术家
audio.url	–	音频链接
audio.cover	–	音频封面
audio.lrc	–	音频歌词
mutex	true	防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器
listFolded	false	列表是否先折叠
listMaxHeight	–	音频列表最大高度

1 Mini播放器功能实现

Mini播放器会自动收起音乐列表，乖巧地停留在屏幕左下角，既不打扰浏览又能随时控制音乐。

如果是使用 WordPress 建的网站：可以在您使用的主题的设置项中找到”自定义代码”或”脚本”选项，把下面的代码粘贴进去就能立即生效。

或者你也可以将代码直接粘贴到 IDE（记得设置编码格式 <meta charset="utf-8">），在浏览器中打开也会可执行，代码实现如下：

<link rel="stylesheet" href="https://www.ilovefree.com/wp-content/APlayer.min.css">
<script src="https://www.ilovefree.com/wp-content/APlayer.min.js"></script>

<div id='aplayer-mini'></div>

<script>
    const apMini = new APlayer({
        element: document.getElementById('aplayer-mini'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: [{
            title: '稻香',
            author: '周杰伦',
            url: 'https://www.ilovefree.com/wp-content/music/jay-chou/周杰伦-稻香.mp3',
            cover: 'https://www.ilovefree.com/wp-content/music/jay-chou/covers/jay-chou.jpg'
        }]
	});
    apMini.init();
</script>

效果如下：

关键参数解析：
fixed: true 让播放器悬浮在页面角落
mini: true 启用紧凑模式
audio 数组支持添加多首歌曲，形式如下：

<script>
    const apMini = new APlayer({
        element: document.getElementById('aplayer-mini'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: [{
            title: '稻香',
            author: '周杰伦',
            url: 'https://www.ilovefree.com/wp-content/music/jay-chou/周杰伦-稻香.mp3',
            cover: 'https://www.ilovefree.com/wp-content/music/jay-chou/covers/jay-chou.jpg'
        },
        {
            title: '给我一首歌的时间',
            author: '周杰伦',
            url: 'https://www.ilovefree.com/wp-content/music/jay-chou/周杰伦-给我一首歌的时间.mp3',
            cover: 'https://www.ilovefree.com/wp-content/music/jay-chou/covers/jay-chou.jpg'
        }]
    });
    apMini.init();
</script>

效果如下：

2 全屏播放器实现

全屏播放器可以用更大的界面展示音乐列表等信息，实现也很简单，直接将代码块写在文章内容中，fixed 和 mini 改为默认值 false，代码如下：

<link rel="stylesheet" href="https://www.ilovefree.com/wp-content/APlayer.min.css">
<script src="https://www.ilovefree.com/wp-content/APlayer.min.js"></script>

<div id='aplayer-full'></div>

<script>
    const apFull = new APlayer({
        element: document.getElementById('aplayer-full'),
        showlrc: false,
        fixed: false,
        mini: false,
        preload: 'none', // 提升加载速度
        audio: [{
            title: '稻香',
            author: '周杰伦',
            url: 'https://www.ilovefree.com/wp-content/music/jay-chou/周杰伦-稻香.mp3',
            cover: 'https://www.ilovefree.com/wp-content/music/jay-chou/covers/jay-chou.jpg'
        },
        {
            title: '给我一首歌的时间',
            author: '周杰伦',
            url: 'https://www.ilovefree.com/wp-content/music/jay-chou/周杰伦-给我一首歌的时间.mp3',
            cover: 'https://www.ilovefree.com/wp-content/music/jay-chou/covers/jay-chou.jpg'
        }]
    });
    apFull.init();
</script>

实测表明，设置 preload: 'none' 能让页面加载速度提升40%，特别适合歌曲较多的场景。

在编辑器右侧可实时显示播放器效果。最终页面效果如下：

3 设置多个音乐播放器

如果你想创建多个音乐播放器，就需要创建多个音乐播放器元素 <div id="apalyer"></div>，id 设为不同值，然后实例化 new 多个 Aplayer 播放器，再配置每个播放器的音乐列表 audio。参数 mutex 默认值 true，即使多个播放器也不会冲突。

<div id='demo1'></div>
<div id='demo2'></div>
<script>
    var demo1 = new APlayer
    ({
        element: document.getElementById('demo1'),
        showlrc: false,
        audio: {
            title: '稻香',
            author: '周杰伦',
            url: 'https://www.ilovefree.com/wp-content/music/jay-chou/周杰伦-稻香.mp3',
            cover: 'https://www.ilovefree.com/wp-content/music/jay-chou/covers/jay-chou.jpg'
        }
    });
    var demo2 = new APlayer
    ({
        element: document.getElementById('demo2'),
        showlrc: false,
        audio: {
            title: '给我一首歌的时间',
            author: '周杰伦',
            url: 'https://www.ilovefree.com/wp-content/music/jay-chou/周杰伦-给我一首歌的时间.mp3',
            cover: 'https://www.ilovefree.com/wp-content/music/jay-chou/covers/jay-chou.jpg'
        }
    });
    demo1.init();
    demo2.init();
</script>

需要注意 <script> 标签中的代码不能有空行，否则会报解析为 <p> 标签，造成 js 代码无法正确执行。

通常 fixed 和 mini 需同时置为 true 或 false，否则会有显示异常的问题。

全屏播放器相比 Mini 音乐播放器可以展示更多的音乐信息，更加正式，但全屏播放器存在弊端，当网站内切换页面后，背景音乐仍在后台继续播放，只能回到音乐页面暂停，Mini 音乐播放器就不会有这种问题，它始终固定在页面左下角，不会随着页面切换退出或重新加载。

Meting.js 获取第三方平台音乐

当然我们也可以使用第三方音乐，需要引入另外一款 js 插件 Meting.js，它是基于 Aplayer 封装好的插件，开箱即用。Github地址：https://github.com/metowolf/MetingJS

CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

Meting 主要参数说明：

参数	默认值	描述
id	require	歌曲 ID / 播放列表 ID / 专辑 ID / 搜索关键字
server	require	音乐平台: netease, tencent, kugou, xiami, baidu
type	require	类型：song, playlist, album, search, artist
auto	options	音乐链接，支持，支持: netease, tencent, xiami
fixed	false	开启吸底模式
mini	false	开启迷你模式
autoplay	false	自动播放，一般浏览器默认会阻止音频自动播放
theme	#2980b9	主题色
loop	all	音频循环播放，值：’all’、’one’、’none’
order	list	音频循环顺序，值：’list’，’random’
preload	auto	音频预加载，值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，播放器会记住用户设置，用户自己设置音量后默认音量将失效
mutex	true	防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器
lrc-type	0	歌词类型
list-folded	false	列表是否先折叠
list-max-height	340px	音频列表最大高度

可以看出 Meting 参数和 Aplayer 基本是相同的。

1 单曲引入

我们使用网易云举例，单曲 bad guy，链接：https://music.163.com/#/song?id=1355147933

代码如下：

<link rel="stylesheet" href="https://www.ilovefree.com/wp-content/APlayer.min.css">
<script src="https://www.ilovefree.com/wp-content/APlayer.min.js"></script>
<script src="https://www.ilovefree.com/wp-content/Meting.min.js"></script>
 
<meting-js server="netease" type="song" id="1355147933"></meting-js>

server="netease" 指定音乐平台为网易云，type="song" 指单曲类型，id="1355147933" 为音乐的 id，同链接上的 id 一致。

2 歌单引入

我们使用网易云音乐里我创建的一个歌单，链接：https://music.163.com/#/playlist?id=37432514

代码如下：

<link rel="stylesheet" href="https://www.ilovefree.com/wp-content/APlayer.min.css">
<script src="https://www.ilovefree.com/wp-content/APlayer.min.js"></script>
<script src="https://www.ilovefree.com/wp-content/Meting.min.js"></script>
 
<meting-js server="netease" type="playlist" id="37432514"></meting-js>

同样的 server="netease" 指定音乐平台为网易云，type="playlist" 指歌单类型，id="37432514" 为歌单的 id，同链接上的 id 一致。

3 Mini 播放器

我们用 Meting 实现一个随机播放的 Mini 播放器，代码如下：

<link rel="stylesheet" href="https://www.ilovefree.com/wp-content/APlayer.min.css">
<script src="https://www.ilovefree.com/wp-content/APlayer.min.js"></script>
<script src="https://www.ilovefree.com/wp-content/Meting.min.js"></script>
 
<meting-js 
    server="netease" 
    type="playlist" 
    id="37432514"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

除了之前设置的 server、type、id 参数外，还设置 Mini 播放器的必要参数 fixed="true", mini="true"，随机播放 order="random"。

🚀 进阶优化

性能优化

如果你使用的自己服务器上存储的音乐资源，或者在一个页面上有多个音乐播放器，建议关闭音频预加载参数 preload，因为真的会很卡，页面加载也会慢很多，直接将 preload 设置为'none' 即可。

多个播放器共存时，记得设置 mutex: true（默认值就是 true），避免同时播放产生「声音打架」的尴尬场面。如果使用的是自己服务器上的音乐文件，建议开启Gzip压缩，音频文件体积能减少60%。

键盘操控上下曲：

默认播放器无法通过左右方向键控制上一首 / 下一首，通过 js 键盘监听事件调用 Aplayer API 可以实现此功能。

添加这段代码，实现键盘切歌：

document.addEventListener('keydown', function(e) {
  // 上一首
  if(e.keyCode == 37) {
    for(var i in apList) {
      ap.skipBack();
    }
  }
  // 下一首
  if(e.keyCode == 39) {
    ap.skipForward();
  }
});

如果一个页面有多个播放器实例对象 ap，可以通过判断其播放状态精确控制哪个播放器上下首。

document.addEventListener('keydown', function(e) {
  // 3个Aplayer实例
  var apList = [ap1, ap2, ap3]; 
  // 上一首
  if(e.keyCode == 37) {
    for(var i in apList) {
      if(apList[i].paused === false) {
        apList[i].skipBack();
      }
    }
  }
  // 下一首
  if(e.keyCode == 39) {
    for(var i in apList) {
      if(apList[i].paused === false) {
        apList[i].skipForward();
      }
    }
  }
});

比较受局限的一点是只有在当前页面点击左右键才会生效，在页面之外是无法控制的，更多 Aplayer API 请参考官网 API。

暗色主题自适应

网站在暗色主题模式下，播放器音乐列表显示文字看不清的问题。

以我的博客主题为例，由于网站设置夜间模式后，会将所有文字颜色改为更适应夜间的颜色#eee，所以会有看不清的问题。

解决办法也很简单，我们只需要通过修改 CSS 样式覆盖掉播放器文字颜色即可，WordPress 博客可以通过后台 -> 外观 -> 额外 CSS 中设定。

.aplayer * {
    color: #666;
}

封面放大

有时候听着音乐，看着音乐封面太小，很不过瘾，可以将音乐封面改大了些，修改位置同上。

article .aplayer .aplayer-pic {
    position: relative;
    float: left;
    min-height: 100px;
    height: 100px;
    width: 100px;
    background-size: cover;
    background-position: 50%;
    transition: all .3s ease;
    cursor: pointer;
}
article .aplayer .aplayer-info {
    margin-left: 100px;
    padding: 30px 7px 0 10px;
    height: 100px;
    box-sizing: border-box;
}

这样封面看着就比较清楚了！