next主题添加音乐播放器

发表于 | 分类于
字数统计: 620 | 阅读时长 ≈ 2

添加APlayer播放器

原由

之前把播放器嵌在站点概览里，在手机端显示不了导致不能停止音乐

下载

项目地址下载解压后将dist文件夹复制到themes\next\source文件夹下

安装

在themes\next\source\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
26
27
28
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,   //吸底模式
    autoplay: true, //自动播放
    theme: '#FADFA3', //主题色
    loop: 'all', //音频循环播放, 可选值: 'all'全部循环, 'one'单曲循环, 'none'不循环
    order: 'random', //音频循环顺序, 可选值: 'list'列表循环, 'random'随机循环
    preload: 'auto', //预加载，可选值: 'none', 'metadata', 'auto'
    volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
    mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
    listFolded: false, //列表默认折叠
    listMaxHeight: 90, //列表最大高度
    lrcType: 0, //歌词传递方式
    audio: [
	{
        name: "思念是一种病",
        artist: '张震岳 / 蔡健雅',
        url: 'http://www.ytmp3.cn/down/50020.mp3',
        cover: 'http://p2.music.126.net/N61oLy0iLfEkZTHD2j87iA==/18693896697392706.jpg?param=130y130',
      },
	  {
        name: "这就是爱情",
        artist: '李代沫',
        url: 'http://www.ytmp3.cn/down/54477.mp3',
        cover: 'http://p1.music.126.net/RQBF9kqZb7PtLCaOxi9ngQ==/109951163053984533.jpg?param=130y130',
      },
    ]
});

源码中的参数可以参考官方文档

  • audio对应的便是音频文件，在里面添加音乐

音乐的外链可以去下面的网站搜索复制
音乐图片我是在网易云里搜索同一首歌曲找到的

运行程序

打开themes\next\layout\_layout.swig文件，将下述程序添加添加到< body itemscope … >后面就行，即在< body >< /body >里面

1
2
3
4
<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>

音乐外链

音乐网站1:www.170hi.com

网易云
打开网易云音乐，找到歌曲，复制网址的ID
比如：https://music.163.com/#/song?id=xxxx，id为xxxx，然后很简单把id放入下面的链接中
http://music.163.com/song/media/outer/url?id=ID数字.mp3
结果就是这样http://music.163.com/song/media/outer/url?id=xxxx.mp3

参考文章

-------------The End-------------