Après avoir inséré une widget MixPod pour écouter de la musique sur le blog (Ici), une idée m'est venu pour offrir plusieurs playlists : une Soft (quelques chansons d'Anathema) et une Hard (du Dream Theater).
Puisque MixPod n'offre pas cette possibilité (je pense également que c'est le cas avec les autres solutions d'écoute en ligne), la solution est donc d'utiliser du HTML plus du JavaScript pour cela.
Cela consiste à utiliser des boutons radios pour la sélection. En sélectionnant une option, la widget MixPod est raffraichi automatiquement pour utiliser la playlist adéquate (représenté par un ID) : voilà, le coup est joué. Après, il aurait été bien d'enregistrer le choix de l'utilisateur pour qu'à son prochain retour, il retrouve sa playlist : chose faite avec les cookies.
Je ne suis pas trop rentré dans les détails techniques pour ne pas faire fuir le lecteur :) Mais pour ceux qui ne redoutent pas de voir du code, il suffit de cliquer sur le bouton suivant : vous pouvez utiliser le code comme vous le voulez et même l'adpater pour d'autres widgets.
<script language="JavaScript">
function changeList(list)
{
pageTracker._trackPageview('/outgoing/'+list);
if (list == "soft")
{
id = "26871279";
}
else
{
id = "28059102";
}
htmlContent = '<object id="mixpodPlayer" data="http://assets.myflashfetish.com/swf/mp3/mff-circle.swf" width="110" name="mixpodPlayer" height="110" type="application/x-shockwave-flash"> <param value="false" name="menu"><param value="TL" name="salign"><param value="transparent" name="wmode"><param value="myid=' + id + '&autoplay=true&addMode=true&mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF" name="flashvars"></object>';
document.getElementById('MusicPlayer').innerHTML = htmlContent;
var expDate = new Date();
expDate.setTime(expDate.getTime() + (356 * 24 * 3600 * 1000));
document.cookie = "style=" + escape(list)
+ ";expires=" + expDate.toGMTString();
}
window.onload=function(){
var style = 'soft';
var nom = "style=";
var deb = document.cookie.indexOf(nom);
if (deb >= 0) {
deb += nom.length;
fin = document.cookie.indexOf(";",deb);
if (fin < 0)
{
fin = document.cookie.length;
}
style = unescape(document.cookie.substring(deb,fin));
document.getElementById(style).checked = true;
}
changeList(style);
}
</script>
<input id="soft" checked name="group1" onclick="changeList('soft')" type="radio"/> Soft<br/>
<input id="hard" name="group1" onclick="changeList('hard')" type="radio"/> Hard<br/>
<center><div id="MusicPlayer"></div></center>