Intégrer un lecteur mp3

Les bidouillages du Papy Mouzeot

Vous en avez marre de Deezer et des autres applications lourdingues qui viennent couvrir le son des vidéos que vous avez publié ?

Le Papy Mouzeot vous apporte une solution pratique à la portée de tous !

Que j'm'en vas vous expliquer comment c'est qu'on fait pour importer un son ou de la musique MP3 pour illustrer les belles pages de vos blogs sans passer par un classique Deezer.

Vous êtes prêts ?

Bien prendez des notes paske je vais pas répété tout le temps aux zétourdis qui suivent pô !

Matériel requis :

- Un bloc-note

- Un crayon

- Un poil d'attention avec un zeste de patience

- Et pis c'est tout, comme il dirait Rotpier !

Ah, et ceci ça sera plus commode...

player-MP3.zip

La première chose à faire est de télécharger le player MP3 développé par Alsacreations en cliquant sur le lien ci-dessus.

Le bazar est compressé au format zip donc facilement décompressible sur vos ordinateurs (Mac ou PC). En plus le machin est tout léger (9 ko), il n'encombrera pas votre espace de stokage.

Bien c'est bon, vous l'avez récupéré ?

Alors on continue...

Maintenant on va configurer ça le plus simplement du monde.

Pour commencer nous allons créer un nouveau dossier directement dans l'espace <DOCUMENTS> qui se trouve dans le menu <CONFIGURER>. Si vous avez attéris au bon endroit vous constaterez que cet espace est divisé en 3 parties : Mes images, Mes vidéos, Mes fichiers. En l'occurence celui qui nous intéresse est Mes fichiers sur OverBlog.

En cliquant sur sur lien nous allons pouvoir <Ajouter un Dossier> que vous nommerez comme il vous plaira, dans notre exemple on va l'appeler MP3 (attention c'est en majuscules).

Cliquez sur l'image pour agrandir (+)

Vous avez quelque chose qui ressemble à ça ?

C'est bien, vous avez bien suivi. Pour les autres, vous n'avez qu'à recommencer mais dépêchez-vous on va pas passer notre temps à vous attendre !

Maintenant que tout le monde à créé son nouveau dossier <MP3> on va cliquer dessus (juste une fois ça suffit) pour entrer dedans.

Exac' Adam, y'a rien dedans, c'est vide ! C'est un peu normal étant donné qu'on vient juste de créer ce dossier.

Le but du jeu justement c'est d'y placer le lecteur que vous avez télécharger au préalable puis que vous avez décompressé. Normalement le fichier s'intitule "dewplayer-multi.swf".

Quoi encore Adam ?

Pourquoi j'ai mis des " " de chaque côté du fichier alors qu'il n'y sont pas ?

Je t'explique... Quand je parle d'un fichier je le place "entre guillemets". S'il s'agit d'un dossier il sera alors entre <crochets>, c'est pour faciliter la compréhension mais visiblement ça fonctionne pas avec toi !

Meuh naaan je me moque pô ! Qu'est-ce que tu t'imagines là !

C'est bon, les retardataires nous ont rejoint ? Alors on continue...

Nous allons donc cliquer sur <Ajouter des fichiers> puis indiquer la provenance des fichiers à transférer (soit "dewplayer-multi.swf" + un fichier mp3 de votre choix.

Pour effectuer ce test je vous conseille d'utiliser un petit fichier d'une taille inférieure à 1 Mo, ça ne change rien c'est simplement plus rapide.

Cliquez sur l'image pour agrandir (+)

En théorie nous devrions tous nous trouver devant cet écran. Juste pour info avant qu'Adam me pose la question mon fichier mp3 à moi que j'ai transféré se nomme "Soundtrack.mp3" et on ne voit pas l'extension .mp3 parce que c'est OverBlog qui l'a voulu ainsi.

Dépacer le curseur de votre souris sur une des icônes qui se trouvent dans le dossier <MP3> et vous verrez s'afficher 4 petites icônes qui vont apparaître sur la droite de l'icône du fichier.

Cliquez sur la loupe (Afficher) vous obtiendrez les informations suivantes :

Cliquez sur l'image pour agrandir (+)

Notez bien les chiffres inscrits à la place des X/XX/XX/XX/...

Il s'agit d'une arborescence qui vous est attribuée par OverBlog, elle est propre à chaque administrateur de blog.

Oui Adam ?

Je sais bien que ton fichier ne s'appelle pas "Soundtrack.mp3" ! C'est mon mien à moi que j'ai qui se nomme comme ça !

Le tien s'appelle "cosi-fan-tutte.mp3" ? C'est bien ça prouve que tu aimes Mozart !

Bien tout le monde a bien suivi ?

Nous en sommes à la fin de la première moitié, en fait nous avons uploadé les éléments nécessaires pour pouvoir écouter du son dans notre future composition.

Justement, nous allons retourner dans notre console d'admin et créer un nouvel article. Ça je ne vous explique pas comment faire, vous en avez l'habitude.

Non Adam, tu rouleras ta clope plus tard on arrive à la fin !

Voilà le moment magique...

Vous allez copier / coller ce code dans votre éditeur via la fonction html :

Puis vous validez en cliquand sur <Mettre à jour>

NOTEZ BIEN QUE VOUS DEVEZ REMPLACER LES XX PAR LES CHIFFRES QUI FIGURENT SUR LES INFORMATIONS DE VOTRE FICHIER, ELLES CORRESPONDENT AU DOSSIERS QUI VOUS SONT ALLOUÉS PAR OVERBLOG.

Cliquez sur l'image pour agrandir (+)

Si vous arrivez à ce stade, c'est que vous avez tout compris, vous êtes fortiches !

Inutile de tenter une prévisualisation, je n'ai jamais réussi à tester un objet flash dans ce mode. La seule possibilité que j'ai trouvé est de publier l'article. Mais bon, vous me faites confiance, si vous avez tout bien suivi, vous n'aurez comme unique surprise que celle d'écouter votre fichier mp3.

Keuya Adam ?

Ça marche ?! Alors elle n'est pas belle la vie ? Si toi tu y arrives alors toute le monde peut le faire !

Oui c'est ça, la prochaine fois tu mettras du Cure et du AC/DC !

Juste une précison Adam, pense bien à respecter la législation en vigueur sur les MP3 et les droits d'auteurs ! Au cas où...

Ah, voilà une question intéressante de El Diablo !

Et si on veut mettre d'autres musiques ou sons ?

C'est encore plus simple !

Tu n'as juste qu'à transférer uniquement les fichiers mp3 de ton choix dans le dossier MP3 et ensuite corriger le code à la ligne suivante par le nom de ton nouveau fichier mp3 :

C'est pas plus compliqué, la preuve j'y suis arrivé !

Une fois le player transféré tu n'as plus besoin de le recopier.

Et pour les plus téméraires d'entre vous je vous invite à visiter le site de Alsacreations qui vous propose d'autres options de lecteurs ainsi que la possibilité de générer votre code html directement en ligne depuis leur site.