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!

This article was posted in Music, Programming, Projects, Technology, Web Development. Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.