jPlayer directive in AngularJS

I’m writing a website with a friend. It’s an AngularJS SPA (single page application) – we’re using this to ensure that our website is quick (minimising server-side rendering) and that songs continue to play when “navigating pages” – I say navigating as its not your usual web page navigation. In a SPA a page change happens, the URL changes – however the whole page isn’t reloaded – just the “viewport”. Read up about getting started with SPAs here.

So, we want to keep songs playing, while navigating different views!

To store the songs we’re using Azure Blob storage. We’re using jPlayer to play the files (predominantly in .mp3 format). We’ll use the angularJS directive feature to create a jPlayer directive.

You can find the directive (gist) here.
An example player service (gist) here.
And the unstlyed/non-css’d/ugly template (html) (gist) here.

A copy of the source:

Hope someone finds this a good starting point/helper to real angularJS directives “in the wild”.