I recently added some features to this website that have attracted a little bit of attention and thought it might be helpful to go through one of them I’ve been asked about a few times in the hope that others could find it useful. Before I begin let me start by saying: this is just my way of achieving the desired result. It is by no means the ONLY way nor is it necessarily the BEST way. I found no how-to guides or anything for this it was just a matter of experimentation to get it working. Also this implementation is for integration with Statamic. If you’re using another platform there will be similar elements but clearly the final implementation details will differ.

There are two ways in which I wanted to use jPlayer (to take over from the standard HTML5 Audio player) and that was on the podcast episode listing and on an individual episode page. In order to keep my Statamic templates clean I set up a partial theme and add it to each of my template files: ‘podcast’ and ‘podcastepisode’ as such:

{{ theme:partial src="podcastplayer" count="{{ count }}" }}

In order to pass the correct episode reference I pass the count variable to the partial (since it’s embedded in an entry listing) since this critical to tell the episodes apart. I’ve left the code the same for consistency on the podcast episode template since in that template it’s only called once and I ignore it anyway. Of course, that’s up to how you want to handle it.

The key elements of the ‘podcastplayer’ partial are all in the DIVs:

<div id="jquery_jplayer_{{ count }}" class="jp-jplayer"></div>
<div id="jp_container_{{ count }}" class="jp-audio">...</div>

Obviously how you choose to set up your jPlayer is up to you (it’s very configurable) so I won’t bore you with the specifics of how I’ve implemented mine here.

The final piece is inserting the javascript. There’s multiple ways of doing it but I’ve chosen to insert it in another partial theme called ‘podcasthead’ which I add in my default.html layout:

{{ theme:partial src="podcasthead" }}

Because it’s the most important part of making this work, here it is with only a handful of irrelevant parts removed for simplicity. Some notes to bear in mind:

• Don’t forget to add your links and styles based on how your jPlayer needs to look.

• All of my podcasts are hosted under the sub-directory ‘podcasts’ hence I use segment_1 to conditionally add this code. I don’t want it added to every page unnecessarily.

• I use segment_3 to check to see if you’re looking at a specific episode. If you are segment_3 will look like “Episode-3-turn-the-damn-light-off” or similar.

• The ‘#jquery_jplayer_1’ in the individual podcast episode section is always ‘1’ since there’s only one podcast shown on an individual page. I also had other reasons for splitting them here but that’s another story for another post.

• Note that the ’title’ ‘_audiofolder’ ‘_audiofile’ variables are taken from each individual episodes markdown YAML header in the specific podcast sub-directory.

• Note the use of ‘count’ to differentiate between the different jPlayer instances on the page.

• Note that the entries listing content MUST match the settings for the page. In my case I’ve used a history of 10 episodes throughout for all of my podcasts. This needn’t be set to that depending upon your preferences.

• I keep my jPlayer code in the _add-ons/jplayer directory but clearly this will depend on your own configuration.

  {{ if segment_1 == “podcasts” }} {{ if segment_3 == "" }} {{ entries:listing folder=“podcasts/{ podcastfolder }” limit=“10” }} $(document).ready(function(){ $("#jquery_jplayer{{ count }}").jPlayer({ ready: function (event) { $(this).jPlayer(“setMedia”, { title: “{{ title }}”, mp3: “{{ _audiofolder }}/{{ _audiofile }}” }); }, play: function() { // To avoid multiple jPlayers playing together. $(this).jPlayer(“pauseOthers”); }, swfPath: “/add-ons/jplayer”, supplied: “mp3”, wmode: “window”, preload: “none”, smoothPlayBar: true, remainingDuration: true, toggleDuration: true, cssSelectorAncestor: “#jp_container{{ count }}” }); }); {{ /entries:listing }} {{ else }} $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function (event) { $(this).jPlayer(“setMedia”, { title: “{{ title }}”, mp3: “{{ _audiofolder }}/{{ _audiofile }}” }); }, swfPath: “/_add-ons/jplayer”, supplied: “mp3”, wmode: “window”, preload: “none”, smoothPlayBar: true, remainingDuration: true, toggleDuration: true }); }); {{ endif }} {{ endif }}

That should be enough to get you running. Let me know how you go and good luck!