博客中添加音乐播放器

插件

这里使用的是 APlayer

APlayer is a lovely HTML5 music player.
官方网站：点击这里
GitHub：点击这里

• 界面美观，功能强大
• 支持本地音乐，也支持三方音乐外链

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	-	音频列表最大高度

播放本地音乐

需要引入 APlayer.min.js 和 APlayer.min.css

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

<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://xxx.com/music/三生三世 - 张杰.mp3',
	            pic: 'https://xxx.com/music/张杰_三生三世十里桃花.jpg'
	        },
	        {
	            title: '三生三世',
	            author: '张杰',
	            url: 'https://xxx.com/music/三生三世 - 张杰.mp3',
	            pic: 'https://xxx.com/music/张杰_三生三世十里桃花.jpg'
	        }
        ]
    });
    ap.init();
</script>

播放第三方音乐

还需要一个文件 Meting.js

这里使用的是网易云音乐，填上自己的歌单id即可，其他参数可以自己调整

<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/meting@2.0.1/dist/Meting.min.js"></script>

<meting-js
    server="netease"
    type="playlist"
    id="xxx"
    fixed="true"
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

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	音频列表最大高度

字体颜色

在博客夜间模式下，可能会存在播放器音乐列表显示文字看不清的问题

修改 CSS 样式覆盖掉播放器文字颜色即可，WordPress 博客可以通过后台 -> 外观 -> 额外 CSS 中设定。

.aplayer * {
    color: #666;
}

参考文章

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