Audio Player in Variants

A few months ago Acorn pointed me to a customisable audio player that handled multiple tracks in an array. It works well for me and I can point it in the direction of the right files and make it look as pretty or weird as I want.


However, I cannot fathom how to make it work with either, variants, or two instances of the player on the same page. I’m making the huge presumption that I need to simply give a unique name to each individual player…I just don’t know how.


The Placeholders body code reads <div id="audio-players"></div> The head code has 300+ lines but only 2 instances that read “audio-players”, renaming all 3 instances on one variant doubles up the number of tracks on one variant and nothing on the other. I have also done other things that must have made some form of sense to me at the time, but I’ve never even been close.
I did try to find ideas from W3 and Stack Overflow, but my ability to follow usually falters on the third or fourth line.

I would be grateful if someone would have a look to see if anything can be done. Example attached.

Attachment 125308