ABCP，专业级 A/B 音频对比播放器插件

ABCP 是一款专为音频行业打造的 WordPress 插件，让你可以在网页中轻松实现 A/B 音频对比播放。

无论你是：

• 音频工程师
• 混音师
• 母带工程师
• 音频插件开发者
• 音频教学内容创作者
• 音频产品展示网站

ABCP 都能让你的内容更专业、更直观、更具说服力。

为什么选择 ABCP？

好听！专业的 A/B 对比体验

不，ABCP 只是一款纯粹的网页播放器，它并不会美化任何声音。但它直观，简单，好“听”！

为什么我们需要一款 A/B 音频对比播放器？因为在专业音频领域，存在大量需要对比试听才能感受到区别的案例，尽管业界已经有了很多功能雷同的硬件软件和插件，但它们无法应用于网站展示中。如果你正运维着一个音频类网站，ABCP 播放器刚好能填补这一片的空缺。

• 如果你是录音师混音师，ABCP 能帮助你迅速向用户展示你的专业技巧，音乐从平庸变得闪光，就在 A/B 切换的那一刻。
• 如果你是作曲家或编曲师，通过 ABCP 能快速展示简单旋律草稿和丰满的配器后的听觉对比，让你的才华充分展现。
• 如果你是歌手、播客，ABCP 是表现你声音魅力的最好出口，两种情绪的对比能让听众感受到你的极致潜力。
• 如果你是音频软件的开发者，ABCP 正是你需要摆放在网站前台的广告牌。仅仅一个切换，你的产品所带给平凡声音的美妙点睛，能一下抓住所有用户的听觉吸引力。

你负责让音乐“好”听，ABCP 负责让音乐好“听”

好看！完全可自定义的外观

尽管 ABCP 使用了时尚明快的配色，几乎适用于所有场景，但你依然可以通过无限的配色组合来搭建属于你自己的 ABCP 播放器。

不喜欢默认色调？随便改！

在 Settings 页面中，播放器的背景、按钮、激活与播放状态、文件标题和时间状态的字体大小，都可以自由定制。所有样式都通过 CSS 变量驱动，轻量且高效。

所见即所得，改到满意为止！

更关键的是，所有对于样式的调整，你都可以直观的从 Settings 中的播放器样式预览中看到，而不是盲猜。你的网站无论是什么色系，ABCP 都能被你改造为完全契合的色调。

现在就动手为你的网站配色搭建一套专属于你的 ABCP 播放器吧。

好用！后台前台一气呵成

使用简码 [abcp a=""]

[abcp a="https://yoursite.com/audio/混音前.m4a" b="https://yoursite.com/audio/混音后.m4a"]

[abcp a="混音前.m4a" b="混音后.m4a"]

是不是简单又好用？

ABCP 实例展示

功能亮点

● A/B 音频同步播放，随意切换

ABCP 最核心的功能，就是双文件同时播放，在同一个时间轴上切换 AB 信号，从而达到在不破坏音乐性的情况下，监听两个音频的处理区别。ABCP 也支持不同时长的音乐搭配，并不会限制使用方式。

● 进度条拖放控制

和大部分播放器一样，ABCP 支持进度条拖放。某个细节没听清？拖回去再听一遍。

● 文件名同步切换

在按下 A 或 B 按钮时，其相关的文件名也同步切换。你永远不会在切换时弄混谁是谁。

● 多实例同时调用

ABCP 可以在同一篇文章或页面内插入多个实例，以获得多种不同搭配的音频对比试听。你可以在一篇文章中将不同阶段的效果前和效果后全部插入，达到和完整教学一样细致的程度。

● 移动端适配

ABCP 为不同宽度的浏览器适配了多种自适应边框，不论从何处浏览，它的样子都不会变得奇奇怪怪。

● 可全面定制

不论你的网站色调是黑金，还是红白，还是百搭灰，ABCP 的 settings 页面中包含了各个元素的颜色与字体自定义，让播放器与你的网站融为一体。

● 支持主流音频格式

ABCP 是一款基于浏览器的插件播放器，只要浏览器支持的格式如 MP3\M4A\AAC\WAV\*OGG\*FLAC 等，ABCP 都完全支持。*：需要注意的是，OGG 与 FLAC 格式在 Safari 浏览器中不被支持。

开始使用

• 下载 ABCP.zip
• 在 WordPress 后台：插件管理中打开 zip 并安装
• 在插件目录中启用 ABCP
• WordPress 左侧菜单栏将显示 ABCP 菜单
• 进入 Builder 可选择曲目并生成播放器代码
• 将代码贴入文章并发布文章，即可使用播放器
• 进入 Settings 可调整播放器样式
• 进入 User Guide 可查阅更细致的使用说明

开发后记

如果你也是一名专业的音频从业者，你肯定跟我一样，对音频软件中的 AB 对比功能非常了解。不论是我们常见的软件内置的 Delta 监听（用来监听效果前后的差值），还是 ADPTR Metric AB 这类直接对比音乐成品的软件，它们都能帮助我们快速找到虽然内容一样，声音却存在差异的地方。这类软件对于帮助我们找到并解决问题起了莫大的帮助。

AB 对比功能对于直接宣传我们的技术能力也有极大的推动作用。很简单，我们看到的那些音频大 V 们，在录屏中直接展示各类效果器或修音混音的前后对比，实际上就是广义化的 AB 对比。一些大型的制作室，它们的混音室还会摆放几套不同的音响，用来在回放时进行 AB 对比，也是同一个道理。

直接让用户听到区别，这是音频技术中最硬核也是最关键的技术。当你点击切换的那一下，音频从地狱切换到天堂那一瞬间带给人的听觉冲击，就是最直观的展示，远胜过文字的堆砌。

而音频领域的 AB 对比软件或插件，实际上已经足够多了，或者说，几乎所有软件都有着直接或间接的 AB 对比功能，比如 Delta 或 Bypass，或者 Dry/Mix。

然而，作为独立音频类网站的拥有者和管理者，不知道你和我有没有类似的共鸣，那就是：我们很难找到简单好用的网页版的 AB 对比播放器。

我从架设 smpiggy.com 网站开始，就尝试过一些 WordPress 内置或第三方嵌入式的播放器插件，就我看来，似乎没有这一类的播放器。大多数播放器都属于单一音轨播放，只不过带有很多华丽的周边功能，比如将几首曲目编排为专辑，能进行更精致的排版，能添加封面，带有波形视觉反馈什么的。然而缺乏我们最为重视的，AB 切换播放功能。

其实，AB切换播放对于插件来说相当简单，它只需要在点击播放时，同时开始播放两首音频文件即可，我们只需要按下 A 或 B 按钮，来激活当前音频的声音，就这么简单。

当然，尽管当时没有找到这类 AB 对比播放器，但生活并不会毁灭。我的网站依然可以通过普通的单轨回放来完成大部分内容的编写与展示。

不过，就在前几天，我在无聊的状态下跑去 iZotope 网站转了一圈，打算看看新闻。我找到某个插件页面，点击它那个独特的 “before / after” 播放器的按钮，突然想到了，我要不要自己试试做一个类似的 AB 对比插件呢？

说到这里，你肯定很好奇，原来 smpiggy 还是一个厉害的编程大师啊。哈哈哈，并不是。

我必须先坦白一点，我是完全的代码和语言小白。尽管我通过制作网站学会了一些皮毛的css样式编辑，但语言、函数、js 脚本这些什么的我都是当外星文字来看的。这也是为什么我在最初制作网站时，缺少 AB 对比插件，却没有想过自己动手做的原因。

但现在不同了，随着 AI 时代的到来，很多敢想不敢做的事情，AI 都能帮我们搞定了。它能写文章，拍假照片和假视频，写歌编曲，和编程。

对哦！AI 也可以编程！我大力的拍了拍我这略微迟钝的脑袋。

所以我就直接在 iZotope 的页面中打开了浏览器右侧的 Copilot（没错我用的是 Edge），我问它，你可以做出一个类似于 iZotope 这类音频对比插件吗？它回复我说，当然可以，这很简单……

三天两夜的奋战后……

ABCP 诞生了。当然整个插件的发展过程并不像 Copilot 说的那么简单，中途由于它的一致性缺失，这个插件的脚本一度毁灭了两次（我被它误导以后贴错了代码位置，它自己也忘记了代码应该调用的参数名称等而不得不从头再来），我甚至一度对这个完全没有情绪的人工智能产生了愤怒，但我和 Copilot 还是在持续的合作下，完成了对 ABCP 的打造。

我的作用？

很多人觉得现在的事情，只要有 AI，就统统丢给 AI，它自然会做出相当好的产品来。我一开始也是这么认为的，当 Copilot 回复我“这很简单”时，我将一切都想的很容易。

但实际上并非如此。AI 通常有基础的美感，和优秀的编程能力，但它最大的问题，就是缺乏一致性，或者说缺乏长效记忆。

在编写插件代码的过程中，我必须不断的提出要求，让 Copilot 理解我的需求，然后将 Copilot 撰写的代码反过来贴到插件的 php 文件中。这意味着，当我在看到插件运行实例后，产生的任何与预期不符的问题，我都需要反馈给 Copilot，然后将它改写的部分代码，复制并粘贴到 php 文件中需要替换的部分。

当前版本的 ABCP 的 php 文件代码字数达到了 23000 多个（不计空格），这还不包含样式表 css 文件和 js 脚本文件，可想而知要在这些对我来说是外星文字的文本中找到并替换部分代码，真可比做大海捞针。

比如在 Settings 页面中那个预览的播放器样式，我和 Copilot 就进行过无数次的调整，甚至进行过无数次无意义的调整，因为我们在后台看到的 Iframe 框架的播放器，即使能直观的反应我们对样式的修改，但一旦我们到了前台调用播放器实例时，ABCP 实例又会因为被 WordPress 和 Elementor 主题的权限所覆盖，而显示出完全不同的视觉效果。

很多时候，为了一个小小的调整，Copilot 给了我一个新版的 css 样式表，但等我复制到 css 文件中去时，才发现，Copilot 已经忘记了前面设定的调用参数的名称，很多参数名字完全无法对接，整个插件编码崩溃。

我最害怕的就是，Copilot 有时候突发奇想，它会给出胡乱的建议，比如建议我在什么 admin.php 文件中贴入一段什么代码。这时候通常是我最绝望的时候，因为我的文件架构中从来就没出现过一个 admin.php 文件。我的绝望也因为，当 Copilot 给出这种建议的时候，通常意味着它已经忘记了前面我反复要求它记住的我的文件架构。这时候的 Copilot，甚至连维护一点点小错误都很难做到了，我必须重新将我的 php 文件，用分段的方式再喂给它一遍，让它拾取部分记忆。

尽管我完全不懂编程和代码，但我必须作为一个阶段式的测试员，不停的接住 Copilot 递过来的外星文字，完成实地的勘查与勘误。我还必须保持自己的警醒，从 Copilot 的闪烁其词或满口大忽悠中，找到它濒临崩溃的前兆，并及时将它拉回来。

如果将 AI 一辆车，它将我从 A 点运送到了 B 点，它无疑是最大的功臣。但我却是一名司机，我全程都不敢眯眼，因为我稍不留神，这辆车就突然找了个服务区下路了。

同时，我不能完全不懂程序逻辑。Copilot 所解释的代码编写原则与原因，我需要至少能听懂三成，这样我才不至于从高速切换到国道，还乐呵呵的陪跑。一些可以凭逻辑感知到的错误，我也可以更直接的反馈给 Copilot，让它知道我并不是好蒙骗的，从而更有效的解决问题。

简单的说，Copilot 是内行，我是外行，但我这个外行，还要时不时的给内行擦屁股。话糙理不糙对吧。

总而言之

ABCP 插件的创造，与其说是一款产品的诞生，倒不如说是我对 AI 的依赖度和它的能力有了更清晰的认识。

我们所面对的 AI 时代，大部分人其实都只是在使用 AI 智慧的边角料来满足娱乐。但通过这次我与 Copilot 的合作，让我切身体会到了未来 AI 能够取代某些职业的危机感。今天，我可以利用 AI 来做一款网页插件，明天我也许就能让 AI 帮我制作一款音频效果器插件，后天也许就能让 AI 帮我创作一款手机 APP。那些说 AI 无所不能的传言，我现在完全信服了。

然而，AI 也存在局限性。就像我与 Copilot 合作的过程一样，如果缺乏人的监管，它会跑偏，会没有根据的突发奇想，这也是现在一个新生词的来源：“AI 幻境”。由于 AI 无法理解我们的视觉听觉触觉感官，因此它其实根本不知道它创作的产物在现实世界中的形象，所以它极度依赖人类的不断反馈。而真正有效的反馈，又来源于人的知识面。这又成为了 AI 无比强大的反方观点。在这个观点中，人类占据着无法取代的主导性。

最后，我想感谢这个与我共同经历了三天两夜的伙伴：Copilot。它的智慧，和我的远见（请允许我自夸一下），一起成就了这款优秀的 AB 对比音频插件 —— ABCP！