UPDATE: Audio now supports Ogg Vorbis
That being said, it is off to a good start. In my quest to 1) encapsulate all the code I end up writing 5 million times into re-usable / one-click-installable Plugins and 2) fix how WordPress deals with/doesn’t deal with Media, I have written a pretty sweet plugin for Audio. It is not feature-complete and definitely needs to come with some more Theme options out of the box, but for advanced developers who want to start managing their MP3s / MP3 playlists in a much easier way immediately, it is already pretty powerful.
I claimed the Subversion repository late last week without having written a line of code, but I did have a mission statement which I included in the Plugin’s description:
Audio allows you to use simple functions in your theme to display audio you have attached to Posts/Pages/Custom Post Types in your Media Library. Your player is styled 100% with CSS/images (if you want). Your audio player uses your browser’s native HTML5 capabilities when available with a fallback to Flash when necessary. Allows you to play audio inline on mobile browsers that support HTML5 Audio (heeeey, WebKit!)
Let’s take it step-by-step:
1) You can now output an Audio playlist into your page through 2 EASY methods
- Shortcode in the editor =
the_audio()in your Theme code
These both do the same thing: they create the code necessary for jPlayer to handle player clicks and for you to style your player. The optional take an argument of “layout” if you want to include the list of your tracks below the player:
- Shortcode in the editor =
the_audio('list')in your Theme code
plugins/audio/audio.php, you can configure your URLs to be open to the world or obfuscated, the default is obfuscated. To change this, set this at the top of the file:
2) The player is styled 100% with CSS and some images I boot-legged from jQuery UI. I HIGHLY-ADVISE you to override all of the styles I have provided. In fact, if you put an
audio.css file in your Theme directory, it won’t even load mine! You should copy and paste the code from
plugins/audio/css/audio.css and then change it to your own site’s vibe.
3) HTML5 Audio!
The plugin is built on top of jPlayer, a jQuery audio plugin. In Chrome and Safari, your MP3s will play as native HTML5 Audio. Same goes for Android and iPhone. All other browsers that don’t support MP3 natively will fallback to Flash. Firefox supports Ogg Vorbis, but I didn’t have the energy to write support for Ogg Vorbis into the plugin yet. I am trying to de-couple all of the default functionality of Audio from Shuffle, but you should probably use them in tandem to get the benefits of associating thumbnails (album covers) with audio uploads, and later, Ogg Vorbis uploads with MP3s (I still haven’t decided how I’m going to do this).
The description for the plugin now reads:
HTML5 Audio (on supported browsers), Flash fallback, CSS-skin’d player, hAudio Micro-formats, attach images to MP3s (when used with Shuffle)
4) I have decided to get super-semantic and use the hAudio micro-format for the audio data that the plugin outputs. When adding meta data to your MP3s in the Media Library, Title – Caption – Description will be used for Song – Artist – Album.