Bonsoir à tous, ou plutôt bonjour à tous les couches-tard
Cela fait déjà un petit moment que j'utilise le petit lecteur dewplayer, super léger, super simple, esthétique, bref le top . Il y a peu de temps, me suis dit que ça pouvait être sympas d'intégrer un système de playlist (d'autant plus avec la version multi du player...c'est vrai, flemme de rappuyer sur un bouton pour changer de piste )
J'ai donc commencé mes recherches et suis tombé sur le tuto clb56 : http://clb56.fr/test_php_js/playlist_dewplayer/
Le soucis, c'est que je voulais une ou deux petites bricoles en plus, et que l'utilisation du innerHTML ne me plaisait pas (tout en gardant ce système de surcouche js).
Me suis donc mis à tapoter avec mes 'ti doigts pour obtenir quelque chose.
Voici le résultat :
Vala
Le soucis avec ce code, c'est que, tout fonctionne normalement sur FF, mais soucis sur IE. La réécriture des liens à l'air de se faire correctement, mais lors du click sur un bouton, le lecteur disparait mais ne réapparait pas ... je dois avoir fait une boulette quelque part mais sans bon débuggueur sous IE, je patauge un peu dans la semoule. Une idée lumineuse ?
Merci beaucoup [/i][/i]
Modifié par kook.kai (10 Sep 2007 - 20:57)
Cela fait déjà un petit moment que j'utilise le petit lecteur dewplayer, super léger, super simple, esthétique, bref le top . Il y a peu de temps, me suis dit que ça pouvait être sympas d'intégrer un système de playlist (d'autant plus avec la version multi du player...c'est vrai, flemme de rappuyer sur un bouton pour changer de piste )
J'ai donc commencé mes recherches et suis tombé sur le tuto clb56 : http://clb56.fr/test_php_js/playlist_dewplayer/
Le soucis, c'est que je voulais une ou deux petites bricoles en plus, et que l'utilisation du innerHTML ne me plaisait pas (tout en gardant ce système de surcouche js).
Me suis donc mis à tapoter avec mes 'ti doigts pour obtenir quelque chose.
Voici le résultat :
<?php
$lectureAuto=false;
$files = glob("media/*.mp3");
$listeLecture=array();
foreach ($files as $filename) {
$nomTitreCourant=str_replace('media/media.','',$filename);
$nomTitreCourant=str_replace('.mp3','',$nomTitreCourant);
array_push($listeLecture,$nomTitreCourant);
}
if (isset($_GET['jouerson']) and !empty($_GET['jouerson']))
{
$preSon=$_GET['jouerson'];
$preSon=addslashes($preSon);
if(file_exists('media/media.'.$preSon.'.mp3'))
{
$son='media/media.'.$preSon.'.mp3';
$positionListeLecture=array_search($preSon,$listeLecture);
$lectureAuto=true;
}
else
{
$son=$listeLecture[0];
$positionListeLecture=0;
}
}
else
{
$son='media/media.'.$listeLecture[0].'.mp3';
$positionListeLecture=0;
}
?>
<script type="text/javascript">
<!--
/****************************************************************/
//Modification des liens de la playlist pour utiliser la surcouche Javascript//
/****************************************************************/
function getPlayList(conteneur)
{
if (!document.getElementById || !document.getElementsByTagName)
{
return false;
}
//On récupère tous les liens de la playlist
var listeSons=document.getElementById(conteneur).getElementsByTagName('a');
//Tant qu'ils ne sont pas tous traités
for (i=0; i<listeSons.length; ++i)
{
//On récupère le lien courant
var titreCourant=listeSons[i];
//On récupère l'adresse du lien
var adresseSon=titreCourant.href;
//On récupère la chaine à partir du dernier = dans la chaine adresseSon
var preNomSon=adresseSon.substring(adresseSon.lastIndexOf("="));
//On enlève le premier =
var nomSon=preNomSon.substring(1);
//On supprime l'attribut Href du lien courant
titreCourant.setAttribute('href','#');
//On renomme celui ci pour utiliser la surcouche Javascript. On ne recharge plus la page à chaque changement de titre.
if(document.all) titreCourant.attachEvent("onclick",playerPlay);
else titreCourant.addEventListener("click",playerPlay,true);
}
}
/****************************************************************************************************************/
//Lecture de la piste et constitution de la liste de lecture interne au player. Celle-ci est constituée des prochains titres de la playlist.//
/****************************************************************************************************************/
function playerPlay(event)
{
/*************************/
//Initialisation des variables//
/*************************/
var positionLecture;
var i;
var chaineLecture;
var suiteChaine;
var nodeEvent;
var player;
var parent;
var nomSon;
var listeLecture;
var playerJava;
//On récupère le noeud de l'évènement
if(document.all)
{
//Pour IE
nodeEvent=event.srcElement;
}
else
{
//Pour FF et autres
nodeEvent=event.target;
}
//On récupère le noeud du player
player=document.getElementById("pl");
//On récupère le noeud parent
parent=player.parentNode;
//On récupère le titre sélectionné
nomSon=nodeEvent.firstChild.nodeValue;
/*****************************************************/
//Création de la liste de lecture complète et position de la piste//
/*****************************************************/
//On crée la liste de lecture complète, tous les titres(récupération avec php)
var listeLecture=new Array(<?php echo '"'.$listeLecture[0].'"';
for($i=1;$i<sizeof($listeLecture);$i++)
{
echo ',"'.$listeLecture[$i].'"';
}?>);
//Identification de la clé du titre courant dans la liste de lecture complète
for(positionLecture=0;positionLecture<listeLecture.length;positionLecture++)
{
if(listeLecture[positionLecture]==nomSon)
{
break;
}
}
/**********************************************************************************/
//Constitution de la liste de lecture. Celle ci comprend tous les titres à partir du titre sélectionné//
/**********************************************************************************/
chaineLecture='media/media.'+nomSon+'.mp3';
i=positionLecture+1;
for(i;i<listeLecture.length;i++)
{
suiteChaine='|media/media.'+listeLecture[i]+'.mp3';
chaineLecture=chaineLecture+suiteChaine;
}
/********************/
//Affichage du lecteur//
/********************/
//On crée un nouvel objet player
playerJava=document.createElement("object");
//Création d'un nouvel objet param
param=document.createElement("param");
//Ajouts des attributs du nouveau param
param.setAttribute('name','movie');
param.setAttribute('value','inc/dewplayer.swf?mp3='+chaineLecture+'&autoplay=1&showtime=1');
//On rattache le nouvel objet param au nouveau player
playerJava.appendChild(param);
//On remplace l'ancien player par le nouveau
parent.replaceChild(playerJava,player);
//Ajouts des attributs du nouveau player
playerJava.setAttribute('id','pl');
playerJava.setAttribute('type','application/x-shockwave-flash');
playerJava.setAttribute('data','inc/dewplayer.swf?mp3='+chaineLecture+'&autoplay=1&showtime=1');
playerJava.setAttribute('width','240');
playerJava.setAttribute('height','20');
//Suppression de l'ancien player
delete player;
}
-->
</script>
<div class="player">
<div class="titrePlayer">Player</div>
<div class="corpPlayer">
<div id="pl2">
<?php
$chaineTitre=$son;
for($i=$positionListeLecture+1;$i<sizeof($listeLecture);$i++)
{
$chaineTitre=$chaineTitre.'|media/media.'.$listeLecture[$i].'.mp3';
}
if($lectureAuto)
{
$chaineTitre=$chaineTitre.'&autoplay=1';
}
$chaineTitre=$chaineTitre.'&showtime=1';
?>
<object id="pl" type="application/x-shockwave-flash" data="inc/dewplayer.swf?mp3=<?php echo $chaineTitre; ?>" width="240" height="20">
<param name="movie" value="inc/dewplayer.swf?mp3=<?php echo $chaineTitre; ?>" />
</object>
</div>
<ul id="playlist">
<?php
foreach ($listeLecture as $titre)
{
echo '<li class="titreMusique"><a href="?jouerson='.$titre.'">'.$titre.'</a></li>';
}
?>
</ul>
</div>
</div>
Vala
Le soucis avec ce code, c'est que, tout fonctionne normalement sur FF, mais soucis sur IE. La réécriture des liens à l'air de se faire correctement, mais lors du click sur un bouton, le lecteur disparait mais ne réapparait pas ... je dois avoir fait une boulette quelque part mais sans bon débuggueur sous IE, je patauge un peu dans la semoule. Une idée lumineuse ?
Merci beaucoup [/i][/i]
Modifié par kook.kai (10 Sep 2007 - 20:57)