利用Aplayer和小工具实现侧边栏音乐播放器

我这个博客之前的侧边栏音乐播放器是通过插件直接添加网易云歌单。但是不论怎么改CSS都感觉不是很符合现在这个主题，于是我打算改一下。

翻阅了主题的文档后，发现正好有通过Aplayer实现的侧边栏播放器功能，但是似乎作者的演示代码似乎蛮旧的，aplayer用的还是1.5.8版本的。

<script src="//cdn.bootcss.com/aplayer/1.5.8/APlayer.min.js"></script>
<div id="aplayer1" class="aplayer"></div>
<script>
var ap = new APlayer({
    element: document.getElementById('aplayer1'),
		autoplay: false,
    music: {
        title: '神探',
        author: '丁世光',
        url: 'https://shawnzeng.com/wp-content/uploads/2018/02/丁世光-神探.mp3',
	pic: 'https://shawnzeng.com/wp-content/uploads/2017/10/音阙诗听.jpg'
    }
});
</script>

所以我去查阅了Aplayer的文档（中文文档）
同时将加载js的cdn切换为cloudflare家的，因为我网站用的也是cloudflare的cdn。

以下是我的示例代码

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<div id="aplayer1" class="aplayer"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script>
var ap = new APlayer({
    element:document.getElementById('aplayer1'),
	autoplay: false,
    theme: '#FADFA3',
    loop: 'all',
    order: 'random',
    preload: 'auto',
    volume: 0.3,
    mutex: true,
    listFolded: false,
    listMaxHeight: 270,
	lrcType: 3,
    audio: [
        {
            name: '大切なものは心に残るだろう',
            artist: '樋口秀樹',
            url: 'http://m10.music.126.net/20200828152540/711240b0f403a63230ee808ec026c40e/ymusic/545c/510b/0359/c636307a31fac7b9e573432081d0613d.mp3',
            cover: 'http://p1.music.126.net/VfcIfTIc8wabla9xRJvhbQ==/109951163768495838.jpg?param=100x100',
            lrc: 'https://windis.cn/wp-content/uploads/lrc/大切なものは心に残るだろう-樋口秀樹.lrc'
        },
        {
            name: '故郷を離るる歌',
            artist: '阿知波大輔',
            url: 'http://m10.music.126.net/20200828153012/8581de7297c82a841045e2d0299bf79f/ymusic/0fd1/6be0/63a2/249ee6677fa74e14611c36959bfb3953.mp3',
            cover: 'http://p1.music.126.net/x9EYAfTfd9uXEb3abL1SFQ==/109951163099372749.jpg?param=100x100',
            lrc: 'https://windis.cn/wp-content/uploads/lrc/故郷を離るる歌-阿知波大輔.lrc'
        }
    ]
});
</script>

以下是添加小工具的方式

（我个人尝试无法保存超过100行的代码）
（点击图片查看大图）

总结

优点

• 主题原生支持，不需要添加任何插件
• 样式统一，具有美感
• 除歌词文件外全部由网易的服务器提供，减小服务器带宽压力

缺点

• 不能添加过长的内容，既歌曲数量受到限制（等我web水平提升后考虑通过单独使用一个文件保存歌单 嗯直接把最后一个<script>标签改成引入一个js文件就行了）
• 歌词文件无法“借用”网易的服务器加载只能保存在自己的服务器中或者对象存储中
• 由于主题不支持全局ajax所以无法跨页面播放 所以我直接换了个支持全局pjax的主题，ajax好处多多！