all html : Le portail des webmaster

Playlist pour le dewplayer en php avec surcouche javascript

Cet article est actuellement publié sur le site.

Article publié le jeudi 23 août 2007 par clb56.
Cet article est classé dans les catégories « PHP »

Il s'agit d'une combinaison entre un script php et une surcouche javascript qui permettent de renseigner le lecteur mp3 [i][url=http://www.alsacreations.fr/mp3-dewplayer.html]"Dewplayer"[/url][/i] à partir d'une simple liste de liens html.

Dans une seconde phase le même principe sera décliné pour 4 situations de listes générées automatiquement.

[list]
[*]Playlist simple
[*]Playlist multi répertoires
[*]Playlist simple avec commentaire (présentation) joint à chaque son
[*]Playlist multi répertoires avec commentaire joint à chaque son
[/list]



Mais dans un premier temps voici le principe général du fonctionnement de la playlist.

Principe général de la playlist

Contrôle en php

Du point de vue html tout part d'une simple série de liens structurée par une liste <ul>.
Du point de vue php, chaque lien de la liste de sons va permettre de passer dans l'url l'adresse du son concerné et aura la forme :
<a href="?go_son=/musique/un_son.mp3">Un son</a>
Le code php suivant permet de récupérer l'adresse transmise dans une variable qui servira à renseigner le Dewplayer
<?php if (isset($_GET['go_son'])) { // Etape intermédiaire, on récupère dans la variable $pre_son l'adresse transmise. $pre_son=$_GET['go_son']; // La variable définitive $son permet d'ajouter la mention autoplay=1 $son=$pre_son."&amp;"."autoplay=1"; } else { // Si aucune adresse n'est transmise alors la variable $son a pour valeur une adresse par défaut et surtout pas d'autoplay ! ... Pour ficher la paix aux gens ;-) $pre_son="/musique/son1.mp3"; $son="/musique/son1.mp3"; } ?>
Voici maintenant le code html du Dewplayer avec les ajouts php permettant de le renseigner, on le complète par un lien direct vers le fichier mp3 concerné :
<object type="application/x-shockwave-flash" data="/dewplayer.swf?son=<?php echo $son; ?>" height="20" width="240"> <param name="movie" value="/dewplayer.swf?son=<?php echo $son; ?>" /> </object> <p>Fichier mp3 : <a href="<?php echo $pre_son; ?>"><?php echo $pre_son; ?></a>.</p>

En guise de 1ère synthèse je vous propose un exemple de code complet sur une liste de 4 sons :
<?php if (isset($_GET['go_son'])) { $pre_son=$_GET['go_son']; $son=$pre_son."&amp;"."autoplay=1"; } else { $pre_son="/musique/son1.mp3"; $son="/musique/son1.mp3"; } ?> <div id="content_dew_player"> <object type="application/x-shockwave-flash" data="/dewplayer.swf?son=<?php echo $son; ?>" height="20" width="240"> <param name="movie" value="/dewplayer.swf?son=<?php echo $son; ?>" /> </object> <p>Fichier mp3: <a href="<?php echo $pre_son; ?>"><?php echo $pre_son; ?></a>.</p> </div> <ul id="liste_sons"> <li><a href="?go_son=/musique/son_1.mp3">Son 1</a></li> <li><a href="?go_son=/musique/son_2.mp3">Son 2</a></li> <li><a href="?go_son=/musique/son_3.mp3">Son 3</a></li> <li><a href="?go_son=/musique/son_4.mp3">Son 4</a></li> </ul>

Contrôle en javascript

Le javascript réalise une surcouche qui permet d'économiser à chaque activation des liens un échange avec le serveur appelant une nouvelle page pour chaque son.
Voici le contenu commenté du fichier externe playlist_dewplayer.js :
function control_player() { // Test sur les méthodes if (!document.getElementById || !document.getElementsByTagName){ return false; } var referent=document.getElementById('liste_sons'); var liens_son=referent.getElementsByTagName('a'); for (i=0; i<liens_son.length; ++i) { liens_son[i].onclick=function() { /* Au clique sur le lien on récupère l'adresse absolue du son. Attention elle sera du type [url=http://...etc...]http://...etc...[/url] */ var adresse_son=this.href; // Puis on extrait la chaine de caractère commençant à la dernière occurence du caractère = var pre_son=adresse_son.substring(adresse_son.lastIndexOf("=")); /* Enfin on extrait du résultat une nouvelle chaine de caractère commençant à l'index 1 de la précédente. L'index 0 qui correspond au caractère = est donc exclu. La variable son est maintenant opérationnelle. */ var son=pre_son.substring(1); /* On re génère complètement le code html du Dewplayer grâce à la propriété innerHTML et on le renseigne avec la variable son */ document.getElementById('content_dew_player').innerHTML="<object type='application/x-shockwave-flash' data='/dewplayer.swf?son="+ son +"&autoplay=1' width='240' height='20'><param name='movie' value='/dewplayer.swf?son="+ son +"&autoplay=1' /></object><p>Fichier mp3 : <a href='"+ son +"'>"+ son +"</a>.</p>"; // On annihile le lien return false; } } } On lance la fonction "control_player()"une fois le chargement de la page effectif window.onload=control_player;