Wednesday, August 30, 2006

Mp3player 1.0

Thanks to a great tip i was able to get the player going in IE too.

Instead of the two optional parameters i now have the two alt values, play and stop, for the mp3controler image and width, height, align, style and fontcolor for the player all wrapped in an nice associative array.

$("a.example1").mp3player({play: 'listen'});
$("a.example2").mp3player({fontcolor: '002EB8'});

example links:
MSTRKRFT - Work On You (Para One Remix)
Elvis Costello - Watching the Detectives (My Aim Is True, 1977)
You need to click twice to let the player work because of the two different classes. In IE i also noticed a flickering when clicking on the play state of the mp3control. These issues will be handled in the next releases.

If you want to attach the mp3player to all mp3 files
$("a[@href $= .mp3]").mp3player();

I also added the mp3 check to make sure the files are all playable.

the code for this version is :

$.fn.mp3player = function(options){
var play = options && options.play && (options.play.length > 0) ? options.play : 'play';
var stop = options && options.stop && (options.stop.length > 0) ? options.stop : 'stop';
var width = options && options.width && (options.width.length > 0 && typeof options.width == 'number') ? options.width : '100';
var height = options && options.height && (options.height.length > 0 && typeof options.height == 'number') ? options.height : '14';
var align = options && options.align && (options.align.length > 0) ? options.align : 'middle';
var style = options && options.style && (options.style.length > 0) ? options.style : 'vertical-align: bottom; margin-right: 0.2em;';
var fontcolor = options && options.fontcolor && (options.fontcolor.length > 0) ? options.fontcolor : '000000';
return this.each(function(){
if($(this).attr("href").match(/.mp3$/i)){
$(this).prepend('<img src="http://del.icio.us/static/img/mp3/play.gif" alt="'+play+'" class="mp3control"> ');
$(this).find("img.mp3control").click(function(){
var url = $(this).parent().attr("href");
var alt = $(this).attr("alt");
if(alt == play){
// reset all values op page
$("embed#player").remove();
$("img.mp3control").attr({src : "http://del.icio.us/static/img/mp3/play.gif", alt : play});
// adjust image and innerhtml
$(this).attr({src : "http://del.icio.us/static/img/mp3/stop.gif", alt : stop});
$(this).after('<embed width="'+width+'" height="'+height+'" align="'+align+'" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="player" id="player" wmode="transparent" quality="high" flashvars="theLink='+url+'&fontColor='+fontcolor+'" src="http://del.icio.us/static/swf/playtagger.swf" style="'+style+'"/>');
return false;
}else{
$(this).attr({src : "http://del.icio.us/static/img/mp3/play.gif", alt : play});
$("embed#player").remove();
return false;
}
});
}
});
};

No comments: