I have a question about a setup I am trying to achieve. I currently am setting up a site with the purpose to buy and sell instrumentals. I have setup the desired instrumental list layout which you can view here.

Next, I would like for the play icon to play the instrumental via an on screen audio player, like these site examples:

  • Sura Theme
  • Musik - Responsive Music WordPress Theme (on ThemeForest)

As you can see in the examples, the music plays at the bottom of the website, after you click on the play icon on either websites. I'm pretty certain that both websites are using jPlayer – jQuery HTML5 Audio player.

Which brings me to my question. How am I able to duplicate a similar setup? I am using WooCommerce to sell the instrumentals and enter in information such as length, price, and genre. The idea in mind, is to enter the URL of the music track while adding my WooCommerce product, and have that track URL get pulled to the audio player. Which will stay on screen while browsing the website.

Any help is much appreciated, thank you.

  • What have you tried? Can you post your code (I think in this case it would be mostly javascript)? – Jen Nov 12 '16 at 15:39
  • @guiniveretoo I am currently using the Advanced Custom Fields plugin in combination with a theme that allows me to grab the custom meta data I created with the ACF plugin. If you take a look at my homepage linked in my question above, you'll see that I have the play icon set to grab the custom meta (which is just a link to an mp3 file) and display that file in a custom CSS lightbox. – Tyree Brown Nov 14 '16 at 20:41
  • @guiniveretoo The theme I am using is Themecomp — Website Constructor. – Tyree Brown Nov 14 '16 at 20:42
  • You say in your question that you think your example websites use jPlayer. Have you tried setting that up? Please post your code, we can't write the code for you, only correct it or offer suggestions. – Jen Nov 14 '16 at 21:31