Illustration sonore mp3

© Christian PAULUS. Document créé le 25 septembre 2008 , mis à jour le 17 avril 2009.

Il y a des moments où tout réussit. Il ne faut pas s'effrayer : ça passe. Jules Renard (Journal)

Accueil du site > Outils > Illustration sonore mp3

Plugin / SPIP 1.92, SPIP 2

Fond_MP3 (Fmp3) est un plug-in SPIP qui permet de jouer un son mp3 en guise d’illustration sonore pour un article, une rubrique, ou l’ensemble de votre site.

Avertissement

Fmp3 est un programme libre, vous pouvez le redistribuer et/ou le modifier selon les termes de la Licence Publique Generale GNU publiée par la Free Software Foundation (version 2).

Fmp3 est distribué car potentiellement utile, mais SANS AUCUNE GARANTIE, ni explicite ni implicite, y compris les garanties de commercialisation ou d’adaptation dans un but spécifique. Reportez-vous à la Licence Publique Générale GNU pour plus de détails.

Fmp3 est sous licence GPL/GNU. Ce n’est pas le cas des éléments qui l’accompagnent (Javascript et player flash). Il convient donc de lire les scripts concernés ou consulter les sites de leurs auteurs respectifs.

Les éléments qui accompagnent Fmp3 sont issus du site de Sean O.

Préambule

Fmp3 permet d’ajouter un fond sonore à un article, une rubrique, ou à l’ensemble de votre site. La mise en place d’un son ou d’une musique sur une page web n’est pas toujours souhaitable. L’ergonome vous sera d’un bon conseil. Lire le paragraphe des conseils si besoin.

Installation

Téléchargez l’archive de fond_mp3 disponible sur la zone.

L’installation nécessite de placer le dossier du plugin dans votre dossier plugins. Pour plus d’information sur l’installation d’un plugin, consulter cette page sur Spip.net.

Configuration

Dans l’espace privé, cliquez sur l’icône Configuration puis sur l’onglet « Illustration sonore ».

PNG

Définissez la configuration générale de Fmp3 puis validez.

PNG

Appliquer une illustration sonore à une rubrique ou un article

En espace privé, la boite « Ajouter un son à (une rubrique, un article) » vous permet de sélectionner le son mp3 pour cet objet.

Option ajouter une illustration sonore {PNG}

L’importation de votre illustration sonore mp3 réalisée, une nouvelle boite apparaît sur le côté gauche de votre espace privé :

Boite lecture d'illustration sonore {PNG}

Cliquez sur le bouton player pour écouter le son attaché.

Insertion de la balise ILLUSTRATION_SONORE

Pour activer l’affichage du player (le bouton qui permet de jouer le son mp3), vous devez insérer la balise ILLUSTRATION_SONORE dans vos squelettes. Le plus simple est de placer cette balise dans votre squelette « inc-pied.html ». Si vous utilisez la distribution par défaut de SPIP, ce squelette « inc-pied.html » modifié est automatiquement chargé.

Personnaliser l’affichage du player

Vous pouvez personnaliser l’affichage du player en créant les feuilles de styles nécessaires dans votre répertoire des squelettes. Il vous suffit de créer un répertoire « css » dans votre répertoire de squelettes, de recopier les fichiers « fmp3_public.css » et « fmp3_public_ie.css » dans ce répertoire et de les adapter à votre besoin.

Conseils

Placer une illustration sonore sur un site web peut-être un plus, mais attention à ne pas agresser votre visiteur par un son trop violent. N’oubliez pas qu’il est peut-être en train de visiter votre site dans un calme absolu et reposant. Evitez d’utiliser l’option « démarrage automatique » ou alors sélectionnez une musique douce qui démarre tranquillement. Si vous ne suivez pas les règles élémentaires de courtoisie, ne soyez pas surpris de voir votre visiteur fermer la fenêtre de votre site et retirer ce dernier de ses favoris.

Désactiver le plug-in

Fmp3 utilise la table SQL spip_meta de SPIP en y ajoutant un champ pour conserver en mémoire ses préférences.

Vous pouvez désactiver Fmp3 en décochant simplement sa case dans la boite de sélection des plugins. Vos préférences seront conservées.

Pour désinstaller Fmp3, cliquez avant tout sur la petite boite présente dans le champ, puis sur « Effacer tout ». Vos préférences liées à Fmp3 seront supprimées.

Test et validation

Testé et validé pour :
- Firefox 3.0.1 / Windows Vista
- Internet Explorer 7.0 / Windows Vista
- Opera 9.5.1 / Windows Vista

Répondre à cet article

  • Illustration sonore mp3 28 janvier 2009 17:01
    Bonjour,
    Je suis sur SPIP2, j’active ce plugin qui fonctionne dans l’interface privée mais pas dans l’interface publique malgré la présence de la balise qui ne semble pas comprise (code conditionnel non affiché)
    Merci pour votre aide

    Répondre à ce message

    • Illustration sonore mp3 5 février 2009 11:11, par lull
      Ce plugin semble me convenir parfaitement, mais je ne vois pas comment afficher le player en ligne. J’ai essayer avec ILLUSTRATION_SONORE dans l’article où je souhaite inserer le le lecteur (je ne sais pas trop à quel endroit insérer la balise exactement). Mais spip ne reconnait pas la balise apriori.
      Ça serait dommage d’avoir fait ce bon tutoriel, sans nous en dire d’avantage. Merci d’avance et bravo.

      Répondre à ce message

      • Illustration sonore mp3 5 février 2009 14:25, par Christian PAULUS

        Edite le code source de la page et vérifie la présence de

        <!-- fmp3 -->

        dans le head.

        Si ok, c’est que le plugin est activé correctement. Et si le player n’apparaît pas, c’est qu’il manque la balise.

        Si la balise est dans le squelette, il faut vider le cache et recharger la page.

        Bon courage.

        Répondre à ce message

  • même commentaire que les précédents : le plugin est bien actif (vérification faite dans le code source).

    Mais la balise #ILLUSTRATION_SONORE ne fonctionne pas. Ni dans une boucle article, ni dans une boucle document. Que faire ? Essais réalisés sue spip 2

    Répondre à ce message

    • Illustration sonore mp3 bug ou incompatibilité ? 10 février 2009 11:34, par Christian PAULUS

      Ah ! En effet. Ca ne fonctionnait plus sous SPIP 2.0.3.

      Maintenant corrigé. (version 1.07)

      Merci.

      Répondre à ce message

      • bonjour,

        - je voudrais savoir ou dans le squelette inc-pied il faut placer la balise ??
        - et quelle balise est ce ?? juste #ILLUSTRATION_SONORE

        je suis debutant et je n’y connait rien en balises ...

        merci beaucoup d’avance

        Répondre à ce message

        • Illustration sonore mp3 bug ou incompatibilité ? 18 février 2009 09:34, par Christian PAULUS

          C’est écrit dans l’article :

          Si vous utilisez la distribution par défaut de SPIP, ce squelette « inc-pied.html » modifié est automatiquement chargé.

          Regarde dans le dossier du plug-in. Il y a un fichier « inc-pied.html ». Ce fichier contient la balise en question. Si SPIP ne trouve pas de « inc-pied.html » dans le dossier des squelettes, ni dans un autre dossier de plug-in, c’est celui de fond-mp3 qui sera chargé à la place de la dist.

          Répondre à ce message

    • Illustration sonore mp3 bug !!! 26 août 2009 01:22, par Oggiwan

      Il semble effectivement qu’il y ait plusieurs bugs sur ce plugin, au demeurant intéressant... en tout cas avec un SPIP 1.9.2i (je n’ai pas testé sur 2.0x). Voilà les corrections que j’ai apportées pour le faire fonctionner correctement :

      1- Le premier bug est dans la définition de la balise (dans "balise/illustration_sonore.php") :

      Le test (quand SPIP < 193) ne renvoie ni type d’élément (article/rubrique), ni identifiant, car $GLOBALS['page']['contexte'] n’a pas de clé "page", mais seulement : "articleXXX/rubriqueXXX", "date_redac", "date" et "id_article/id_rubrique". Ma modification (ajout commenté) recherche la clé qui contient "id_" pour trouver le type et l’id.

      if(fmp3_spip_est_inferieur_193()) {
              $contexte = $GLOBALS['page']['contexte'];
              $objet = $result = "";
              if(isset($contexte['page']))
              {
                      $objet = $contexte['page'];
                      $id_objet = $contexte['id_'.$objet];
                      $objet = substr($objet, 0, 3);
              }
              else if(count($contexte) == 2) {
                      $objet = "site";
                      $id_objet = "0";
              }
              else { // AJOUT POUR AVOIR "art" ou "rub" + id
                      foreach ($contexte as $info=>$valeur) {
                      if (preg_match("@^id_@",$info)) {
                              $objet = substr($info, 3, 3);
                              $id_objet = $valeur;
                      }
              } // FIN D'AJOUT
      }

      2- L’autre bug est dans le(s) javascript(s) ("javascript/jquery.fmp3.min.js" et "javascript/jquery.fmp3.js") ou dans l’appel de ces javascripts par "inc/fmp3_api_globales.php" :

      Dans "inc/fmp3_api_globales.php", le jQuery envoie le paramètre "autoStart" (lignes 223-236) :

      $(document).ready(function(){
              $(\"#fmp3-object\").jmp3({
                      playerPath: \"".$playerPath."\"
                      , mp3path: \"".$mp3path."\"
                      , showDownload: \"".$showDownload."\"
                      , autoStart: \"".$autoStart."\"
                      , backColor: \"".$backColor."\"
                      , frontColor: \"".$frontColor."\"
                      , repeatPlay: \"".$repeatPlay."\"
                      , songVolume: \"".$songVolume."\"
                      , width: ".$width."
                      , height: ".$height."
              });
      });

      Or dans "javascript/jquery.fmp3.min.js" et "javascript/jquery.fmp3.js", le paramètre attendu est "autoplay" (lignes 62 et 79 de "jquery.fmp3.js") :

      + "&autoStart=" + options.autoplay

      (et "d.autoplay" dans "jquery.fmp3.js")

      En renommant soit "autoplay" en "autoStart" (ce qui me semble logique) dans les JS, soit l’inverse dans le PHP, le démarrage automatique fonctionne...

      Comme vous modérez les messages, ne vous sentez pas obligés de publier ma réponse... Si vous la jugez intéressante, faites juste un correctif pour le plugin, c’est cela qui compte ! Et si vous voulez m’envoyer un courriel, n’hésitez pas...

      Néanmoins, j’aurais juste une question : pourquoi n’envisagez-vous pas une méthode qui éviterait d’ajouter une balise au squelette ? Si le plugin est actif, ne serait-il pas possible de traiter tout en JavaScript dynamique généré par PHP ?

      Dans l’attente de vous lire, et espérant avoir pu être utile...

      Cordialement,

      Oggiwan

      Répondre à ce message

      • Illustration sonore mp3 bug !!! 26 août 2009 18:23, par Christian PAULUS
        Merci pour le compte-rendu. Je le poste qd même, ayant très peu de temps pour voir de plus près maintenant. Si quelqu’un a accès à la zone et du temps pour tester/valider ?

        Répondre à ce message

  • J’ai essayé ce plugin sur deux plateformes (windows et mac) avec firefox.

    Sur windows, le téléchargement d’un son fonctionne mais le bouton du player n’apparait pas dans la partie admin.

    Sur mac, le téléchargement fonctionne également, le bouton (noir) apparait bien sur la colonne de droite dans la partie admin.

    Sur mac avec safari, le son est bien téléchargé et le player apparait dans la partie admin.

    Mais il y a un bug bloquant :

    De toute façon, la balise #ILLUSTRATION_SONORE ne fonctionne pas sur le site public. Elle n’est pas calculée : il n’y a rien dans le code source.

    Répondre à ce message

  • Illustration sonore mp3 1er novembre 2009 20:12, par Jérôme

    Bonjour,

    Le plugin correspond à ce que je cherchais. Après installation, et ajout de la balise #ILLUSTRATION_SONORE dans mon squelette, je n’ai rien qui apparait dans la partie publique.

    En privé, j’ai bien le lecteur et le son mais rien en publique : nilecteur, ni son.

    En lisant le forum, je vois que d’autres ont eu le problème. Est-ce que quelqu’un a trouvé une solution ?

    Répondre à ce message

    • Illustration sonore mp3 2 novembre 2009 23:16, par Condorito
      Correction de l’autoplay js en autoStart (et oui, la majuscule compte pour beaucoup...grrrrr ;), tout fonctionne à merveille !!! Merci beaucoup pour la correction du script, vous êtes un chef !!!!
      Bonne soirée,
      Condorito

      Répondre à ce message

      • Illustration sonore mp3 7 novembre 2009 11:30

        Bonjour,
        bon, je n’y comprend rien à rien.
        Comment mettre une balise, où, comment ???? Je vois bien dans la racine du site le inc-head et tout et tout, mais je ne sais pas quoi faire ??? Comment insérer la balise et où ??
        Pour info, j’utilise spip 2.0.10

        Merci d’avance pour votre aide.
        CYrille.

        Répondre à ce message

    • Illustration sonore mp3 9 décembre 2009 09:54, par Alain

      Bonjour,

      Après modification des scripts et fichiers, le bug reste intact, à savoir dans la partie privée cela fonctionne mais pas de musique lors du chargement de la page dans la partie publique... (j’ai fait attention à la majuscule).

      J’utilise spip 2.0.10 avec scolaspip.

      Cordialement.

      Répondre à ce message

  • Illustration sonore mp3 13 décembre 2009 13:04

    Je confirme...
    Ce plugin est annoncé comme compatible avec spip 2 hors son objectif n’est pas atteind vu que rien ne s’affiche au niveau public.
    Ce plugin et marqué stable, il devrait plutot etre en dev car non terminé au vu des résultats sous spip 2 ou alors revoir la liste des versions compatibles.

    Une très bonne idée que ce plugin mais il reste important de revoir certaines choses avant de le déclaré compatible pour toutes ces versions et surtout stable alors que non terminé et propre. Si on développe un plugin, c’est bien dans le but de le rendre fonctionnel et accessible à tous, donc merci de donner de vraies informations relatives à sa stabilité et à sa compatibilité.

    Répondre à ce message

    • Illustration sonore mp3 13 décembre 2009 13:53, par Christian PAULUS

      Désolé. Histoire de vérifier, j’ai pris deux minutes pour installer le plug sur la dernière version de SPIP (2.0.9), 1 minute pour l’activer et trouver un mp3, 30 secondes pour placer la balise en pied de page, 30 secondes pour vider le cache... Et je constate que ca fonctionne.

      Donc : je ne sais pas où est votre problème.

      Bon courage.

      Répondre à ce message

      • Illustration sonore mp3 13 décembre 2009 19:34, par Alain

        Bonsoir,

        Juste pour être bien sûr (je ne suis pas un pro du php couplé à du html..) la balise "illustration sonore" comment la placez-vous concrètement ?

        dans mon fichier "inc-pied", elle apparait comme suit :


        #ILLUSTRATION_SONORE

        [(#REM)
        Cette balise permet de deporter les calculs lourds (indexation etc)
        dans une image cachee, ce qui evite de ralentir l’affichage des pages.
        ]#SPIP_CRON

        N"hésitez pas à me dire que je suis nul et que l’active mal, étant donné qu’apparemment pour vous cela fonctionne...

        Merci d’avance, cordialement.

        Répondre à ce message

        • Illustration sonore mp3 14 décembre 2009 06:42, par Christian PAULUS

          Oui, cette balise est à placer simplement ici.

          Il y a déjà un inc-pied.html dans le dossier du plugin.

          Par contre, détail important : le plugin ne prévoit - pour le moment - que le type d’adresses URL standard (voir un exemple d’illustration sonore sur cette page). C’est ce qui explique que le bouton play apparaît en espace privé, mais pas en espace public si l’on utilise les URL personnalisées.

          L’intégration des URLs personnalisées (propres, propres2, etc.) sera mise en place prochainement (dès que temps libre). Et si vous voulez participer à son élaboration, c’est sur la zone.

          Merci.

          Répondre à ce message

          • Illustration sonore mp3 29 décembre 2009 21:55, par dd

            Bonjour,

            Moi non plus je n’arrive pas à le faire fonctionner.

            J’ai :
            - modifié "+ "&autoStart=" + options.autoplay" dans le fichier javascript
            - changé le type d’URLs vers le standard
            - inséré la balise #ILLUSTRATION_SONORE
            - vidé tous les caches et redémarré le navigateur

            Je ne voyais toujours rien dans le code source MAIS après avoir viré le fichier inc-pied.html du plugin (j’utilise un autre squelette de pied) j’obtiens enfin dans le code de ma page d’accueil :






            <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function(){
            $("#fmp3-object").jmp3({
            playerPath: "http://127.0.0.1/www/site/plugins/fond_mp3/swf/singlemp3player.swf"
            , mp3path: "http://127.0.0.1/www/site/IMG/site0.mp3"
            , showDownload: "false"
            , autoStart: "true"
            , backColor: "eeeeee"
            , frontColor: "333333"
            , repeatPlay: "true"
            , songVolume: "80"
            , width: 25
            , height: 20
            });
            });
            //]]>
            </script>

            mais je n’entends rien et ne vois pas le player !
            c’est OK dans la partie privée

            Voila pour un retour sur un site en SPIP 1.9.2h. Bouh...

            Par contre je ne comprends pas comment tu as inséré ton son dans ton exemple http://plugins.quesaco.org/spip.php...

            Je ne vois pas #ILLUSTRATION_SONORE dans le squelette , mais je le vois comme un lien de rubrique dans ton menu latéral ?!??

            <div class="menu rubriques">
                    <h2>Rubriques</h2>
                    <ul>       
                            <li>
                                    <a href="spip.php?rubrique1" class="on">20. fond_mp3</a>
                            </li>
                    </ul>
            </div>

            dd

            Répondre à ce message