jPlayer Integration

06 July, 2014 01:25PM ยท 4 minute read

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:

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