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.