404's Studio.

在 Hexo 中加入 Aplayer 播放器

字数统计: 336阅读时长: 1 min
2019/07/18
loading

本想加入网易云音乐的插件,但是由于强迫症始终不满意,直到我找到了 Aplayer 插件。

效果

准备

进入 Aplayer 网页,下载 GitHub 压缩包并解压,将其中的 dist 文件夹移动到\themes\你的主题\source目录下

修改

  1. 在 dist 目录中,新建music.js文件,并将如下代码粘贴进去

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
    {
    name: "心做し",
    artist: 'papiyon',
    url: 'http://music.163.com/song/media/outer/url?id=29747157.mp3',
    cover: 'http://p1.music.126.net/DeLlqBZXRBBrVPw_ahUl5g==/3239161256372551.jpg',
    },
    {
    name: 'aLIEz',
    artist: 'mizuki / SawanoHiroyuki[nZk]',
    url: 'http://music.163.com/song/media/outer/url?id=29307041.mp3',
    cover: 'http://p2.music.126.net/FahHKWzpgA5t9hIaj4kbBQ==/6649846324993045.jpg',
    },
    {
    name: 'LOSER',
    artist: '米津玄師',
    url: 'http://music.163.com/song/media/outer/url?id=512359195.mp3',
    cover: 'http://p2.music.126.net/A-VUmkAaUVQ88iXBrsbQ1A==/109951163561900568.jpg',
    }
    ]
    });
  2. \themes\你的主题\layout\layout.ejs文件中,新增如下代码

    1
    2
    3
    4
    5
    <!-- 音频播放 -->
    <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>

重新发布后便能在网页左下角看到播放器,其它可参考 Aplayer 中文文档

CATALOG
  1. 1. 效果
  2. 2. 准备
  3. 3. 修改