[TOC]

为什么会写hexo添加音乐播放器呢？初衷是有粉丝私信总是问我的博客中音乐播放器是怎么添加的。所以还是写一下，毕竟不是一两句话可以描述清楚。

Hexo个人博客添加APlayer音乐播放器功能

一、效果图

音乐播放器效果地址： https://enfangzhong.github.io/

二、引入APlayer音乐播放器

2.1 下载APlayer源码

APlayer源码下载地址：https://github.com/MoePlayer/APlayer

2.2 将源码放到next主题的source文件夹中

下载到APlayer源码压缩包，解压后把dist文件夹复制到\themes\next\source目录中。

2.3 放入自己喜欢的音乐

在dist目录里，新建music.js文件，并把如下代码粘贴进去。

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
	{
        name: "平凡之路",
        artist: '朴树',
        url: 'http://www.ytmp3.cn/down/59211.mp3',
        cover: 'http://p1.music.126.net/W_5XiCv3rGS1-J7EXpHSCQ==/18885211718782327.jpg?param=130y130',
      },
	  {
        name: '这些民谣 - 一次听个够',
        artist: '翁大涵',
        url: 'http://www.ytmp3.cn/down/60222.mp3',
        cover: 'http://p2.music.126.net/Wx5GNJEpay2JbfVUJc4Aew==/109951163094853876.jpg?param=130y130',
      },
      {
        name: '你的酒馆对我打了烊',
        artist: '陈雪凝',
        url: 'http://www.ytmp3.cn/down/59770.mp3',
        cover: 'http://p1.music.126.net/LiRR__0pJHSivqBHZzbMUw==/109951163816225567.jpg?param=130y130',
      },
	  {
        name: 'Something Just Like This',
        artist: 'The Chainsmokers',
        url: 'http://www.ytmp3.cn/down/50463.mp3',
        cover: 'http://p2.music.126.net/ggnyubDdMxrhpqYvpZbhEQ==/3302932937412681.jpg?param=130y130',
      },
      {
        name: 'Good Time',
        artist: 'Owl City&Carly Rae Jepsen',
        url: 'http://www.ytmp3.cn/down/34148.mp3',
        cover: 'http://p1.music.126.net/c5NVKUIAUcyN4BQUDbGnEg==/109951163221157827.jpg?param=130y130',
      }
    ]
});

2.4在next主题下的layout中引入APlayer音乐播放器源码

在\themes\next\layout_layout.swig文件中，里新增如下代码：

<!-- 加入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>

2.5 重新部署

在blog目录下开启重新部署命令：

hexo c && hexo g -d