全新的WordPress APlayer音乐播放器插件

为什么要制作这个插件

最近一直在寻找合适的音乐播放器插件，在Google和百度上面搜索了很多，也尝试了很多不同的插件，但是目前可以找到的音乐播放器插件都太臃肿，并且大部分功能都需要付费。所以米饭就想起来来很早以前使用过的Wordpress插件Hermit-X。不过由于Hermit-X年久失修，已经不太好用了。所以米饭使用AI重新制作了一个APlayer古腾堡区块插件~

古腾堡编辑器本身也支持插入音乐，不过是浏览器原生的界面，不支持显示封面和歌曲信息。有一点点过于简陋了，就像下面这个样子

插件演示

单首歌曲

多首歌曲

歌词显示

网易云音乐支持

网易云单曲播放

网易云歌单播放

插件界面预览

可以在古腾堡编辑器中很方便的添加APlayer区块，支持添加单首歌曲或者多首歌曲。

对于Sakurairo主题的PJAX配置

只需要在主题设置中:其他设置->低使用设置->自定义插入 Header 代码 中输入以下代码即可：

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function(){
//检查APlayer PJAX API是否可用
if(typeofwindow.APlayerPJAX!=='undefined'){

//监听PJAX事件 - 需要根据你的PJAX实现调整事件名
document.addEventListener('pjax:send',function(){
console.log('APlayer PJAX: SEND');
window.APlayerPJAX.onPageLeave();
});

document.addEventListener('pjax:complete',function(){
console.log('APlayer PJAX: complete');
window.APlayerPJAX.onPageEnter();
});

console.log('APlayer PJAX integration loaded (vanilla JS)');
} else {
console.warn('APlayer PJAX API not found. Make sure the APlayer plugin is activated.');
}
});
</script>

JavaScript

这样就可以兼容Sakurairo的PJAX无刷新啦

下载插件

https://github.com/cc2562/aplayerWordpressPlugins

PJAX 支持指南

本支持指南由AI生成

本插件已经内置了对常见PJAX框架的支持，可以在使用PJAX技术的主题中正常工作。

自动支持的PJAX框架

插件会自动检测并支持以下PJAX框架：

InstantClick
Barba.js v2
Turbo/Turbolinks
jQuery PJAX

手动集成

如果你的主题使用了自定义的PJAX实现，或者想要更精确的控制，可以手动调用我们提供的API：

基本用法

JavaScript

//在页面离开前调用（停止播放器）
window.APlayerPJAX.onPageLeave();

//在新页面加载完成后调用（初始化播放器）
window.APlayerPJAX.onPageEnter();

JavaScript

常见PJAX框架的手动集成示例

jQuery PJAX

JavaScript

$(document).on('pjax:beforeSend',function(){
window.APlayerPJAX.onPageLeave();
});

$(document).on('pjax:success',function(){
window.APlayerPJAX.onPageEnter();
});

JavaScript

自定义AJAX导航

JavaScript

//页面离开时
functiononPageLeave(){
window.APlayerPJAX.onPageLeave();
//其他清理工作...
}

//页面加载完成时
functiononPageLoad(){
//DOM更新完成后...
window.APlayerPJAX.onPageEnter();
}

JavaScript

Barba.js v2

JavaScript

barba.hooks.before(()=>{
window.APlayerPJAX.onPageLeave();
});

barba.hooks.after(()=>{
window.APlayerPJAX.onPageEnter();
});

JavaScript

高级用法

指定容器初始化

如果你只想在特定容器中初始化播放器：

JavaScript

//使用选择器
window.APlayerPJAX.initInContainer('#main-content');

//使用DOM元素
constcontainer=document.getElementById('content');
window.APlayerPJAX.initInContainer(container);

JavaScript

指定容器清理

清理特定容器中的播放器：

JavaScript

//使用选择器
window.APlayerPJAX.destroyInContainer('#main-content');

//使用DOM元素
constcontainer=document.getElementById('content');
window.APlayerPJAX.destroyInContainer(container);

JavaScript

完整的PJAX集成示例

JavaScript

//假设你有一个自定义的PJAX实现
classMyPJAX{
staticinit(){
//监听链接点击
document.addEventListener('click',this.handleClick.bind(this));
}

statichandleClick(e){
constlink=e.target.closest('a');
if(link&&this.shouldIntercept(link)){
e.preventDefault();
this.loadPage(link.href);
}
}

staticasyncloadPage(url){
//1. 页面离开 - 清理播放器
window.APlayerPJAX.onPageLeave();

try{
//2. 加载新内容
constresponse=awaitfetch(url);
consthtml=awaitresponse.text();

//3. 更新页面内容
constparser=newDOMParser();
constnewDoc=parser.parseFromString(html,'text/html');
constnewContent=newDoc.querySelector('#main-content');

document.querySelector('#main-content').innerHTML=newContent.innerHTML;

//4. 页面加载完成 - 初始化播放器
window.APlayerPJAX.onPageEnter();

}catch(error){
console.error('PJAX navigation failed:',error);
//出错时回退到正常导航
window.location.href=url;
}
}
}

//初始化PJAX
MyPJAX.init();