网页播放器对于博客来说是一个非常装逼重要的模块。在博客中放一个歌单不但能展现自己的独特品味，还能有更好的浏览体验。就是想装逼。

上网冲浪的时候找到了这个插件hermit x，适用于wordpress的使用APlayer 前端播放器的插件。但我使用下来效果差强人意。乱码，搜不到歌曲等问题让我不得不寻找新的播放插件。

在一番搜寻下，我找到了Netease Music，这个插件使用方便简单，只需要插入一段简码就可以插入歌曲。

如：http://music.163.com/#/song?id=26270008

但它又有一个小小的问题，那就是第一次进入页面的时候不会显示播放器，而是显示一些乱码。

再一次刷新就会显示出播放器了。

这不是什么大问题，但总觉得很难受。我认为这是插件的问题，所以打算从根源上解决问题，这便有了下面这段折腾经历。

使用Aplayer

因为hermit x和Netease Music都是从第三方音乐平台获取资源进行音乐播放的，所以我大胆猜测问题出在第三方资源加载。事实证明这个猜测是错的。之前有提到过hermit x的前端用的是Aplayer，所以我打算直接使用Aplayer。

安装

在github上下载Aplayer的文件，然后将APlayer.min.css和APlayer.min.js文件放到网站的wp-content的文件夹中。

使用

通过在文章中插入html来使用播放器，例如：

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

<div id='demo'></div>

<script>
    var demo = new APlayer
    ({
        element: document.getElementById('demo'),
        fixed: false,
        mini: false,
        audio: [
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
        	},
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
        	},
 ]
    });
    demo.init();
</script>

更改模式和样式通过直接更改参数来实现，为了方便我直接把参数放在下面了。

参数

名称	默认值	描述
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	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	–	音频信息, 应该是一个对象或对象数组
audio.name	–	音频名称
audio.artist	–	音频艺术家
audio.url	–	音频链接
audio.cover	–	音频封面
audio.lrc	–	详情
audio.theme	–	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情
customAudioType	–	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	–	列表最大高度
storageName	‘aplayer-setting’	存储播放器设置的 localStorage key

来自Aplayer文档

歌词

如果只是播放器的话，上述步骤已经完成了。但Aplayer支持歌词功能，这就不得不折腾来玩玩了。最终效果如图。

Aplayer有三种方式添加歌词，分别是lrc文件，js字符串，html。我原本想用lrc文件来添加歌词的，但无奈我的lrc无法上传到wordpress中。于是我选择了利用js字符串的方式来添加歌词。

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

<div id='demo'></div>

<script>
    var demo = new APlayer
    ({
        element: document.getElementById('demo'),
        lrcType: 1,
        fixed: false,
        mini: false,
        audio: [
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
                lrc: '[00:00]歌词\n[00:03]歌词',
        	},
        	{
                title: '标题',
                author: '歌手',
                url: '歌曲url',
                pic: '封面url',
                lrc: '[00:00]歌词\n[00:03]歌词',
        	},
 ]
    });
    demo.init();
</script>

添加方式并不难，通过js字符串添加只需要将lrcType设置为1就行了。如果是通过lrc文件则是3，html是2。值得注意的是，Aplayer仅支持以下几种歌词格式，其余格式无法识别。

[mm:ss]APlayer
[mm:ss.xx]is
[mm:ss.xxx]amazing
[mm:ss.xx][mm:ss.xx]APlayer
[mm:ss.xx]<mm:ss.xx>is
[mm:ss.xx]amazing[mm:ss.xx]APlayer

至此，便能通过Aplayer优雅的播放音乐了。不过第一次进入页面的时候还是不会显示播放器，而且这次连乱码都没有。白忙活了。再加上使用Aplayer的复杂程度远大于直接使用Netease Music插件，属实是妥妥的大失败了。