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!
