HTML5 Audio Player with Playlist

Have you ever wanted to add a simple HTML5 audio player with playlist to a website? If so, then you’ve no doubt scoured the internet for the right plugin – something which will just let your users play a few tracks, with simple functionality. Unfortunately, many media players on offer seem too complicated for my needs, tie you into a framework which just doesn’t really lend itself well to flexibility, or just don’t really do the job. For this reason, I decided to create my own player. The main idea was to implement a simple player which could support a playlist of tracks easily, and which could be added to a page with minimum fuss.

Using jQuery and the HTML5 audio element, I implemented a (very) simple audio player which supports multiple queued tracks and basic controls. Eventually I want to extend the functionality of this plugin, but I’m more concerned with ensuring ease of use than adding bells and whistles. Have a little play with the demo below and let me know if there’s anything you’d like to see.

Note that for now, the default audio element will be displayed. The appearance of this will vary across browsers, and since I primarily use Chrome, the default UI for the plugin will match up with Chrome’s audio player better than it does other browsers. The plan is to ultimately allow for customisation of the audio player itself rather than just the playlist area, but for now you can tweak the included CSS however you see fit. Click a track-name within the playlist to start playing!

The first version of this player is now available, so go and grab it from GitHub. The GitHub page contains instructions for getting this plugin up and running, and details the options currently available. I’ll be extending this plugin over time, so if you have a GitHub account and are interested in its development, then watch the repo for updates!

New WP Theme – No Fuss

I got bored with using a default WordPress theme, so decided to make my own. Again, using BlankSlate as a base, I call it ‘No Fuss’. I’ll be maintaining it for my own use on GitHub, but feel free to fork it or to contribute if you like it.

There’s a little work to do in tidying up the CSS, but I like it as it is for now and will develop it further when necessary.


Blank Slate

I’ve just finished turning the band website into a WordPress site. Well, when I say ‘finished’, I mean I’ve put it up live because it’s in a place where I’m comfortable that the theme is pretty close to the original look.

Over the last few months I’ve taken a liking to WordPress and have used it more and more for various projects. There may not always be a plugin to do exactly what I need, but it’s pretty easy to pull something together yourself.

I didn’t want to change how the band website actually looked – I just needed a way for us to be able to easily add photographs, gig dates, and videos. Since the site itself has always looked pretty simple, I spent a while looking for a stripped down theme that I could customise before settling for Blank Slate. You can’t really get much more stripped down than a full CSS reset and the bare minimum markup!

The total time taken to convert the website from pure hand-written HTML to a WordPress theme with content, (including figuring out the plugins I wanted and customisations to those) was about a single day, and most of that was eaten up by me trying to decide which events calendar plugin to use.

I still need to do some SEO stuff and re-do the social media links, but all in all I’m pretty happy with how the conversion went. The site looks pretty much exactly the same, but we now have a real back-end that will allow us to manage our photos, videos, and gig dates far more easily.