Hexo添加音乐播放器

写在前面

为博客添加音乐播放器功能，网上有很多种方式，也有很多插件可以用，比如aplayer、dplayer等等。部署方式既可以使用hexo插件，也可以通过提取dist文件的方式。

本人为自己的播放选择的aplayer播放器，一开始是使用hexo插件的方式，但是部署的时候一直报标签解析的错误，查了好久也没查到原因，无奈，放弃使用插件的方式，改为使用提取aplayer的dist文件的方式。

下载aplayer

访问aplayer源码：GitHub Aplayer ，将文件下载到本地，解压后将dist文件夹复制到 /themes/next/source 文件夹下。

创建样式

新建music.js

在/themes/next/source/dist文件夹中新建music.js文件，将下面代码添加进去：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: false,
    loop: 'all',
    volume: 0.7,
    listFolded: true,
    listMaxHeight: 60,
    audio: [
        {
            name: 'name1',
            artist: 'artist1',
            url: 'url1.mp3',
            cover: 'cover1.jpg',
        },
        {
            name: 'name2',
            artist: 'artist2',
            url: 'url2.mp3',
            cover: 'cover2.jpg',
        }
    ]
});

参数修改

上面代码为你在hexo上生成aplayer播放器的样式，参数修改参考 官方中文文档 。

修改aplayer样式

普通模式：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

效果如下：

播放列表模式：

const ap = new APlayer({
    container: document.getElementById('player'),
    listFolded: false,//列表默认折叠
    listMaxHeight: 90,//列表最大高度
    lrcType: 3, //此为歌词格式，没有歌词可以直接删掉这一行
    audio: [
        {
            name: 'name1',
            artist: 'artist1',
            url: 'url1.mp3',
            cover: 'cover1.jpg',
            lrc: 'lrc1.lrc',
            theme: '#ebd0c2'
        },
        {
            name: 'name2',
            artist: 'artist2',
            url: 'url2.mp3',
            cover: 'cover2.jpg',
            lrc: 'lrc2.lrc',
            theme: '#46718b'
        }
    ]
});

效果如下：

吸底模式：

const ap = new APlayer({
    container: document.getElementById('player'),
    fixed: true,
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg',
    }]
});

效果如下：

迷你底模式：

const ap = new APlayer({
    container: document.getElementById('player'),
    mini: true,
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg',
    }]
});

附上我的参数：

const ap = new APlayer({
    container: document.getElementById('aplayer'),   //播放器容器元素
    listFolded: false,                              //列表默认折叠
    listMaxHeight: 90,                              //列表最大高度
    //lrcType: 3,                                     //此为歌词格式，没有歌词可以直接删掉这一行
	mini: false,                                     //迷你模式
    autoplay: true,                                 //自动播放
    theme: '#FADFA3',                               //主题色
	loop: 'all',                                    //音频循环播放, 可选值: 'all'全部循环, 'one'单曲循环, 'none'不循环
    order: 'list',                                 //音频循环顺序, 可选值: 'list'列表循环, 'random'随机循环
    preload: 'auto',                               //预加载，可选值: 'none', 'metadata', 'auto'
    volume: 0.7,                                   //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
    mutex: false,                                    //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
	audio: [                                        //音频信息
        {
            name: '大鱼',                           //音频名称
            artist: '周深、郭沁',                       //音频艺术家
            url: '"http://lc-tguve1gk.cn-n1.lcfile.com/47b5548df9c80bba84f4/%E5%91%A8%E6%B7%B1%E3%80%81%E9%83%AD%E6%B2%81%20-%20%E5%A4%A7%E9%B1%BC%20%282017%E4%B8%AD%E5%9B%BD%E6%96%B0%E6%AD%8C%E5%A3%B0%E7%AC%AC%E4%BA%8C%E5%AD%A3%E7%AC%AC%E5%8D%81%E6%9C%9F%E7%8E%B0%E5%9C%BA%E4%BC%B4%E5%A5%8F%29.mp3',                         //音频链接
            cover: 'http://lc-tguve1gk.cn-n1.lcfile.com/a9fff99abbddc8757d4b/%E5%A4%A7%E9%B1%BC.jpg',                     //音频封面
            //lrc: 'lrc1.lrc',                         //歌词
            theme: '#ebd0c2'                         //切换到此音频时的主题色，比上面的 theme 优先级高
        },
		{
            name: 'Something just like this',
            artist: 'Alex Goot _ Madilyn Bailey',
            url: 'http://lc-tguve1gk.cn-n1.lcfile.com/f3bee3260fa207648d34/Alex%20Goot%20_%20Madilyn%20Bailey%20-%20Something%20Just%20Like%20This.mp3',
            cover: 'http://lc-tguve1gk.cn-n1.lcfile.com/d21b8e3392433807b1e2/Something%20just%20like%20this.jpg',
            //lrc: 'lrc2.lrc',
            theme: '#46718b'
        }
    ]
});

部署

aplayer的样式设置好之后就可以把aplayer放在自己想要放置的位置上，放置代码如下：

<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

将放置代码放在不同的/themes/next/layout/xxx.swig文件内会有不同的效果。

每个人使用的主题不一样，要根据自己的主题去调试。例如我用的是next-mist主题，且喜欢放置在侧边栏。那么在/themes/next/layout/_marco文件夹下找到sidebar.swig文件。

如果要放置在侧边栏的友链下面,那么在sidebar.swig中找到if theme.links，将放置代码添加到endif之后。如下图：

如要放置到RSS下就在sidebar.swig中搜索if theme.rss，也是添加到endif之后。

我是选择放在了友链下方，如下图：

最终效果如下图：

制作音乐/图片外链

正如之前为博客添加评论及统计功能的时候，我们使用了LeanCloud，制作音乐/图片的外链同样也可以使用它。

注册、登陆的步骤在之前的文章里已经描绘过了，这里不再详述，我们直接步入正题。

到你创建的应用里面去，点击存储，如下图。点击_File，点击上传，找到你下载好的音乐文件和音乐图片上传上去就行了。

上传之后刷新页面，将列表向后拉，就可以看到对应的音乐和图片的url连接了。