I’m always on the lookout for WordPress Plugins that add a needed functionality to my website or make some necessary task easy as pie.
A couple of weeks ago I was spending a day tuning up my website at www.meggrace.com. This is the website for my music studio, Grace Notes Music. Being a music teacher, I am often adding audio media to my posts and pages.
However, I had noticed a problem with the audio player plugin I was using. The problem was that, on a page where I had multiple audio players, clicking the play button on one player caused all of the players to start!
As you can imagine, this produced a cacophony of sound, not necessarily what I was going for!
Website Hack Day
During my Website Hack Day, I stumbled across Compact Audio Player. You just install the plugin and use a shortcode* to insert an audio player on any post or page. The instructions are really that simple.
The thing that makes this plugin so great? It solved my problem of multiple players playing at the same time!
When I saw this simple checkbox, I cheered! I am grateful to the friendly-looking folks at Tips and Tricks HQ.
Default Audio Player Shortcode
While writing this article and getting my cites in line, I learn that the default audio player has four attributes available. Would using these attributes have helped my problem page?
The four attributes for the default Audio shortcode are:
- src – The source of your audio file.
- loop – Looping is on or off. Default is off.
- autoplay – Automatically play the audio or not. Default is off.
- preload – Specifies if and how the audio should be loaded when the page loads. Defaults to “none”.
On my ‘problem page’ at Grace Notes Music, where I had multiple audio files included in one post, none of these attributes would have improved the situation, especially given that the defaults are no looping and no autoplay.
So why did they simultaneously play?
Some Testing Is In Order
I quickly popped open Desktop Server — another great app. More on that in another article. Desktop Server allows me to run a working WordPress installation on my local server for testing before I take a site or new plugin live.
I navigated to my MegGrace testing site. I have no plugins installed on this test site. And I’m running a plain vanilla WordPress install using the TwentySixteen theme.
Opened a post. Added two bits of shortcode: (without the space around the square brackets)
[ audio src="https://mysite.dev/wp-content/uploads/2016/09/music1.mp3" ] [ audio src="https://mysite.dev/wp-content/uploads/2016/09/music2.mp3" ]
Funny thing. It worked. I could play each music file one at a time.
The Never-Ending Testing Cycle
I could spend a lot of time tracking down why that didn’t work on my live site. The first thing would be to suss out a plugin conflict and then perhaps a theme conflict.
As I said, I could. But for now, I’ve got a working solution in the form of Compact Audio Player plugin from Tips and Tricks HQ.
Two Takeaways From Today’s Article
- Compact Audio Player does what’s needed. By including that one setting in their plugin, my problem is solved. The fact that they have included that setting tells me that I’m not the only one to have this problem.
- On the default install of WordPress and TwentySixteen theme, the default Audio player works fine.
- Testing is important.
Okay. That was three takeaways. 😉
*BTW, What is Shortcode?
Shortcode is shorthand for a complex section of code. Most shortcodes come with a few attributes that modify the basic instruction.
“A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.” Courtesy WordPress support docs.
Here is an example of the shortcode used by the Compact Audio Player plugin:
[sc_embed_player fileurl="URL OF THE MP3 FILE"] [sc_embed_player_template1 fileurl="URL OF THE MP3 FILE"]
The default player is just a simple ‘play’ button which toggles to the ‘pause’ button upon click. The Template 1 player includes a seek bar and volume control like so: