Blablabli et blablabla: Intégrer lecteur mp3 dans un blog

Aide-mémoire pour l'intégration d'un lecteur de musique simple ou avec playlist dans un blog (page html)

Le Verdier est un petit oiseau des campagnes dont j'aime bien certaines phases du chant, pour l'écouter cliquez sur "play"

Aprés l'avoir lu vous saurez :

1-> Créer sommairement un blog avec Google
2-> Intégrer un lecteur de musique simple Dewplayer
3-> Idem pour un lecteur avec playlist Dewplayer

1 - Création d'un blog sur blogger.com de Google

Se connecter à www.blogger.com, créer un compte gmail si vous n'en avez pas encore, chosir un pseudo pour le blog, un nom de blog libre pour être hébergé gratuitement par Google et choisir un thème sans trop se casser la tête, tout est modifiable par la suite.

Ça y est, vous êtes prêt à publier votre premier billet

J'ai trouvé ce site pour faire des progrès à ce stade, parce que je suis pas fortiche !

2 - Intégration du lecteur de musique Dewplayer

télécharger dewplayer sur votre disque dur

decompresser puis isoler les fichiers :

dewplayer.swf > permettra d'afficher le player seul

dewplayer-playlist.swf > afficher player + liste de lecture

playlist.xml > contiendra liste lecture

Trouver un hébergement pas cher ! :

Ensuite il vous faudra trouver sur le net un emplacement pour héberger les fichiers de dewplayer ET les fichiers mp3 qui eux prennent beaucoup de place comme vous le savez.

En effet Google ne veut apparemment pas héberger ce genre de

contenu, ça lui prendrait sans doute trop de place, alors il faut se débrouiller sans eux.

Pour ma part j'ai simplement utilisé une partie de mon espace disque réservé à ma page perso sur orange (100 Mo max)

Faire un peu d'informatique de base (FTP):

A l'aide d'un client FTP je me suis connecté à mon espace perso Orange (ligne de commande : ftp perso-ftp.orange.fr ou avec un client FTP plus élaboré. Dans tous les cas, il faut fournir son nom d'utilisateur et mot de passe de messagerie)

Ensuite j'ai créé les répertoires suivants à la racine de mon ftp :

rép 1 > blablabli/

rép 2 > mp3/oiseaux

qui sont accessibles ensuite en http :

http://iker.pagesperso-orange.fr/blablabli/

http://iker.pagesperso-orange.fr/mp3/oiseaux

Si vous ne prennez pas ces noms vous adapterez en fonction par la suite

Puis j'ai "uploadé" (toujours avec ftp) le fichier dewplayer.swf dans le rép 1 et le fichier Verdier.mp3 dans le rép 2 ce qui permet maintenant d'y accéder depuis n'importe où sur le web par les URL suivantes :

http://iker.pagesperso-orange.fr/blablabli/dewplayer.swf

http://iker.pagesperso-orange.fr/mp3/oiseaux/Verdier.mp3

J'ai ensuite cliqué sur présentation (en haut à droite) pour éditer CE MESSAGE et j'ai encore cliqué (on n'arrête pas de cliquer ... ) sur modifier le code html et j'ai inséré un peu plus bas là où vous voyez apparaître le mini lecteur tout seul, le code suivant :

( couleur code générique , couleur code à adapter à votre cas )

</object>

Tout cela m'a permit d'obtenir ceci :

3 - Lecteur avec playlist s'il vous plait !

C'est un peu + compliqué parce qu'il faut créer le fichier de la "playlist" qui est un fichier XML, lesquels sont des sujets très suceptibles :)

Faire une copie du fichier playlist.xml

Puis l'éditer avec un editeur de texte "propre" (style Vim) et modifier le à la main pour un premier essai avec une liste de lecture de 2 morceaux. Évitez les copier-coller à partir d'autres sources parce que des caractères de formatage invisibles pourraient polluer votre fichier et ça ne marcherait pas : les fichiers XML ont toujours le dernier mot ...

Voici mon fichier blablabli_playlist.xml raccourci à 2 morceaux:

( couleur code générique , couleur code à adapter à votre cas )

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Js Iker Playlist</title>
<creator>Js Iker</creator>
<link>http://blablablietblablabla.blogspot.com</link>
<info>Pour mon blog Blablabli et blablabla</info>
<image></image>

<trackList>

<track>
<location>http://iker.pagesperso-orange.fr/mp3/oiseaux/Verdier.mp3</location>
<creator>La nature</creator>
<album>perso</album>
<title>Le chant du Verdier</title>
<annotation>C'est chouette</annotation>
<duration>00:01:06.56</duration>
<image></image>
<info></info>
<link></link>
</track>

<track>
<location>http://iker.pagesperso-orange.fr/mp3/supertramp/crime_of_the_century/01_-_School.mp3</location>
<creator>Super Tramp</creator>
<album>Crime of the Century</album>
<title>01_-_School.mp3</title>
<annotation>C'est vieux mais chouette</annotation>
<duration></duration>
<image></image>
<info></info>
<link></link>
</track>

</trackList>

</playlist>

Ouvrez ce fichier avec votre navigateur web et s'il comporte des erreurs vous les verrez. Corrigez ce fichier tant qu'il y a des erreurs.
Sinon ça ne marchera pas, c'est tout.

Maintenant, il va de soi que vous devez "uploader" votre playlist ET tous les mp3 de votre playlist sur votre site d'hébergement, sinon ça peut pas marcher !

Pour moi, ça donne :

http://iker.pagesperso-orange.fr/blablabli/dewplayer-playlist.swf ----> pour player avec playlist

http://iker.pagesperso-orange.fr/blablabli/blablabli_playlist.xml -----> la fameuse playlist

http://iker.pagesperso-orange.fr/mp3/supertramp/crime_of_the_century/01_-_School.mp3 --> le morceau

C'est ce blog qui m'a aidé à créer mon XML mais il y avait une erreur (?) sur le code html qui permet d'insérer le lecteur + la play liste au sein du blog.

Aussi je vous donne ici le code HTML que j'ai écris pour faire apparaître le lecteur avec liste de lecture à gauche de la panthère rose un peu plus bas.

( couleur code générique , couleur code à adapter à votre cas )

youpi, on va en boite ce soir !!!

Ce qui donne ça :

Trop facile ...

Si vous voulez un démarrage automatique de la lecture, il faut remplacer dans le code autostart=0 par autostart=1 et autostart="false" par autostart="true"

Ça marche pour le moment, mais si d'aventure je voulais faire de la place sur l'espace disque qu'Orange me "donne" pour ma page perso hé bien les morceaux de musiques enlevés ne marcheraient bien sûr plus, groumfff !

Y disais que ça marchait le monsieur, et ça marche pas :-/

Au pire vous me mettez un commentaire et je vous aiderai moyennant une forte rétribution, j'adore les pistaches ;-)

Des fois qu'un millionnaire de très bonne humeur passe par là ! ;-)
D'accord, j'exagère !