I haven’t posted anything in a while. I’ve been busy developing a second WordPress Theme. The theme I am designing uses Post Formats and also is being designed as a mobile ready responsive theme.

As part of the post format options I needed to determine what I was going to do with an audio post. I did some Google searching and after a while I settled on audio.js. The original version of audio.js can be downloaded at kolber.github.com/audiojs/.

Notes from the developer :

“audiojs is a drop-in javascript library that allows HTML5’s ‘ tag to be used anywhere. It uses native ` where available and falls back to an invisible flash player to emulate it for other browsers. It also serves a consistent html player UI to all browsers which can be styled used standard css.”

“It plays mp3s. **No ogg**. Because, lets be honest, in the real world, no one really exports ogg files. Sadly, that means Opera and Firefox get flash audio. Hopefully they can add mp3 support soon.”

So this javascript plug in allows you to use the HTML Audio tag in all browsers for mp3 files only. There is one small caveat: In Opera the plug in won’t load local mp3 files in localhost servers. Firefox, IE 7,8 and 9, Chrome and Safari all tested fine. Opera still works in most servers. I was even able to get it to work on a localhost but only when accessing an mp3 on the internet.

I made some modifications to the files to be able to use it in WordPress and to change the css styling to be responsive. I’m used to working with separate css files for jquery plugins so the first thing I did was to remove the css from the audio.js file and create an audiojs.css file. To do this I opened up audio.js in Notepad++ and removed lines 86 to 125 and put them in the audiojs.css file. You then need to remove the javascript markup (backslashes, etc) and set up the css in a more readable format.

It took a lot of tinkering to get the display to be responsive, and rather than get into the details of the mods, I’ve commented the css file so you tinkerers can check it out.

The results of the mod can be seem with this demo.

Setting up Audio.js in WordPress

For themes I develop I put javascripts in a /themes/theme-name/js/ folder. In this case I created a folder for the audiojs files in /themes/theme-name/js/audiojs/.

Next you have to load up your scripts and css files. To do this add the following to your functions.php file:

Highly recommended references at WordPress.org:

WordPress Enqueue Scripts
WordPress Enqueue Styles

The first enqueue is wp_enqueue_script('jquery');. This is the default jquery library for WordPress. Always use the default WordPress jquery library. This library is tested with WordPress and is compatible with the WordPress System. Use older or newer jquery libraries at your peril. When conflicts arise from new releases, the biggest headache always seems to be jquery related, WordPress version 3.5 has just been released and there have been major issues with jquery compatibility.

The second enqueue loads the audio.js plugin, and the third loads the doc ready script. The doc ready script is a small function that enables the audio.js plugin.

A final comment about the script. I feel that it is always a good plan wherever possible to give the user an option to disable the script. In the user options admin panel of the theme I am developing, the user can disable the plugin by simply clicking a checkbox. The conditional wrap I’ve included above allows you to get the user input and disable the plugin.

The second function registers and enqueues the css file needed for the plugin. It is also conditionally loaded.

To use the plugin simple enter <audio src="http://www.yoursite.com/folder/file.mp3" preload="auto"></audio>

I hope you enjoyed the post.

Download the demo here: