next主题添加音乐播放器

添加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-------------