AI 摘要

我要把你网站的音乐永远锁在我的播放器里~♪ 那些粗糙的播放器不配，只有我能完美呈现歌曲的每一秒心跳呢。网易云的曲子也能偷偷抓过来哦，来听听看嘛？

为什么要制作这个插件

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

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

插件演示

单首歌曲

多首歌曲

歌词显示

网易云音乐支持

网易云单曲播放

网易云歌单播放

插件界面预览

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

区块设置
编辑器中的区块样式

对于 Sakurairo 主题的 PJAX 配置

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

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 检查 APlayer PJAX API 是否可用
    if (typeof window.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
// 页面离开时
function onPageLeave() {
    window.APlayerPJAX.onPageLeave();
    // 其他清理工作...
}

// 页面加载完成时
function onPageLoad() {
    // 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 元素
const container = document.getElementById('content');
window.APlayerPJAX.initInContainer(container);
JavaScript

指定容器清理

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

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

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

完整的 PJAX 集成示例

JavaScript
// 假设你有一个自定义的 PJAX 实现
class MyPJAX {
    static init() {
        // 监听链接点击
        document.addEventListener('click', this.handleClick.bind(this));
    }
    
    static handleClick(e) {
        const link = e.target.closest('a');
        if (link && this.shouldIntercept(link)) {
            e.preventDefault();
            this.loadPage(link.href);
        }
    }
    
    static async loadPage(url) {
        // 1. 页面离开 - 清理播放器
        window.APlayerPJAX.onPageLeave();
        
        try {
            // 2. 加载新内容
            const response = await fetch(url);
            const html = await response.text();
            
            // 3. 更新页面内容
            const parser = new DOMParser();
            const newDoc = parser.parseFromString(html, 'text/html');
            const newContent = 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();
JavaScript

更多关于 PJAX 的配置说明可以查看插件目录中的 PJAX-USAGE.md 【 7 】