Bonjour
J’ai choisi pour un projet ce lecteur mp3 :
http://www.happyworm.com/jquery/jplayer/0.2.5/demo-02.htm
pour la simple raison que non seulement il marche très bien mais en plus il est entièrement customisable via css et html, ce qui est suffisament rare pour être souligné.
J’ai fait un petit module pour l’intégrer à Drupal mais hélas il n’est pas générique. Je mets ici le code si car quelqu’un a demandé à jeter un oeil dessus et peut être quelqu’un serait intéresse pour m’aider à la rendre générique et pourquoi pas le contribuer (je manque de temps pour y pervenir seul). J’ai fait ça hier donc ce n’est pas encore un truc peaufiné.
Le probleme est que pour l’instant il suppose d’avoir installé :
- le module audio (il permet de récuperer les metatags, ce qui m’intéressent beaucoup
- un type de contenu «playlist» qui dispose d’un champ nodereference en mode «create and reference» grace noderelation ships : l’idée est tout simplement de créer un type de contenu album/playlist, et d’ajouter des morceaux (type de contenu audio) qui sont rattachés à cet album ( grace à node relationships + node reference)
- le module que j’ai fait se content quand on se trouve sur un type de contenu album (que j’ai appelé playlist ici) d’aller récupérer les chansons appartenant à cet album puis de créer le javascript nécessaire à l’éxecution de jplayer :
-il suppose également que le champ nodereference s’appelle «field_enfants_audio» :-)
Je ne le mets pas encore à disposition en fichier attaché car je n’ai pas fait de vérification sur la sécurité…
-avoir le swf installé dans un suos répertoir jquery
<?php
//$Id$
/<strong>
* @file
* Générer une playlist mp3 avec le lecteur http://www.happyworm.com/jquery/jplayer/0.2.5/demo-02.htm
* combinévec le module audio (type de contenu : audio) et le type de contenu "playlist".
* La relation entre le fichiers audio (mp3) et le type de contenu "playlist" est tissé
* Par le module Node relations ships : le type de contenu playlist contient tous les nids
* des nodes "enfants" audio.
*/
function
playermp3_nodeapi(&$node, $op, $a3 = NULL, $a4 = NULL){
// si on est sur un node de type playlist
if($op == 'view' && $node->type == 'playlist'){
// on n'éxécute le reste du code que si nous ne sommes pas en train de voir un teaser.
if(!$a3){
$path = drupal_get_path('module', 'playermp3');
// on ajoute le css du lecteur
drupal_add_css($path .'/jplayer.css', 'module');
// on ajoute l'API de jqueryplayer
drupal_add_js ($path .'/jplayer/jquery.jplayer.js', 'module');
// on récupère les nids des nodes audio enfants
$songs_nids = playlist_get_songs($node);
// on formate la playlist des enfants pour qu'elle soit exploitable par jquery.player
$playlist = format_jplayer_playlist($songs_nids);
//on ajoute dans le node le script qui affiche lecteur en lui transmettant la playlist
drupal_add_js (playermp3_inline_js($playlist), 'inline');
$node->content['playermp3'] = array(
'#value' => playermp3_html(), // afficher le html du lecteur dans le node
'#weight' => 5,
);
}
}
}
/</
strong>
* On retrouver les chansons appartenant à cette playlist (node audio qui sont référencé par le type de contenu
* servant d'album ou de playlist
* retourne la liste de nids des enfants
*/
function playlist_get_songs($node){
$songs_nids = array();
foreach($node->field_enfants_audio as $child){
$songs_nids[] = $child['nid'];
}
return $songs_nids;
}
/<strong>
* A partir des nids des enfants, on retrouve les informations des chansons
* puis on les formate pour créer une liste de morceaux interprétables par le js de jquery
* retourne une playlist du type {name : xxxx, mp3 : xxxx},
*/
function format_jplayer_playlist($songs_nids){
$mp3s = array();
$i = 0;
foreach($songs_nids as $nid){
$song = node_load($nid);
$mp3s[$i]['
name'] = $song->title;
$mp3s[$i]['mp3'] = base_path().$song->audio['file']->filepath;
$i++;
}
$playlist = '';
// on générale la playlist
// attention à ne pas mettre de virgule à la fin du dernier mp3 de la playlist
// sinon l'autoplay ne marchera pas sur IE7
$index = 0;
foreach($mp3s as $mp3){
$index == 0 ? $separateur = '' : $separateur = ', ';
$playlist .= $separateur.'{name:"'. $mp3['name'] .'", mp3:"'. $mp3['mp3'] .'"}';
$index++;
}
return $playlist;
}
/</
strong>
* Le code objet js permettant de générer le lecteur de notre page
*/
function playermp3_inline_js($playlist){
global $base_url;
$absolute_path = $base_url.'/'.drupal_get_path('module', 'playermp3');
return '
$(document).ready(function(){
var playItem = 0;
var myPlayList = [
'
. $playlist .'
];
$("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(true); // Parameter is a boolean for autoplay.
demoInstanceInfo($(this), $("#jplayer_info"));
},
// oggSupport: true, Do not use : will make crash the player with firefox 3.5 because of html5
// native audio support ( ?)
// IMPORTANT ! indiquer le chemin le dossier ou se trouver le fichier swf par rapprot à index.php de Drupal
swfPath : \''
.$absolute_path.'/jplayer\'
})
.jPlayerId("play", "player_play")
.jPlayerId("pause", "player_pause")
.jPlayerId("stop", "player_stop")
.jPlayerId("loadBar", "player_progress_load_bar")
.jPlayerId("playBar", "player_progress_play_bar")
.jPlayerId("volumeMin", "player_volume_min")
.jPlayerId("volumeMax", "player_volume_max")
.jPlayerId("volumeBar", "player_volume_bar")
.jPlayerId("volumeBarValue", "player_volume_bar_value")
.onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
var myPlayedTime = new Date(playedTime);
var ptMin = (myPlayedTime.getUTCMinutes() < 10) ? "0" + myPlayedTime.getUTCMinutes() : myPlayedTime.getUTCMinutes();
var ptSec = (myPlayedTime.getUTCSeconds() < 10) ? "0" + myPlayedTime.getUTCSeconds() : myPlayedTime.getUTCSeconds();
$("#play_time").text(ptMin+":"+ptSec);
var myTotalTime = new Date(totalTime);
var ttMin = (myTotalTime.getUTCMinutes() < 10) ? "0" + myTotalTime.getUTCMinutes() : myTotalTime.getUTCMinutes();
var ttSec = (myTotalTime.getUTCSeconds() < 10) ? "0" + myTotalTime.getUTCSeconds() : myTotalTime.getUTCSeconds();
$("#total_time").text(ttMin+":"+ttSec);
})
.onSoundComplete( function() {
playListNext();
});
$("#ctrl_prev").click( function() {
playListPrev();
return false;
});
$("#ctrl_next").click( function() {
playListNext();
return false;
});
function displayPlayList() {
for (i=0; i < myPlayList.length; i++) {
$("#playlist_list ul").append("<li id=\'playlist_item_"+i+"\'>"+ myPlayList[i].name +"</li>");
$("#playlist_item_"+i).data( "index", i ).hover(
function() {
if (playItem != $(this).data("index")) {
$(this).addClass("playlist_hover");
}
},
function() {
$(this).removeClass("playlist_hover");
}
).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
}
});
}
}
function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}
function playListConfig( index ) {
$("#playlist_item_"+playItem).removeClass("playlist_current");
$("#playlist_item_"+index).addClass("playlist_current");
playItem = index;
$("#jquery_jplayer").setFile(myPlayList[playItem].mp3, myPlayList[playItem].ogg);
}
function playListChange( index ) {
playListConfig( index );
$("#jquery_jplayer").play();
}
function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
}
function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
}
});
'
;
}
/**
* Le html de notre lecteur, interagissant avec le js ci-dessus.
*/
function playermp3_html(){
return '
<div id="jquery_jplayer"></div>
<div id="player_container">
<ul id="player_controls">
<li id="player_play">play</li>
<li id="player_pause">pause</li>
<li id="player_stop">stop</li>
<li id="player_volume_min">min volume</li>
<li id="player_volume_max">max volume</li>
<li id="ctrl_prev">previous</li>
<li id="ctrl_next">next</li>
</ul>
<div id="play_time"></div>
<div id="total_time"></div>
<div id="player_progress">
<div id="player_progress_load_bar">
<div id="player_progress_play_bar"></div>
</div>
</div>
<div id="player_volume_bar">
<div id="player_volume_bar_value"></div>
</div>
</div>
<div id="playlist_list">
<ul>
<!-- The function displayPlayList() uses this unordered list -->
</ul>
</div>
<div id="jplayer_info"></div>
'
;
}
?>- Vous devez vous identifier ou créer un compte pour écrire des commentaires
