How to preview music directly on product variant selection?

[weaverc]

Hey there,

I am trying to customise a product that includes music, and when people are making a selection for the sound in a variant I would like them the ability to be able to preview it direct from the page.


I have searched for apps, youtubed and googled and I can't find this?

[JHKCreate]

Hi @weaverc 

Your particular case requires a purely custom coding to get this done correctly. How many of these audio files do you have? Let us know so we can assist on this!

[Ericking89]

At 12 Bit Soul, we make it easy for producers to preview sound kit variants before buying. When you select a specific version—like “Drums Only” or “Full Kit”—the audio preview updates instantly so you can hear exactly what that variant sounds like. Each version has its own unique preview, letting you feel the vibe before you commit. It’s all about making sure the soul hits right before it hits your DAW.

[Ericking89]

Absolutely love how 12 Bit Soul keeps it real for producers—being able to instantly preview each variant like “Drums Only” or the full kit is a game-changer. No guesswork, just vibes. Having unique previews for every version means you really get to feel the soul before it even hits your DAW. That’s the kind of attention to detail that sets 12 Bit Soul apart

[jordanwell123]

This is a really useful feature, especially for digital music stores or sound libraries. One way to enhance the user experience is by embedding a preview player that updates dynamically based on the selected variant — similar to how a Menu on a website adjusts when you choose different categories. Just like a well-structured food menu helps users explore options quickly, a responsive product variant preview system makes navigation seamless and intuitive for music previews. Curious to see if anyone has done this cleanly with ACF or WooCommerce?