共计 2481 个字符，预计需要花费 7 分钟才能阅读完成。
提醒：本文最后更新于 2023-01-23 12:00，文中所关联的信息可能已发生改变，请知悉！
前言
如果你觉得网站加个音乐播放很不错的话，可以像我一样折腾折腾，先上两张图：
这个 HTML5 音乐播放器，是我的播放器的主体部分
APlayer
- 支持国内五大音乐平台（网易云、QQ、虾米、百度、酷狗）的单曲 / 专辑 / 歌单播放
- 简单快捷，复制音乐详情页面网址的某个数据，后台自动生成播放代码
- 支持自定义歌曲播放
步骤
接下来我就跟大家说如何在 Puock 主题内将 APlayer 治得服服帖帖
外观 - 主题文件编辑器
打开“外观 - 主题文件编辑器”，找到 header.php，并找到
<div id="mobile-menu" class="d-none">这一行代码，大概在偏末尾的位置，紧挨着这一行代码之前放入下面代码
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="tencent" type="playlist" id="2732740880" autoplay="false" fixed="true" mini="true" order="random" loop="all" preload="auto" volume="0.6" mutex="true" list-folded="false">
</meting-js>给大家解释一下我这么多参数的意义
server="tencent" 指定音乐平台为 QQ 音乐，type="playlist" 指播放音乐来源类型，
id="xxxxxxxxxx" 为歌单的 id（这里的 id 为打开音乐歌单，网址显示的 id），打开网页自动播放autoplay="false"，
开启吸底模式 fixed="true", 开启迷你模式 mini="true", 随机播放 order="random", 关闭底部歌词 lrc-type="0"
注意 ：id 需要为自己创建的歌单，不能为我喜欢的音乐；server 可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐) 等，下面表格没有实质性作用
参数太多了给你们 po 个网站 参数 – APlayer
| 参数项 | 参数值 | 说明 | 可选值 |
| fixed | true | APlayer 开启吸底模式，即现在左下角这个样子 | false，true |
| server | tencent | 即播放源平台，这里我选择的是 QQ 音乐 | netease, kugou, xiami,tencent, baidu |
| type | playlist | 音乐类型，这里我选择的是歌单 | song, playlist, album, search, artist |
| id | xxxxxxxxxx | id，由于我选择是歌单，这里便是歌单 id | |
| order | random | 循环模式，这里选择的是随机循环 | ‘list’, ‘random’ |
| preload | auto | 预加载，我选择的是自动（我也不知道自动有什么用） | ‘none’, ‘metadata’, ‘auto’ |
Puock 主题设置 - 脚本及样式 - 头部自定义全局 CSS 样式
找到这个地方，然后添加如下代码
/* aplayer 播放器在移动端 / 较窄窗口自动隐藏 */
@media only screen and (max-width: 900px) {
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {left: -66px !important;}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {left: 0px !important;}
}在想起来这个方法之前我试了 n 遍，我以为可以像其他主题一样放在 style.css 里的，结果不管用
这个具体效果就是在窄窗口下，不会显示专辑封面，不影响阅读
在 <body> 前面引入下面 js
<!--Wordress 博客网站使用 Aplayer 播放器与 Pjax 解决网页跳转时音乐重新播放 -->
<!--jquery-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<!--jquery.pjax.js-->
<script src="https://cdnjs.admincdn.com/jquery.pjax/1.9.0/jquery.pjax.js"></script>
<!-- 替换的容器 -->
<script type="text/javascript">
$(document).pjax('a', '#page', {fragment:'#page', timeout:8000});
</script>
后续
当然，Puock 主题在使用这个播放器的时候还是有些问题，譬如切换页面或者切换文章的时候，音乐会直接被刷新掉
这个问题我还没找到解决方案，看网上说可以用什么 Pjax 无刷新加载，但是我也不会这个操作呀，尽管主题带有 页面无刷新加载
