CODESIGN : Webdesigner Freelance, Intégrateur HTML Freelance, Développeur PHP Freelance

Dans le cadre de la refonte complète du site du musicien Yves Rechsteiner, et comme vous pouvez le voir sur l'image ci-dessous, j'ai une playlist de X extraits au format MP3, et je veux pouvoir activer la lecture d'un simple clic sur le nom de l'extrait.

Même si le site est en HTML5 je ne compte pas utiliser pour l'instant le tag AUDIO car trop de problèmes de compatibilité...
Je pars donc sur le player JW Player version Flash.

Pas facile de trouver des informations cohérentes, mais finallement, en lisant bien, on apprends que le lecteur, lors de son initialisation, cherche l'existence d'une mathode en Javascript nommée "playerReady", et sans elle, rien de jouable :(

var player = null;
var track = null;

function playerReady(thePlayer) {
    player = window.document[thePlayer.id];
    addListeners();
}

function createPlayer() {
    var flashvars = {
    [/CODE:table_elt:
        'class' => 'yr_extraits',
        'filter' => 'f_status>0',
        'html' => '
        file:"{ITEM_F_FILE_RELURL}", 
        ':]
        autostart:"false"
    }

    var params = {
        allowfullscreen:"true", 
        allowscriptaccess:"always"
    }

    var attributes = {
        id:"ply",  
        name:"ply"
    }
    swfobject.embedSWF("http://www.codesign.fr/scripts/mediaplayer/player.swf", "mediaspace", "150", "24", "9.0.115", false, flashvars, params, attributes);
}

function addListeners() {
    if (player) { 
        player.addModelListener("TIME", "positionListener");
    } else {
        setTimeout("addListeners()",100);
    }
}

function positionListener(obj) { 
    currentPosition = obj.position;
    finalPosition = obj.duration;
    percent = Math.round( currentPosition / finalPosition * 100 );
    var tmp = document.getElementById(track.getAttribute('rel'));
    if (tmp) { tmp.innerHTML = '<em style="width:' + percent + '%">' + percent + "%</em>"; }
}

createPlayer();

function _play( url, atrack )
    {
    if( atrack == track )
        {
        player.sendEvent('STOP');
        track = null;
        }
    else
        {
        player.sendEvent('STOP');
        player.sendEvent('LOAD', url );
        player.sendEvent('PLAY');
        track = atrack;
        }
    }

Toutes cette partie est du Javascript. Il faut bien prendre la dernière version de SWFObjects, et non pas celle fournie avec JW Player. La fonction "createPlayer" va donc placer le Flash dans le code HTML correspondant à "mediaspace". Si, lors de cette création, vous ne spécifiez pas de "file", alors tout le reste ne fonctionnera pas :(

Ici, certaines parties sont codée pour mon CMS (comme le [CODE:...:]).

Comme je voulais aussi afficher la progression de la lecture sans passer par leur propre afficheur, j'ai imaginé une barre de progression en CSS/HTML. Dans la fonction "positionListener", je change la taille de cette barre en lui donnant une valeur d'attribut "width" égale au pourcentage de progression.

Le code HTML de toute cette partie, encapsulée dans mon CMS :

            <section id="b-ecouter">
                <h2>Ecouter</h2>
                <ul>
                [/CODE:table_list:
                    'class' => 'yr_extraits',
                    'filter' => 'f_status>0',
                    'html' => '
                    <li>
                        <command rel="com{ITEM_ID}" title="Cliquez pour écouter Intitulé" icon="/medias/control_play.png" onclick="_play('{ITEM_F_FILE_RELURL}',this)">{ITEM_F_TITLE} ({ITEM_F_FILE_SIZE}) <small id="com{ITEM_ID}"><em></em></small></command>
                    </li>
                    ':]
                </ul>
                <div id="samp" style="position:absolute;top:0;left:0;z-index:-1">
                    <div id="mediaspace">This text will be replaced</div>
                </div>
            </section>

L'emplacement du lecteur est dans "samp", qui est caché via "position:absolute...;z-index:-1". Le lecteur est réellement placé dans "mediaspace" lors de l'appel à createPlayer. Ce même appel de fonction déclenche "playerReady" (Flash envois une référence à l'objet créé afin d'être accessible via le JS), lui-même déterminant quels évènements je vais traquer.

Le code CSS de cette zone :

#b-brand aside section#b-ecouter li {padding:0 0 0 20px;background:url(images/puce-brand-nav.png) no-repeat 0 0;margin-bottom:5px;}
#b-brand aside section#b-ecouter li command:hover {cursor:pointer;}
#b-brand aside section#b-ecouter li command small {margin:2px 0 0 0;width:70%;background:rgba(0,0,0,0.2);display:block;height:5px;overflow:hidden;}
#b-brand aside section#b-ecouter li command small em {display:block;background:rgba(0,0,0,0.7);text-indent:-9999px;height:5px;width:0;}

Les points à respecter pour ne pas galérer comme j'ai fait sont :
- la version de SWF Object
- l'attribut file lors de la création de l'objet ne doit pas être vide

Et voilà ma super playlist focntionnelle !

SWF Object
JW Players Examples