How to Add Before and After Audio Comparisons to WordPress

HexCoda A/B Audio Player makes Before and After audio comparisons easy to hear on WordPress. Visitors can switch between two aligned tracks at the same playback position, directly inside a mixing, mastering, restoration, podcast, or sound-design portfolio.

Let Clients Hear the Difference on WordPress

Audio professionals face a problem that images, testimonials, and carefully written service descriptions cannot fully solve: the value of the work is in the sound.

A finished master may sound polished, but a prospective client cannot hear how far it came from the original mix. A restored recording may sound clean, but the result means more when the listener can compare it with the noise, damage, or interference that came before. The same applies to podcast editing, sound design, music production, and audio software demonstrations.

That is why we built HexCoda A/B Audio Player, a focused WordPress plugin for synchronized Before and After audio comparisons.

HexCoda lets a visitor play one example and switch between two aligned audio tracks at the same playback position. Instead of opening separate files, starting two players, and trying to find the same moment, the listener can compare the corresponding passage with a single click.

The result is a clearer portfolio experience and a more convincing way to show what your work actually changed.

 A finished track shows the result, not the transformation. Most audio portfolios present only the finished work. That is useful for showing taste and overall quality, but it leaves an important question unanswered:

What did the engineer, producer, editor, or product contribute?

A Before and After comparison gives the listener context. It can reveal how a mix gained clarity, how a master improved balance and impact, how dialogue became easier to understand, or how a sound changed after processing.

The usual workaround is to place two audio players next to each other. Technically, both files are available, but the comparison is inconvenient. The listener must start one file, remember the passage, stop it, find approximately the same position in the second file, and repeat the process. Small differences become difficult to judge, especially on a phone.

An A/B audio player removes that unnecessary work. Playback begins once. When the visitor changes the selected version, the comparison continues at the same point in the audio.

This matters commercially because potential clients rarely study a portfolio with the patience of an audio engineer. The easier the difference is to hear, the easier the service is to understand.

What is HexCoda A/B Audio Player?

HexCoda A/B Audio Player is a WordPress audio comparison plugin that switches between two aligned audio files at the same playback position. It is designed for professionals and educators who use Before and After sound examples to demonstrate a transformation.

Each comparison is saved as a reusable WordPress player. Add the two audio sources, choose the labels and design, publish the player, and place it wherever it is needed.

HexCoda integrates with:

• The Gutenberg block editor
• Elementor Free-Elementor Pro is not required
• Flatsome UX Builder
• The Classic Editor
• Shortcode-compatible WordPress themes and page builders

The plugin supports MP3 and browser-compatible WAV files from the WordPress Media Library or public direct audio URLs. It also accepts Amazon S3, CDN, signed, query-string, encoded, and extensionless URLs without rewriting their tokens or parameters.

Built for work that needs to be heard in context

HexCoda was created for a specific job: making the difference between two versions easy to hear. That focused approach supports a wide range of audio businesses without turning the player into a playlist, music store, or audio-processing suite.

Mixing engineers

Place a rough mix or minimally processed production beside the completed mix. Prospective clients can hear changes in balance, separation, tone, depth, automation, and overall presentation without leaving your website.

Suggested labels: Rough / Final Mix or Before / After.

Mastering engineers

Compare the supplied mix with the completed master at matching moments. The example can help listeners understand changes in tonal balance, dynamics, translation, and presentation.

Suggested labels: Mix / Master.

When publishing mastering comparisons, use honest, well-prepared examples. Large loudness differences can dominate perception and distract from the work you intend to demonstrate.

Audio restoration and dialogue cleanup

Restoration is particularly well suited to Before and After presentation because the problem is often immediately recognizable. Compare the original recording with the restored version to demonstrate noise reduction, repair, de-clicking, de-reverberation, or improved intelligibility.

Suggested labels: Original / Restored.

Podcast editing

Show how raw dialogue changes after editing, cleanup, leveling, and processing. A short, rights-cleared example can communicate the value of professional podcast post-production more effectively than a list of technical services.

Suggested labels: Raw / Edited.

Music production and recording studios

Compare an early demo with the produced result, or a basic recording with the completed studio production. This helps separate the contribution of the producer or studio from the composition itself.

Suggested labels: Demo / Produced or Home Demo / Studio.

Sound design

Let visitors hear how a field recording, synthesized source, or unprocessed asset became a finished sound for a game, film, advertisement, or interface.

Suggested labels: Source / Final Design.

Audio plugins and hardware

Use synchronized examples to demonstrate an effect, processor, amplifier, microphone chain, or other audio product. Visitors can switch between the bypassed and processed versions without losing the musical phrase being evaluated.

Suggested labels: Bypass / Active or Dry / Processed.

Audio education

Create direct examples for EQ, compression, saturation, restoration, arrangement, sound design, or critical-listening lessons. Custom labels allow each player to use terminology that matches the lesson instead of being limited to Before and After.

Create once and place the player anywhere

HexCoda treats each audio comparison as a reusable player rather than a collection of settings that must be rebuilt on every page.

The basic workflow is straightforward:

1. In WordPress, open HexCoda A/B Audio and create a new player.
2. Select or enter the two aligned audio sources.
3. Choose the player design, labels, and initial source.
4. Publish the player.
5. Select that player in Gutenberg, Elementor, or Flatsome, or place it with the shortcode.

The shortcode format is:

Because the player is reusable, the same comparison can appear on a service page, portfolio page, case study, or blog article without entering the two source URLs again. Updates to that player remain centralized.

Multiple HexCoda players can appear on the same page. An optional global setting can pause the current HexCoda player when a visitor starts another, preventing multiple examples from playing over each other.

Designed to fit the website, not take it over. An audio portfolio should feel like part of the professional’s brand. HexCoda includes seven built-in player skins:

• Studio Dark
• Clean Light
• HexCoda Green
• Soft Ivory
• Ice Blue
• Midnight Indigo
• Graphite Amber

Global customization controls can establish a consistent default across the website. Individual players can override the design where a particular page or example needs a different presentation.

You can customize labels, colors, maximum width, corner radius, title visibility, time display, and the initially selected audio source. Labels can describe the real comparison-such as Mix / Master or Original / Restored, rather than forcing every use case into generic A and B terminology.

Use your own WordPress Media Library, S3 bucket, or CDN

HexCoda is a self-hosted WordPress plugin, not an audio-hosting subscription. You decide where the files live and how they are delivered.

Audio can come from:

• The WordPress Media Library
• A public HTTPS URL
• An Amazon S3 bucket
• A content delivery network
• A signed URL
• A URL containing query strings, encoded characters, or no visible file extension

The visitor’s browser connects directly to the selected audio host. HexCoda does not copy the audio into a separate HexCoda service, remotely inspect it, or rewrite signed-link parameters.

The audio host and browser still determine whether a file can be played and sought correctly. Public HTTPS access, a browser-compatible codec, appropriate cross-origin configuration when required, and support for browser range requests are important for reliable playback.

No transcode or process your audio

HexCoda plays the source files selected by the website owner and does not normalize, convert, probe, or transcode them. This keeps the plugin focused and avoids making hidden changes to the comparison. It also means that file preparation remains under your control.

MP3 is generally the safest choice for broad browser compatibility and efficient delivery. WAV can also be used when the codec inside the WAV container is supported by the visitor’s browser. File size, hosting bandwidth, CDN configuration, and the visitor’s connection can affect loading and playback.

How to prepare files for an accurate Before and After comparison

The two audio files must represent corresponding timelines. Export both versions from the same start and end points, including the same lead-in where practical.

For a clear and responsible portfolio example:

1. Export both versions from identical timeline boundaries.
2. Confirm that the musical or spoken content begins at the same moment.
3. Listen through the switch points before publishing.
4. Use a browser-compatible format and sensible web file size.
5. Avoid misleading level differences that overwhelm the comparison.
6. Use only audio you have permission to publish.
7. Explain what changed and credit the artist or client when appropriate.

HexCoda synchronizes playback, but it cannot correct two exports that begin at different points. Preparing aligned source files is the most important step in creating a reliable comparison.

Responsive and accessible by design

Audio portfolio visitors may arrive on a laptop, tablet, or phone. HexCoda uses a compact responsive layout designed to remain practical at smaller widths.

Accessibility can also depend on the surrounding WordPress theme and page content. Use descriptive headings, adequate contrast, clear example descriptions, and transcripts where the audio content requires them.

Focused loading and configurable preload behavior

HexCoda loads its player assets only where a player is rendered. It also provides three audio preload choices. These settings help website owners choose an appropriate balance between initial network use and playback readiness.

The final behavior still depends on the browser, audio host, CDN, cache, optimization setup, and visitor connection.

Privacy without plugin telemetry

HexCoda does not create tracking cookies, collect visitor analytics, store listening history, or send audio URLs to HexCoda.

The visitor’s browser requests audio from the host configured by the website owner. WordPress hosting providers, CDNs, S3, and other external audio hosts may maintain access logs under their own policies.

This distinction allows HexCoda to remain a focused playback tool. If you add marketing analytics to the surrounding product or portfolio page, those analytics are separate from the HexCoda plugin and should be disclosed according to your own privacy obligations.

A focused tool for making audio work easier to understand

HexCoda A/B Audio Player does not try to replace a digital audio workstation, client-delivery service, podcast platform, or music store. It solves one clear problem inside WordPress: helping a listener compare two versions of the same audio without losing their place.

For audio professionals, that comparison can turn a portfolio from a collection of finished tracks into evidence of skill. For educators, it can turn an explanation into a listening exercise. For product developers, it can turn a technical claim into a demonstration.

Your work already made the difference. HexCoda makes that difference easier to hear.

FAQ

Frequently Asked Questions