11480 sujets

JavaScript, DOM et API Web HTML5

Bonsoir à tous, ou plutôt bonjour à tous les couches-tard Smiley biggol

Cela fait déjà un petit moment que j'utilise le petit lecteur dewplayer, super léger, super simple, esthétique, bref le top Smiley lol . 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 Smiley rolleyes )
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.'&amp;autoplay=1';
			}
		$chaineTitre=$chaineTitre.'&amp;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 Smiley lol

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 Smiley bawling ... 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 Smiley cligne [/i][/i]
Modifié par kook.kai (10 Sep 2007 - 20:57)
Bon bah en fait c'est bon Smiley lol
Je viens de comprendre pourquoi...j'ai fait les mêmes constatations que sur ce sujet : http://forum.alsacreations.com/topic-5-24267-1-Probleme-insertion-dynamique-de-ltobjectgt-avec-IE-resolu.html

Fallait vraiment trouver...obligation de définir les attributs après avoir attaché le player....enfin bref, pour que tout marche, faut le faire après.

Le code du premier post est modifié et peut être utilisé. (je n'ai pas fait de vérifications sur les navigateurs autres que IE et FF Smiley ohwell , si ça tente quelqu'un ^^)
Pas mal du tout ce player (plus joli que XSPF). Petit bémol : quand il joue une playlist, il n'y a pas la possibilité de récupérer l'info sur le fichier... (savoir quoi on joue) ou alors, j'ai pas vu... Smiley cligne
Voui c'est une petite merveille de alsacréations (Dew)^^.

Pour le petit bémol, le lecteur dewplayer normal en version 1.6 le fait très bien, mais tu perds la possibilité de lui faire lire plusieurs pistes à la suite comme sur le multi (faut encore rappuyer sur un bouton...nul Smiley lol ) (du moins j'ai pas testé avec le simple, dites moi si je me trompe).

Sinon on peut bien sûr rajouter un champ rafraichi régulièrement qui affiche la piste courante, mais bof....préfère être patient, ça arrivera un de ces jours sur le multi (v1.6 pour le normal, 1.5 pour les autres...ça arrivera Smiley lol )
Bonjour,

Je vois que sur votre page de présentation de Dewplayer:
http://www.alsacreations.fr/dewplayer
Je vois que dans la demo de la version normale 1.6 il y a les info de la piste jouée qui défilent. Or je n'arrive pas à le reproduire sur mon site, je n'ai que le timing qui s'affiche.
Pouvez-vous me dire comment activer l'affichage des info de la piste?

D'avance merci!
kook.kai a écrit :

Pour le petit bémol, le lecteur dewplayer normal en version 1.6 le fait très bien, mais tu perds la possibilité de lui faire lire plusieurs pistes à la suite comme sur le multi (faut encore rappuyer sur un bouton...nul Smiley lol ) (du moins j'ai pas testé avec le simple, dites moi si je me trompe).


J'ai rien dit, la version normal permet de lire plusieurs pistes à la suite sans soucis, on perd juste les boutons suivants et précédents (sauf si erreur de ma part ^^)

Pour ce qui est des différents noms des pistes, si les attributs "data" du lecteur et "value" de param sont correctement renseignés, le nom des pistes devrait correctement s'afficher....comme dans la présentation du lecteur sur cette fameuse page.
Merci de la réponse.
Je ne lis pas plusieurs pistes à la suite les unes des autres mais une piste = un player.
Le code qui se trouve actuellement sur ma page est le suivant:

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/demo_cd_06_07.mp3&showtime=1" width="200" height="20">
<param name="movie" value="dewplayer.swf?mp3=mp3/demo_cd_06_07.mp3&showtime=1" />
</object>

Quel est la syntaxe pour renseigner les champs "data" et "value"?

Merci
A+
Comme ça je ne vois pas de problème.... Smiley confused

Il faudrait vérifier la version du player (bien la version normale en 1.6), les chemins des différents fichiers, essayer avec des titres plus simples (sans caractères particuliers ou numériques), remplacer les '&' par des '&amp;'

Ah voui, le lecteur utilise les tags du fichier mp3 d'après ce que j'ai vu, si il n'y a rien dans les tags, il n'y aura aucune info dans le lecteur... à vérifier donc ^^