插件
这里使用的是 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://blog.long-code.cn/music/三生三世 - 张杰.mp3',
pic: 'https://blog.long-code.cn/music/张杰_三生三世十里桃花.jpg'
},
{
title: '三生三世',
author: '张杰',
url: 'https://blog.long-code.cn/music/三生三世 - 张杰.mp3',
pic: 'https://blog.long-code.cn/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;
}参考文章
来自河南
