WordPress Audio Player Now Falls Back To HTML5

August 15 2012

I realized people on iOS and other devices that don’t support Flash couldn’t use the embedded Flash player for listening to audio when using the WordPress Audio Player plugin.  I wanted to customize it so that sites would fall back to HTML5 if Flash wasn’t present. I found a post in the WordPress forums of someone who did this here.

However, his script didn’t work as it was for two reasons. First, he was Base64 encoding the url to the mp3 — not sure why. So I remmed out that code. Second, he was replacing the parent element with the <audio> tag, which was blowing away the entire post!  By replacing the element witht the id of the audio tag itself, walla!  Everything works!

You can download the modified file here and minify if you’d like.

Skinless jPlayer Implementation

August 15 2012

I recently implemented a skinless audio player using jPlayer that plays m4a files that it retrieves from the iTunes Search API.

I am using jPlayer 2.1.0 and the main gotchas I hit were problems with not having the latest version of Flash on target computers.  jPlayer requires Flash 10 or higher for fallback, which it seems to do for m4a files in Firefox.

Anyway, here’s the code if you are interested. Here’s where I instantiate the jPlayer. The only parameters I pass are the supplied parameter. I got away with the defaults for everything else.

$("#jplayer").jPlayer({
ready: function() {
$("#jp_container .track-default").click();
},
supplied: "m4a, m4v"
});
Then, here’s how I wire up the click handler, toggling between the play and pause icons:
var current;
 $(".play").click(function(e) {
 $("#jplayer").jPlayer("setMedia", {
 m4a: $(this).attr("href")
 });

 if (current == this) {
 $(current).empty();
 $(current).append("<img style='vertical-align:middle;' 
border='0' src='/images/ic_menu_play.png'/>"
); $("#jplayer").jPlayer("pause"); current = null; return false; } $("#jplayer").jPlayer("play"); if (current != null) { $(current).empty(); $(current).append("<img style='vertical-align:middle;'
border='0' src='/images/ic_menu_play.png'/>"
); } $(this).empty(); $(this).append("<img style='vertical-align:middle;'
border='0' src='/images/ic_menu_pause.png'/>"
); current = this; return false; });
Works great!
Technorati Tags:

Having jPlayer dynamically switch between m4a and mp3

August 15 2012

According to the docs of jPlayer http://www.jplayer.org/latest/developer-guide/#jPlayer-essential-formats, you are only supposed to use either mp3 or m4a.  But in my case, I’m not sure which gets passed to the player from the database. So, I had to handle that in the script. Here’s what it looks like:

$("#jplayer").jPlayer({
 ready: function() {
 $("#jp_container .track-default").click();
 },

 supplied: "m4a, mp3, mv4"
 });

When I wire up the handlers, I check the file extension before passing the URL to the setMedia method, like this:

$(".play").click(function(e) {
 var filename = $(this).attr("href");
 var ext = filename.split('.').pop();
Technorati Tags:
 if (ext == "m4a") {
 $("#jplayer").jPlayer("setMedia", {
 m4a: $(this).attr("href")
 });
 }
 else {
 $("#jplayer").jPlayer("setMedia", {
 mp3: $(this).attr("href")
 });

 }

A little hacky, but it works!

KEXP Archive in IE9 Launch and Mellow Johnny's at SxSW

March 21 2011

KEXP Archive is a very cool HTML5 application that uses the KEXP dataset to show off a cool visualization. The KEXP data set represents nearly 10 years of radio playlists and includes over 700,000 tracks with album art, the date and time each song was played, and DJ names. The result, created by Stimulant, can be seen at http://kexparchive.org. Pretty rad.

This application was featured in the IE9 launch at SxSW -- watch it demonstrated in a video here.  Also, it was shown while KEXP broadcasted live from SxSW at Mellow Johnny's, Lance Armstrong's bike shop. Here's some pics of the KEXP IE9 kiosk in the bike shop:

 

 

 

Ze Frank and Star.Me at IE9 Launch

March 17 2011

Check out Ze Frank’s presentation at the IE9 launch event at SxSW: