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;
}
});
}
});
};

jquery plugin beta

Javascript isn't really my language. Im just too stupid to program with it.

The previous version of my code got a major flaw. For each link it found it added a click event. The second link it found got two click events so the second canceled the first. The thirth got three click events so the code worked, and so on.

This was solved by replacing

$("img.mp3control").click(function()

by

$(this).find("img.mp3control").click(function()

I also changed the class value of the image to mp3control because i thought play was to generic.

Someone on the jquery list told me it wasn't working on IE6 and he is right. The player is added and removed but it gets stuck loading the file. In firefox 1.5 and Opera 9 the file plays.

The adjusted code can be found in the head tag of the sourcecode.

My first jquery plugin

Weer een Engelse post omdat ik dit ga linken in een e-mail op de jquery discussie lijst.

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.

Automatisch een mp3 speler bij een link

Als je mijn vorige artikel gelezen hebt ben je misschien nieuwsgierig hoe de code voor de speler nu juist ineen zit.

Ik maak gebruik van de javascript bibliotheek jQuery. Omdat ik ze niet kan uploaden naar blogspot moet ik hotlinken naar de bron.

<script type="text/javascript" src="http://jquery.com/src/jquery-1.0.pack.js"></script>

Dit bestand is de gecompresseerde versie van de bibliotheek. Die is een 16 kb groot.
Vervolgens zet ik mijn javascript onderaan de artikel code omdat script code in de head tag niet gelezen wordt. Nu zal ik de code opsplitsen zodat ze duidelijker wordt.
Eerst voeg ik aan alle links met het class attribuut mp3 de speelknop toe van del.icio.us.

$("a.mp3").prepend('<img src="http://del.icio.us/static/img/mp3/play.gif" alt="beluister" class="play"> ');

De speelknop heeft de class play en aan de hand daarvan bind ik de klik evenementen met de toggle functie van jQuery.

$("img.play").toggle(function(){},function(){});

De toggle functie bestaat uit twee functies. De eerste functie zorgt voor de oneven klik evenementen. In deze eerste functie haal ik het url op, zet ik alles weer naar de oorspronkelijke staat(komt van pas als er al bestanden beluisterd zijn), verander de attributen van de speelknop, voeg ik de flashspeler van del.icio.us toe na de speelknop met het opgehaalde url en stop het normale klik gedrag.

var url = $(this).parent().attr("href");

$("object#player").remove();
$("img.play").attr({src : "http://del.icio.us/static/img/mp3/play.gif", alt : "beluister"});

$(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;

De tweede functie van de toggle functie zorgt voor het afhandelen van de even klik evenementen. Hier verander ik de attributen van de speelknop weer naar de originele staat, verwijder de flashspeler en stop het normale klik gedrag.

$(this).attr({src : "http://del.icio.us/static/img/mp3/play.gif", alt : "beluister"});

$("object#player").remove();

return false;

In zijn geheel geeft dat volgende code;

$("a.mp3").prepend('<img src="http://del.icio.us/static/img/mp3/play.gif" alt="beluister" class="play"> ');
$("img.play").toggle(function(){
var url = $(this).parent().attr("href");
$("object#player").remove();
$("img.play").attr({src : "http://del.icio.us/static/img/mp3/play.gif", alt : "beluister"});
$(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;
},function(){
$(this).attr({src : "http://del.icio.us/static/img/mp3/play.gif", alt : "beluister"});
$("object#player").remove();
return false;
});

Het enige wat er nu moet gebeuren in de artikels is de class mp3 toevoegen aan de links die een speler moeten hebben en dan gebeurt alles zonder andere javascript code in je html te zetten.

Ik heb de code getest met de laatste en meest gangbare versies van IE, firefox, opera en konqueror. Volgens een maccer werkt het niet in safari. Ik zal hier naar kijken als ik tijd heb.

Jquery debug

Omdat ik op een mogelijk probleem gestoten ben in jquery ga ik dit artikel verder in het Engels schrijven

I was trying to make a link for playing mp3's using the del.icio.us player.
Every link with the class mp3 will get the play button from del.icio.us.

$("a.mp3").prepend('<img src="http://del.icio.us/static/img/mp3/play.gif" alt="beluister" class="play">&nbsp;');

On clicking the play image the player should appear with the value from the href attribute of the link. But here something goes wrong.

$("img.play").click(function(){
var link = $(this).parent().html().split(';');
alert(link[1]);
var url = $(this).parent().attr("href");
alert(url);
$(this).parent().html('<img src="http://del.icio.us/static/img/mp3/stop.gif" alt="stop" class="stop"><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>'+link);
return false;
});

test link : Cunts are still running the world

It gets the alert with innerhtml, without the play image, but not the alert with the value of the href attribute and it continues the link behaviour even with the return false; code. When i only alert the innerhtml it acts as expected.

The functional code of the site is found near the bottom of the source code. Blogspot doesn't execute javascript code inside the head tag.

The thirth part of the code would be the click event of the stop image.

I saw it on Mars needs guitars and i thought it was great so i wanted to add it to my blog too.

If it's a bug in jquery i hope it will be fixed soon. You just got to love the fast respons on their mailing list.

update : The problem was linking to an older version of jquery. I made some changes in the functional code now to make it work.

Javascript

Op Ramblings of a man gebruik ik verschillende javascript trucjes om de rechterzijde wat frivoler te maken. Zo heb ik flick zeitgeist en The hype machine javavscript widgets.
Het probleem van de hype machine widget was dat het de link niet opende in een nieuw venster. Liever een nieuw venster dan mijn blog te laten verdwijnen. De oplossing was redelijk simpel. Eerst jquery toevoegen en dan een klein scriptje maken dat een target attribuut toevoegd aan de hype machine links.

<script type="text/javascript"> $("#profile-container table tr td a").set("target","_blank");</script>

Javascript is nooit mijn favoriete programmeertaal geweest maar met de libraries die er nu zijn wordt het dragelijk.
Ik ben een fan geworden van jquery omdat ik veel sneller resultaat bereikte dan met prototype.

Het jammere aan blogspot/blogger is dat je de code op de pagina moet zetten. code in de head tag wordt niet uitgevoerd.