Tuesday, May 1, 2007

-Mettre de la musique -fichier mp3- sur Blogger-



A NOTER :
Ce post date de 2007, et depuis je n'utilise plus cette procédure assez lourde. Et ma nouvelle marche à suivre est LA.
Toutefois dans certains cas de figures, la marche à suivre ci-dessous est toujours utilisable et actuelle.

*******

A voir le nombre de fois où cette question est posée sur différents forums et blogs, et n'est créditée d'aucune réponse, j'ai pu me rendre compte qu'il n'est pas facile de trouver sur internet, un vrai protocole pour pouvoir mettre ses propres fichiers mp3, sur nos blogs de Blogger. Ces explications sont valables pour tous ceux qui n'y connaissent pas grand chose et essaient de se dépatouiller comme ils peuvent ...

Petite précision. Il y a plusieurs façons de mettre de la musique sur un blog. J'ai utilisé le petit logiciel libre et gratuit Dewplayer de Alsacreations, qui est vraiment bien fait, léger et sobre !

* Première étape évidente mais essentielle :

Créez sur votre propre disque dur, sur votre micro, un dossier dévolu à ça : "Musique sur le blog" par exemple.

Dans ce dossier vous mettrez les fichiers à télécharger quand nécessaire. Et mettez-y aussi tous les fichiers mp3, soit les votres, soit ceux que vous trouvez sur internet, fichiers que vous voudrez utiliser ensuite sur votre blog.

* Deuxième étape :

Pour pouvoir utiliser vos fichiers de musique il doivent être mis en ligne. On ne peut pas directement de son micro, les envoyer sur le blog. Donc il faut faire héberger tous les fichiers qui doivent être ensemble sur un hébergeur en ligne.

Il n'y en a pas beaucoup surtout gratuits. Et j'ai trouvé "fileupyours". En tout cas c'est celui que je trouve le plus simple et que j'utilise.

Donc allez à cette adresse :


Et enregistrez-vous. C'est simple et il faut juste avoir une adresse mail valide qui permet de confirmer l'enregistrement.

Pensez à mettre aussi dans votre dossier perso ( sur votre disque par ex "Musique sur le Blog" ), un raccourci de l'adresse de ce site fileupyours.

* Troisième étape :

Allez télécharger le petit logiciel Dewplayer à cette adresse :


Vous allez à la rubrique Téléchargement

Là, moi j'ai choisi la version normale.
On clique droit sur dewplayer.swf et on fait Enregistrer sous
Et vous mettez le fichier dans votre dossier perso ( sur votre disque dur par ex "Musique sur le Blog" ).

 
* Quatrième étape :

Laissez pour l'instant la page de Dewplayer réduite dans la barre des tâches, on y reviendra, juste après.
Pour l'instant, retournez chez l'hébergeur Fileupyours.
Rentrez dans votre compte par Login

Arrivé sur la page affichée, cliquez en haut sur Upload ( blanc sur fond bleu marine )
Cliquez sur le premier Browse et allez chercher votre petit fichier Dewplayer que vous avez "enregistré sous" dans votre dossier perso sur votre disque dur, et faites Upload, en cliquant sur Up yours. Vous le verrez s'afficher dans le Main Folder de la page.

Vous pouvez déjà à ce moment si vous voulez, télécharger de la même façon, un ou plusieurs fichiers mp3, l'important étant qu'ils soient tous au même endroit que dewplayer.

Dès cette étape, dans fileupyours, cliquez droit sur le fichier dewplayer, faites Propriétés et récupérez l'adresse du type http :
http://www.fileupyours.com/files/..../dewplayer.swf

Et faites pareil avec les fichiers mp3 et récupérez l'adresse du type http :
http://www.fileupyours.com/files/......mp3
Vous pouvez d'ailleurs ouvrir une nouvelle page de l'éditeur Wordpad et mettre ces adresses dans un dossier que vous pouvez par ex. appeler " Modèles pour mp3 ". Il vous servira de base pour tous les fichiers musique que vous voudrez afficher sur le blog.

* Cinquième étape :

Réouvrez la page Alsacreations de Dewplayer.
Allez à la rubrique Générateur de code HTML.
Là, moi j'ai choisi le plus simple : j'ai coché dans Version : normale
J'ai laissé tout le reste tel quel. Je n'ai rien coché de plus et j'ai fait OK

( Après, quand vous aurez testé que tout fonctionne bien comme ça, vous pourrez faire toutes les excentricités que vous voudrez)

Cela engendre deux tableaux HTML.
Moi, j'ai utilisé le 2ème, le plus petit, la Version valide W3C. Et ça donne ça (image1) :


* Sixième étape :

Faites un Copier du code HTML engendré et Collez-le sur le fichier Wordpad précédent "Modèle pour mp3" par exemple, pour pouvoir travailler dessus.

Repérez dans le code HTML le mot " dewplayer.swf " qui se trouve à deux endroits et insérez juste devant lui l'adresse http du fichier dewplayer ( de la 4ème étape, et qui se trouve sur Fileupyours ), en ne gardant dans les 2 cas, qu'un seul /dewplayer.swf

Repérez dans le code HTML le mot " .mp3 " à deux endroits. Supprimez le mot "test" et insérez juste devant le .mp3 l'adresse http du fichier mp3 que vous voulez utiliser ( de la 4ème étape, et qui se trouve sur Fileupyours ) en ne gardant qu'un seul .mp3.
Donc

AVANT (image1)



APRES (image2)

   
Vous n'avez plus qu'à insérer ce code HTML à l'endroit adéquat dans la composition du post de votre blog, mais côté onglet HTML.

A noter deux choses :
- L'hébergeur Fileupyours est assez raide. Si on n'utilise pas le site pendant plus de 25 jours il supprime carrément le compte avec tout ce qu'il contient .....


- De temps en temps, Blogger peut "corrompre" le code ci-dessus ( il peut manquer une ligne ou deux ....). Il suffit d'abord de ... s'en apercevoir, puis de le remplacer en réinsérant le bon code à sa place. Et voilà !

Avec un petit exemple à la clé :

 
****************
 
 
ADDING MUSIC - AN MP3 FILE - TO BLOGGER
 
 
This tutorial was created in 2007.
A NEW VERSION of this process : really more simple : THERE

*********

As one can judge by the number of times this question pops up on various forums and blogs, without anybody answering it, I realized it is not easy to find on the Internet a true protocol describing how to put ones own MP3 files on a blog hosted by Blogger. The following explanations might be helpful to all those who are no experts at this and who are tinkering the best they can ...

A small precision. There are several ways of putting music on a blog. I used the small free piece of software "Dewplayer" of Alsacreations, which is really well designed, light and sober !

* First obvious but essential stage :

Create on your computer's hard disk a folder destined to that: "Music on the blog" for example. In this folder you will put the files to be saved when necessary. You can also stock there all your mp3 files, both your own files and those you found on the Internet, or files that you will want to use later on your blog.

 
* Second stage :

To be able to use your music files they must be uploaded online. As one cannot send them directly from one's computer to the blog it is thus necessary to host all the files which must remain together at the same location on an online host. There are not many of them, especially free ones. I found "Fileupyours". It is the one I find the simplest to use and the one I chose. Thus go to the following address:


and open an account, it is simple and the only requirements are a valid email address which you can use to confirm the account opening. Remember to add a shortcut to the Fileupyours website in your folder (on your disc, "Music on the Blog" for instance).

* Third stage :

Download the small Dewplayer software at this address :


Go to the "Téléchargement" heading there. Personnally I chose the "normal" version. Make a right click on dewplayer.swf and chose "Save As" the file in your personal folder ( on your hard disk, "Music on the Blog" for instance ).

 
* Fourth stage :

Minimize the Dewplayer web page and leave it in the taskbar, you will need it afterwards.

For now, go to the Fileupyours host.
Log in to your account.
In the new displayed page click on the top on "Upload" (white on blue background)

Click on "Browse" and select the small Dewplayer file that you "saved as" in your personal folder on your hard disk, then upload it by clicking on "Up Yours". You will see it displayed on the Folder Hand page.

You can if you want to upload at this time already, in the same way, one or more mp3 files, the important thing being that they all must be stored at the same place as the Dewplayer file.

At this stage, in fileupyours, right-click on the dewplayer file, choose Properties and retrieve the file address of the type HTTP :


Do the same with the mp3 files and retrieve their address of the type HTTP :


You could by the way open a new page of your Wordpad editor and paste these addresses in a file which you can call "Models for mp3" for instance. This file will be used as a basis for all the music files which you will want to post on your blog.

 
* Fifth stage :

Reopen the Alsacreations page of Dewplayer.
Go to the HTML code generator "Générateur" heading.
There, I personally chose the simplest : I check Version : normale and leave all the remainder just as it is. I have nothing else checked and I click on OK ( afterwards, when you have tested the functionning of your files like this, you will be able to chose all the eccentricities you want )

This generates two HTML tables. I myself used the 2nd, smallest, "valid W3C version". And that gives that (see image1) :


Locate in the HTML code the word "dewplayer.swf" which will occur at two places, and insert right in front of it the http address of the dewplayer file (the one you obtained in the 4th stage and which should be uploaded on Fileupyours). In both places, only keep one "/dewplayer.swf".

Locate in the HTML code the word ".mp3" which will occur at two places. Remove the word "test" and insert right in front of ".mp3" the http address of the mp3 file that you want to use (the one you obtainded in the 4th stage and which should be uploaded on Fileupyours). In both places, only keep one ".mp3".

* Sixth stage:

Copy the generated HTML code and paste it your Wordpad file the "Models for mp3" for instance, to be able to work with it.

Thus

BEFORE (image1)



AFTER (image2)


 Now you just have to insert this HTML code into the corresponding place in the source of your blog post, but on the HTML tab.

Two things to notice:

- the Fileupyours host is rather strict. If one does not use the site during more than 25 days it just removes the account with all the files it contained.....

- From time to time, Blogger can "corrupt" the above HTML code (it can skip a line or two....). You'll just have to…realize it and then to replace it by reintegrating the good code at the right place.

And voilà!

A small example as a bonus : There

****************************






















































































































13 comments:

Ratounette said...

Bonjour,
J'ai suivi toutes vos instructions et j'ai reussi au final a mettre un mp3 sur mon blog... pfiuouuhhh merci beaucoup!

Stockman said...

J'ai fait huit forum pour arriver à ce que tu as expliqué très clairement en quelques étapes.
Merci je désespérais...

Amethyste said...

Je vois seulement aujourd'hui vos commentaires : j'avais fait un mauvais réglage des "Settings" dans Blogger.
Je vous remercie beaucoup : moi aussi j'avais vraiment cherché partout comment faire et quand j'ai pu finalement y arriver, je me suis dit que ça servirait bien à quelqu'un. A charge de revanche ! :)

Tom & Cess said...

Merci beaucoup pour ces nfos, mais malheureusement ça ne marche pas pour moi !! Je l'avais fait il y a 5 mois et c'était bon mais depuis (comme tu l'avais dit) mon compte fileupyours a été supprimé et maintenant, ça ne marche plus !! Pourtant j'ai suivi à la lettre. Il semble que blogger corrompe le code html, j'ai beau le modifier à chaque fois, rien... Aurais-tu une solution??
Merci !

SounDesign said...

Bonjour, j'ai suivit vos instructions à la lettre. J'ai fait juste un changement dans le code: au lieu d'avoir le mot "files/" dans mon adresse http, j'avais le mot "view/", voyant que sa ne marchait pas,j'ai donc remplacé manuelement les deux mots et j'ai vu que sa marchait!
seulement je retourne aujourd'hui sur mon blog: Plus rien, impossible d'installer un dewplayer. Pouvez vous m'aidez au plus vite si possible ?
je vous laisse mon adresse blogspot: http://amusicaldream.blogspot.com/

Amethyste said...

Merci à Tom&Cess et soundesign pour votre confiance, mais je suis comme vous, quelque peu novice et je tatonne.
Deux choses peuvent peut-être vous aider tous les deux.
- Il existe maintenant d'autres hébergeurs de fichiers divers et variés y compris les fichiers mp3, et QUI ONT DEJA DEWPLAYER INCORPORE. Il suffit de télécharger chez eux vos fichiers.
- Et il y a une manipulation à laquelle il faut s'astreindre dans blogger, c'est d'abord d'écrire le post normalement. Et côté onglet HTML, de n'incorporer le code du fichier mp3 chez l'hébergeur, qu'au tout dernier moment. Et donc d'enregistrer le post directement depuis cet onglet. Sortir ensuite de ce post sans repasser par l'affichage normal et ne plus rien toucher. Si vous devez retoucher le post, enlevez le code du fichier mp3, et recollez-le au tout dernier moment, comme dit précédemment.
Je ne vois que ces solutions.
Bien cordialement

PrincesseOnLine said...

Clair, net et précis !
Merci, merci, merci ;).
Juste eu besoin de remplacer "view" par "files" dans le code et zou, ça marche ! Le post date de 2007, on est en septembre 2008... il fait de l'usage ! Encore merci. A+.

Amethyste said...

Merci beaucoup princesseonline. Cela fait toujours plaisir d'être un peu utile et en plus d'avoir un retour. Et c'est vrai que le post date pas mal maintenant. Mais apparemment Blogger ne tient pas à faciliter l'ajoût de fichiers mp3. Pourtant je suis sûre que ça leur serait très facile. Google doit avoir d'autres priorités ...
Merci encore

Anonymous said...

Pfff! Un grand MERCI car pour un gros nul en informatique comme moi, même avec toutes ces explications cela n'a pas été chose simple!Mais c'est bon, ça marche!

MERCI!

Amethyste said...

Bravo ! Et Joyeux Noel !

Anonymous said...

Génial ce post, merci beaucoup

Amethyste said...

Merci et j'en profite pour ajouter une précision : Archive Host est un des meilleurs hébergeurs de fichiers - pratiquement TOUS les fichiers et donc mp3 y compris- et c'est là et gratuit :

http://www.archive-host.com/index.php

A noter que l'on n'a aucune limite dans le temps. Vous pouvez ne pas télécharger de fichiers chez lui pendant de longs mois, cela ne fait pas de différence : ils restent bien gardés.

Deuxième point : le fichier Dewplayer est déjà incorporé. donc il suffit simplement d'enregistrer chez lui votre fichier mp3 ( ou un diaporama musical ou tout autre fichier) et de récupérer le code engendré que vous voulez ... et il y en a un choix important ... et glisser le code dans votre post.

Troisième point : lorsque vous vous inscrivez, notez bien sur quel serveur 1 2 3 ou 4 sont hébergés vos fichiers. On a tendance à l'oublier et le serveur par défaut étant le serveur 1, on peut être étonné de ne rien retrouver ...

Quatrième point : si vous avez le moindre problème, Archive Host héberge un forum très actif. Si vous posez une question, vous obtenez une réponse TRES rapidement.
Vraiment site impeccable que je conseille les yeux fermés.

Anonymous said...

Merci énormément pour ce tutoriel, vraiment de grande utilité pour les novices.
Merci également à toutes les personnes qui ont laissé des commentaires pour l'enrichir.
J'ai actualisé un peu la procédure sur mon blog. N'hésitez pas à y faire un saut.
http://yoga-au-quotidien.blogspot.com/2010/02/comment-telecharger-un-fichier-mp3-sur.html