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

La dernière étape de réalisation consiste simplement à :
1- mettre des fonds de couleurs unies dans un premier temps, en prenant les couleurs correspondantes selon la source graphique et en modifiant au besoin la couleur de la police.
2- faire la découpe du visuel dans la source graphique, l'exporter en PNG32 et créer la règle CSS background:url(image.png)no-repeat 0 0...

Parfois l'image ne passe pas avec IE6, il suffit alors de mettre une règle position:relative... et parfois zoom:1 !

Pourquoi du PNG32, lourd et pesant ? Parceque je maquette, et je suis susceptible de faire des cartes pour sprites plus tard...

C'est quoi une carte pour sprite ? et ben ce sont plusieurs visuels regroupés dans la même image.



Quand toutes les règles ont été crées, que les règles éventuelles de la partie 1 ont été modifiées pour s'adapter aux contraintes de gestion des visuels, on peut alors retravailler chaque visuels pour gagner du poids...

Petite note sur les préfixes que j'utilise :
- bg- pour les fonds de blocs
- puce- pour les ... puces :)
- btn- pour les ... boutons :p

Un exemple pour le header de La Librairie des Ecoles

/*== BRAND */
#b-brand {background:url(images/bg-page.png) repeat-y 0 0;padding:0 10px 0 10px;width:960px;}
#b-brand .b-wrapper {height:101px;overflow:hidden;color:#fff;position:relative;background:#213E80 url(images/bg-brand.png) no-repeat 0 0;}
#b-brand hgroup {position:absolute;left:115px;top:15px;}
#b-brand hgroup h1 {font-weight:normal;margin:5px 0;font-family:GlyphaRoman,courier;font-size:35px;border:1px solid #fff;border-right:0;border-left:0;padding:5px 0;}
#b-brand hgroup h1 a {text-decoration: none;color:#fff;}
#b-brand hgroup h2 {font-weight:normal;margin:10px 0;font-family:courier;font-size:12px;}
#b-brand nav {padding:10px 5px;margin:0 5px 0 0;width:265px;float:right;text-align:center;font-size:12px;font-family:Arial,sans-serif;color:#1C305F;background:#DBDDE8;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
#b-brand nav a, #b-brand nav a:link, #b-brand nav a:visited {color:#1C305F}
#b-brand nav a:hover {color:#203d7f;text-decoration:none;}

Explications :
Le visuel bg-page ne pourra pas être inséré dans la carte de prites car il doit être répété... A l'inverse, bg-brand pourra être utilisé dans la carte de sprites.

#m-main ul li#m-lecture {background:url(images/bg-nav-lecture.png) repeat-y 0 0;}
#m-main ul li#m-francais {background:url(images/bg-nav-francais.png) repeat-y 0 0;}
#m-main ul li#m-mathematiques {background:url(images/bg-nav-maths.png) repeat-y 0 0;}
#m-main ul li#m-histoiregeo {background:url(images/bg-nav-histoire.png) repeat-y 0 0;}
#m-main ul li#m-sciences {background:url(images/bg-nav-default.png) repeat-y 0 0;}
#m-main ul li#m-morale {background:url(images/bg-nav-default.png) repeat-y 0 0;}
#m-main ul li#m-parniveau {background:url(images/bg-nav-niveaux.png) repeat-y 0 0;}

Classiquement, toutes ces images de fond peuvent être insérées dans la carte de sprites, mais elles se répètent en hauteur, donc elles devront être alignées en longueur dans la carte...

.b-livre nav li.b-feuilleter {background:url(images/puce-feuilleter.png) no-repeat 0 0;padding:3px 0 3px 20px;}
.b-livre nav li.b-conseiller {background:url(images/puce-email.png) no-repeat 0 0;padding:3px 0 3px 20px;}

Les puces, elles, c'est sûr, doivent être dans une carte, alignées plutôt de manières verticales, ou alors très éloignées les unes des autres...

Je n'ai pas encore monté les cartes, dès que c'est fait, je les pose ici.

Maintenant que la structure générale est posée, vient le temps d'appliquer les styles graphiques en commençant par les polices...

Je reprends le même sens d'intégration, commençant par les éléments généraux et terminant par les éléments spécifiques à la page d'accueil (gabarit principal). Pour chaque élément je vérifie dans le fichier du gabarit la taille, le corps et le type de police. J'utilise directement les pixels, je ne cherche pas à faire une quelconque relation entre les tailles relative et autres complexités pour rendre accessible ma page avec des tailles de polices variables, puisque la plupart des navigateurs modernes utilisent le zoom pour agrandir une page.

Par contre, en lieu et place d'image avec une police "non générique", j'utilise les capacités @font-face, supportées par, tenez-vous bien, IE6 !!!

Pour la génération des règles, je ne m'embête pas : http://www.fontsquirrel.com/fontface/generator

Le seul problème que j'ai actuellement vient de la différence de tailles de polices entre Windows de MacOSX... D'où l'intérêt d'avoir des boites flexibles, et là j'ai quelques améliorations à apporter... Ok, c'est fait...

Voilà les screenshots qui montrent les différences mais après étape 4 d'insertion des couleurs et visuels (sur MAC et PC) :