0%

Hexo next主题中添加播放器Aplayer

发表于 分类于 | 字数： 604 Changyan：
本文字数： 2.1k 阅读时长 ≈ 2 分钟

下载

  • 首先，先下载Aplayer源码：APlayer

dist文件夹

  • 再将文件中的dist文件夹复制到路径：blog/themes/next/source（我的next版本是7.5）

新建music.js

  • 在目录blog/themes/next/source/dist下添加music.js文件
    内容是：

1
const ap = new APlayer({
2
    container: document.getElementById('aplayer'),
3
    fixed: true,
4
    autoplay: true,
5
    audio: [
6
	  {
7
        name: '勇气',
8
        artist: '棉子',
9
        url: 'http://music.163.com/song/media/outer/url?id=1411358329.mp3',
10
        cover: '/images/5.jpg',
11
      },
12
      {
13
        name: "星星",
14
        artist: '张杰',
15
        url: 'http://music.163.com/song/media/outer/url?id=1399004693.mp3',
16
        cover: '/images/xingxing.jpg',
17
      },
18
      {
19
        name: '这就是爱吗',
20
        artist: '十豆',
21
        url: 'http://music.163.com/song/media/outer/url?id=1412242872.mp3',
22
        cover: '/images/zjsam.jpg',
23
      },
24
      {
25
        name: 'Alone',
26
        artist: 'Alan Walker / Noonie Bao',
27
        url: 'http://music.163.com/song/media/outer/url?id=444269135.mp3',
28
        cover: '/images/alone.jpg',
29
      },
30
	  {
31
        name: 'Umbrella (Matte Remix)',
32
        artist: 'Matte / Ember Island',
33
        url: 'http://music.163.com/song/media/outer/url?id=164209623.mp3',
34
        cover: '/images/1.jpg',
35
      },
36
	  {
37
        name: '大眠 (完整版)原唱：王心凌',
38
        artist: '小乐哥',
39
        url: 'http://music.163.com/song/media/outer/url?id=3778678.mp3',
40
        cover: '/images/2.jpg',
41
      },
42
	  {
43
        name: '世间美好与你环环相扣',
44
        artist: '柏松',
45
        url: 'http://music.163.com/song/media/outer/url?id=1363948882.mp3',
46
        cover: '/images/3.jpg',
47
      },
48
	  {
49
        name: '飞',
50
        artist: '王恩信Est / 二胖u',
51
        url: 'http://music.163.com/song/media/outer/url?id=1386259535.mp3',
52
        cover: '/images/4.jpg',
53
      }
54
    ]
55
});

注：里面的代码可以修改，歌曲信息需要手动添加：

  • name：歌曲名称
  • artist：作者
  • url：连接（具体怎样操作看下面步骤）
  • cover：是图片连接，可以是本地图片，也可以是在线图片，本地放在source/images然后修改路径即可

url添加歌曲方法

  • 网易云网页播放一首歌曲
  • 将网址中的id复制例：https://music.163.com/#/song?id=1411358329
  • 将下面代码中的id修改为你想添加歌曲的id：http://music.163.com/song/media/outer/url?id=.mp3

修改文件_layout.swig

在路径：blog/themes/next/layout下找到_layout.swig文件，然后将下面的代码添加到：<body itemscope ...>在body里面就可以

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

结语

然后hexo g再hexo d在网页的左下角就可以看到了，大功告成！

-------------本文结束感谢您的阅读-------------
#