To make up for my stupid mistake and because i wanted to try to make a plugin as an experiment, i tranformed my shot at a del.icio.us powered mp3 player to a plugin. It wasn't as difficult as i thought it would be. With Klaus Hartls tabs plugin code as an example i took the code you find in the article below and put it in the the jQuery plugin construct. I couldn't use the toggle function anymore but by defining the alt attribute of the added image i could create a simple if statement.
Here is the plugin code:
$.fn.mp3player = function(play,stop){
if (typeof play == "undefined") { play = "play"; }
if (typeof stop == "undefined") { stop = "stop"; }
return this.each(function(){
$(this).prepend('<img src="http://del.icio.us/static/img/mp3/play.gif" alt="'+play+'" class="play"> ');
$("img.play").click(function(){
var url = $(this).parent().attr("href");
var alt = $(this).attr("alt");
if(alt == play){
// reset all values op page
$("object#player").remove();
$("img.play").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('<object width="100" height="14" align="middle" id="player" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" style="vertical-align: bottom; margin-right: 0.2em;"><param value="transparent" name="wmode"/><param value="sameDomain" name="allowScriptAccess"/><param value="'+url+'&fontColor=000000" name="flashVars"/><param value="http://del.icio.us/static/swf/playtagger.swf" name="movie"/><param value="high" name="quality"/><embed width="100" height="14" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="player" wmode="transparent" quality="high" flashvars="theLink='+url+'&fontColor=000000" src="http://del.icio.us/static/swf/playtagger.swf" style="vertical-align: bottom; margin-right: 0.2em;"/></object>');
return false;
}else{
$(this).attr({src : "http://del.icio.us/static/img/mp3/play.gif", alt : play});
$("object#player").remove();
return false;
}
});
});
};
Like any other plugin it gets called like this:
$("a mp3").mp3player();
example : Cunts are still running the world
I added two optional parameters. The first is the alt value for the play image and the second is the alt value for the stop image. This way you can add your own language or whatever you want to the alt attribute of the image.
For me the plugin has a bonus because there is less javascript code in the html body.
The things i still have to do is check if the href attribute is present and if the file really is an mp3.
I'm just a thief with a little imagination so please be gentle in the comments.
2 comments:
Nice Job, does it can play directly when you enter your blog? Do you remember those pages with midi background sound can I make? some thing like that but with a player? Like yours, ne vermind if you understand me nice work, to be smart it is not thievery
I could add an option where an additional key, of the class you identify your mp3 with, opens the player when the page is loaded.
It will only play once because the del.icio.us player isn't javascript controlled.
I was looking for some improvements on the player. I was thinking in the lines of gathering all the mp3's and displaying them in an other part of the site. But i will work out your idea and you will see the modified code soon.
Post a Comment