为站点添加Aplayer全局播放器（两种布局方案）

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 964 阅读时长 ≈ 4 分钟

Aplayer是一个基于JavaScript的播放器插件，而MetingJs则是基于Aplayer插件封装好的插件，开箱即用。

起初在博客中添加Aplayer播放器时，是准备把它加入到侧边栏中，但是效果并不好。播放器控件可能会有显示不完整的问题，并且在呼出与关闭侧边栏时，会有卡顿的现象。对于我现在使用的Next主题来说，将播放器置于页面左下角是比较好的选择。下面介绍两种播放器的布局方案，并提供实现全局效果（切换页面而不打断音乐播放）的方案。

添加到侧边栏

以Next主题、添加网易云音乐歌单为例。打开主题目录：themes\next\layout\_macro\sidebar.swig找到sidebar-inner，复制下面代码粘贴到此<div>标签后即可。其中，data-id=””的双引号中填写歌单或者歌曲的id。（在Next 8.0之后的版本中，模板引擎发生变化，因此文件后缀由swig变为njk）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<aside class="sidebar">
    <div class="sidebar-inner">   //从下面开始复制，粘贴到这里
<!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <!-- require MetingJS-->
    <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script> 
	<!--网易云-->   
    <div class="aplayer" 
      data-id=""
      data-server="netease" 
      data-type="playlist" 
      data-fixed="false" 
      data-autoplay="false" 
      data-list-folded="true"
      data-mutex="true"
      data-order="random" 
      data-loop="all"
      data-volume="0.4" 
      data-theme="#FADFA3" 
      date-preload="auto" > 
    </div>

添加到Page左下角

以Next主题、添加网易云音乐歌单为例。打开主题目录：themes\next\layout\_layout.swig，将下列代码粘贴于body或其他合适位置。其中，id=””的双引号中填写歌单或者歌曲的id。（在Next 8.0之后的版本中，模板引擎发生变化，因此文件后缀由swig变为njk）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<div>
<meting-js 
	server="netease" 
	type="playlist" 
	id=""
	fixed="true" 
	autoplay="false"
	loop="all"
	order="random"
	preload="auto"
	list-folded="ture"
	list-max-height="500px"
	lrc-type="1">
</meting-js>	
</div>

此方法同样适用于使用WordPress、Typecho等框架搭建的站点。

相关属性及其参数请看下表。

optiondefaultdescription
idrequiresong id / playlist id / album id / search keyword
serverrequiremusic platform: netease, tencent, kugou, xiami, baidu
typerequiresong, playlist, album, search, artist
autooptionsmusic link, support: netease, tencent, xiami
fixedfalseenable fixed mode
minifalseenable mini mode
autoplayfalseaudio autoplay
theme#2980b9main color
loopallplayer loop play, values: ‘all’, ‘one’, ‘none’
orderlistplayer play order, values: ‘list’, ‘random’
preloadautovalues: ‘none’, ‘metadata’, ‘auto’
volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutextrueprevent to play multiple player at the same time, pause other players when this player start play
lrc-type0lyric type
list-foldedfalseindicate whether list should folded at first
list-max-height340pxlist max height
storage-namemetingjslocalStorage key that store player setting

使用 Pjax 实现全局播放背景音乐

我们实现全局播放时需要用到Pjax，Pjax是一个结合pushState和ajax技术的jQuery插件，使用它就可以实现异步改变URL内容和无刷新改变页面内容，使得浏览体验变得更为流畅快速。

事实上，8.0以上的Next已经自集成了Pjax，只需要在其配置文件中将Pjax项的值改为true。打开主题配置文件_config.yml，将pjax的值改为true。

1
2
3
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true

否则可打开主题目录：themes\next\layout\_layout.swig，在head中添加以下代码。

1
2
3
4
5
6
<head>   //粘贴到这里
    
  <!--pjax：防止跳转页面音乐暂停-->
  <script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.js"></script> 
</head>

如果主题没有集成Pjax，需要先安装Pjax，再对其进行启用，原理是一样的。

在git bash（或其他命令窗口）中执行

1
hexo clean && hexo g && hexo s

以查看效果。

参考