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

为什么要制作这个插件

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

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

音频预览: 灰色岁月

插件演示

单首歌曲

[APlayer 演示: 灰色岁月 - 塞壬唱片-MSR/Robert Wolf]

多首歌曲

[APlayer 演示: 最后的831 (万人合唱版), 灰色岁月]

歌词显示

[APlayer 演示: 最后的831 (万人合唱版) - 含歌词滚动]

网易云音乐支持

网易云单曲播放

[APlayer 演示: 网易云单曲 (ID: 2705381279)]

网易云歌单播放

[APlayer 演示: 网易云歌单 (ID: 13543387960)]

插件界面预览

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

> decode 1750252080-IMAGE-268X1024.AVIF██████░░░░ LOADING_

> decode 1750252302-IMAGE-1024X289.AVIF██████░░░░ LOADING_

对于Sakurairo主题的PJAX配置

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

<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>

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

下载插件

https://github.com/cc2562/aplayerWordpressPlugins

PJAX 支持指南

本支持指南由AI生成

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

自动支持的PJAX框架

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

• InstantClick
• Barba.js v2
• Turbo/Turbolinks
• jQuery PJAX

手动集成

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

基本用法

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

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

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

jQuery PJAX

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

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

自定义AJAX导航

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

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

Barba.js v2

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

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

高级用法

指定容器初始化

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

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

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

指定容器清理

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

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

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

完整的PJAX集成示例

// 假设你有一个自定义的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();

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