如何在博客中添加Aplayer音乐播放器

前言

是否有一首音乐，前奏一响起，让你灵魂不自主的颤栗。音乐就像老胶卷，每个旋律，每句歌词，都承载着每个人的往事回忆和情愫感受。

我收藏了好多的音乐，奈何好多音乐受版权限制，需要购买 VIP 才能听，还有一些音乐一直是下架状态，办会员也听不了，所以只能自己搞个音乐播放器了。

在博客上的音乐播放器大多是那种 Mini 音乐播放器，虽然很便捷，但我一直觉得不够正式，音乐列表看起来也不够直观，所以我希望做到单独一个页面上。

本文讲解如何在博客中添加音乐播放器，播放自己的音乐，欢迎大家来我的音乐主页我的歌单-蜜罐屋，随时随地，想听就听。

Mini 播放器效果：

单页面音乐效果：

教程

1. 音乐插件

对比了几款音乐插件，我最终选定了 Aplayer.js，因其界面美观，功能强大。音乐播放器的音乐信息，歌词，进度条，音量，顺序模式，循环模式都支持。可以使用三方音乐外链，也可以使用自己的音乐链接。

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

当然，由于一些限制，打开以上链接为概率性事件...

2. 音乐资源

音乐资源可以从各大音乐平台下载，如果受会员或者下架限制，可以通过以下我常用的几个方式查找音乐。

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

由于我会将下载的音乐上传到自己的服务器（WordPress 后台媒体），音乐文件太大时我的服务器属实吃不消（渣渣服务器），只好转换成较小的 MP3 格式，推荐使用 WORTHSEE：https://audio.worthsee.com/。

3. 实现代码

将 Aplayer 插件 APlayer.min.js 和 APlayer.min.css 上传到服务器，如果博客使用 WordPress 可上传到服务器 wp-content 目录下，通过链接 https://IP/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	-	音频列表最大高度

3.1 Mini 播放器

Mini 播放器会默认收起音乐列表，固定在界面左下角。

如果博客使用的是 WordPress，在使用的主题设置中找到脚本一项，将代码写在脚本中即可执行。

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

<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>
 
<div id='aplayer'></div>
 
<script>
    var ap = new APlayer
    ({
        element: document.getElementById('aplayer'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: {
            title: '半岛铁盒',
            author: '周杰伦',
            url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
            pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
        }
    });
    ap.init();
</script>

多首音乐时，audio 值为数组形式，代码如下：

<script>
    var ap = new APlayer
    ({
        element: document.getElementById('aplayer'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: [
            {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
            },
            {
                title: '给我一首歌的时间',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
            }
        ]
    });
    ap.init();
</script>

3.2 单页面音乐

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

<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>
 
<div id='demo'></div>
 
<script>
    var demo = new APlayer
    ({
        element: document.getElementById('demo'),
        showlrc: false,
        fixed: false,
        mini: false,
        audio: [
            {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
            },
            {
                title: '给我一首歌的时间',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
            }
        ]
    });
    demo.init();
</script>

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

如果你想创建多个音乐播放器，就需要创建多个音乐播放器元素 <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://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'
            }
    });
    var demo2 = new APlayer
    ({
        element: document.getElementById('demo2'),
        showlrc: false,
        audio: {
                title: '给我一首歌的时间',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'
            }
    });
    demo1.init();
    demo2.init();
</script>

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

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

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

4. Meting 三方音乐

当然我们也可以使用第三方音乐，需要引入另外一款 js 插件 Meting.js，它是基于 Aplayer 封装好的插件，开箱即用。

CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 基本是相同的。

4.1 单曲引入

我们使用网易云举例，单曲 Blow Me a Kiss，链接：https://music.163.com/#/song?id=2526628

代码如下：

<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
 
<meting-js server="netease" type="song" id="2526628"></meting-js>

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

4.2 歌单引入

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

代码如下：

<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
 
<meting-js server="netease" type="playlist" id="7360465359"></meting-js>

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

4.3 Mini 播放器

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

<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
 
<meting-js 
    server="netease" 
    type="playlist" 
    id="7360465359"
    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"。

4.4 博客园音乐引入

博客园是为数不多的可定制的博客平台，我们先在博客后台 -> 设置 -> 申请 JS 权限，大概一个小时时间，成功后在博客后台 -> 设置 -> 页脚 HTML 代码中粘贴上面 4.3 的案例，就可以生成 Mini 音乐播放器啦，是不是很简单～

博客园 首页 播放器效果：

优化

夜间模式

有粉丝反馈在博客夜间模式下，播放器音乐列表显示文字看不清的问题。

以我使用的博客主题为例，由于网站设置夜间模式后，会将所有文字颜色改为更适应夜间的颜色#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;
}

是不是看着舒服多了～

性能优化

偶然一天我打开音乐界面，发现有点卡，查看网络请求才发现，默认加载了几首音乐资源，脆弱的服务器简直不堪重负...

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

上下曲功能

默认播放器无法通过左右方向键控制上一首 / 下一首，通过 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。