APlayer在Puock主题服服帖帖实现方法

共计 2481 个字符，预计需要花费 7 分钟才能阅读完成。

提醒：本文最后更新于 2023-01-23 12:00，文中所关联的信息可能已发生改变，请知悉！

前言

如果你觉得网站加个音乐播放很不错的话，可以像我一样折腾折腾，先上两张图：

这个 HTML5 音乐播放器，是我的播放器的主体部分

APlayer

• 支持国内五大音乐平台（网易云、QQ、虾米、百度、酷狗）的单曲 / 专辑 / 歌单播放
• 简单快捷，复制音乐详情页面网址的某个数据，后台自动生成播放代码
• 支持自定义歌曲播放

步骤

接下来我就跟大家说如何在 Puock 主题内将 APlayer 治得服服帖帖

外观 - 主题文件编辑器

打开“外观 - 主题文件编辑器”，找到 header.php，并找到

这一行代码，大概在偏末尾的位置，紧挨着这一行代码之前放入下面代码

<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

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 里的，结果不管用

这个具体效果就是在窄窗口下，不会显示专辑封面，不影响阅读

在前面引入下面 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.cloudflare.com/ajax/libs/jquery.pjax/1.9.0/jquery.pjax.js"></script>
<!-- 替换的容器 -->
<script type="text/javascript">
$(document).pjax('a', '#page', {fragment:'#page', timeout:8000});
</script>

后续

当然，Puock 主题在使用这个播放器的时候还是有些问题，譬如切换页面或者切换文章的时候，音乐会直接被刷新掉

这个问题我还没找到解决方案，看网上说可以用什么 Pjax 无刷新加载，但是我也不会这个操作呀，尽管主题带有 页面无刷新加载