Tutorial Podcasting : Hackez Loic Le Meur !

Best of SamDProd n'a pas peur et décide de hacker le blog de Loic pour vous apprendre aussi comment faire ça :

   

En effet, y a pas de raison pour que Loic ou quelques inititiés soient les seuls à savoir comment faire ces petits lecteurs Mp3 dans leur notes.
J'avais déjà écrit une note sur la formation podcasting mais je ne suis pas sur que tout le monde ai bien compris à l'époque. Voici donc une petite formation pratique pour insérer un Dew Player sur votre blog TypePad.

----- Facultatif ---

Attention : Vous avez été quelques-uns à me dire que le tutorial suivant utilisait le dew player de Loic. S'il supprime son compte, votre player ne marchera donc plus.

Vous pouvez donc installer préalablement le dew player sur VOTRE compte.
Pour cela, faites un clic droit sur le lien suivante : dewplayer 1.2 reloaded puis "Enregistrer la cible sous..."

Connectez vous ensuite sur votre compte TypePad puis allez dans
Tableau de bord > Fichier
puis envoyez le dewplayer.swf dans le répertoire de votre choix.
Copier l'URL de votre dewplayer quelque part (notepad par exemple).

----- fin du facultatif ----

1- Pour insérer une musique sur votre blog, il faut que vous ayez ce fichier sur votre disque dur au format MP3.

2- Connectez vous sur votre compte TypePad puis cliquez sur "PUBLIER" dans la colonne de droite   

3- Cliquez sur l'onglet "Editer le HTML" puis dessous, sur la petite icone avec une fleche verte (à gauche de ABC)

4- Cliquez sur "Parcourir...", puis selectionner le MP3 sur votre disque dur. Cliquez ensuite sur "Envoyer le fichier"

NB:  Si vous publier votre note à ce stade, vos visiteurs pourront télécharger votre musique. Les étapes suivantes vous expliquent comme insérer un petit lecteur directement dans votre note.

5- Sur votre editeur de note, vous avez maintenant du code qui ressemble à :
<a href="http://samdprod92.europe2blog.fr/insolite/files/sawyer.mp3">Download sawyer.mp3</a> 
 Ce qui se trouve entre guillemets est l'adresse à laquelle se trouve votre MP3.

Pour insérer un petit lecteur sur votre note, selectionnez le code suivant piqué sur le blog de Loic ou allez faire un tour sur ce petit générateur automatique.

<p>
<a href="http://www.loiclemeur.com/france/files/139culturofilvl.mp3" onclick="window.open(this.href, '_blank', 'width=60,height=50,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img width="50" height="41" border="0" alt="Cliquez ici pour télécharger le MP3" title="Podcast" src="http://www.loiclemeur.com/france/images/podcastloic.gif" style="margin: 0px 5px 5px 0px; float: left;" /></a>
<br /><object type="application/x-shockwave-flash" data="http://www.loiclemeur.com/france/files/dewplayer.swf?son=http://www.loiclemeur.com/france/files/139culturofilvl.mp3" width="200" height="20"><param name="movie" value="http://www.loiclemeur.com/france/files/dewplayer.swf?son=http://www.loiclemeur.com/france/files/139culturofilvl.mp3&amp;bgcolor=#FFFFFF" /></object>
</p>

Puis cliquez sur le bouton droit de votre souris et selectionnez "Copier".
Retournez, dans votre éditeur de note  puis cliquez dessous votre première ligne de code.
Faites alors bouton droit et selectionnez "Coller".

6- Selectionnez ensuite l'adresse de votre mp3 (sur la première ligne de votre note) puis bouton droit "Copier". Dans cette exemple, je selectionne : http://samdprod92.europe2blog.fr/insolite/files/sawyer.mp3
puis bouton droit > Copier

7- Dans le gros code que vous avez collé en dessous, remplacez http://www.loiclemeur.com/france/files/139culturofilvl.mp3
par l'adresse de votre Mp3.

C 'est à dire selectionnez tous les http://www.loiclemeur.com/france/files/139culturofilvl.mp3
puis faites bouton droit "coller" pour chaque.

Cette opération  est a répéter 3 fois = remplacer le code en rouge du point 5   

Pour mon exemple, je remplace http://www.loiclemeur.com/france/files/139culturofilvl.mp3
par http://samdprod92.europe2blog.fr/insolite/files/sawyer.mp3

Au final, le code html de ma note est :

<p>
<a href="http://samdprod92.europe2blog.fr/insolite/files/sawyer.mp3" onclick="window.open(this.href, '_blank', 'width=60,height=50,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img width="50" height="41" border="0" alt="Cliquez ici pour télécharger le MP3" title="Podcast" src="http://www.loiclemeur.com/france/images/podcastloic.gif" style="margin: 0px 5px 5px 0px; float: left;" /></a>
<br /><object type="application/x-shockwave-flash" data="http://www.loiclemeur.com/france/files/dewplayer.swf?son=http://samdprod92.europe2blog.fr/insolite/files/sawyer.mp3" width="200" height="20"><param name="movie" value="http://www.loiclemeur.com/france/files/dewplayer.swf?son=http://samdprod92.europe2blog.fr/insolite/files/sawyer.mp3&amp;bgcolor=#FFFFFF" /></object>
</p>

En vert se trouve mes modifications.
Pour ceux qui ont installé le Dew player sur leur blog, replacez ce qui est en violet par l'URL vers votre propre DewPlayer.

8- Supprimez ensuite votre code du début sur la première ligne, vous n'en avez plus besoin. Pour ma part, je supprime :
<a href="http://samdprod92.europe2blog.fr/insolite/files/sawyer.mp3">Download   sawyer.mp3</a>

9- Publiez votre note.

10- Regardez votre blog, vous avez un magnifique lecteur dans votre note.

J'espère que cette petite formation vous aura aidé à faire votre premier podcast.

MAJ : Vous trouverez aussi un générateur automatique de code HTML permettant d'afficher le dew player sur votre note sur le Dew's worldblog. Il faut cependant envoyer votre fichier MP3 sur votre blog et en récupérer son adresse (URL http://.........xxxx.mp3)

Comments

[Rédigé par : Loic]

Ce serait quand meme mieux si l'image podcast et le Dewplayer etaient heberges chez les blogs en question, ce qui est tres facile aussi, plutot que d'aller chercher les fichiers sur mon blog, non ?

[Rédigé par : Loic]

Mais bonne initiative, ce tutoriel!

[Rédigé par : Forum 118]

Merci pour ces conseils.

[Rédigé par : Leprechaune]

Merci merci merci merci merci merci voilà je voudrais l'ecrire mille fois mais bon voilà j'ai réussi ça fait trop trop plaisir
Mais c un peu du bricolage qd même Je veux dire les autres qui le font ils font comme ça aussi??
c compliqué pr moi le podcasting qd meme lol me pose encore plein de questions
Mais c cool j'ai mon petit lecteur sur mon blog, ça fait presque pro mdr

[Rédigé par : leprechaune]

Je me permet de revenir vers toi parceque j'ai pas completement compris le com que tu m'a laissé alros bon j'ai bien la derniere version d'I tunes, j'ai fait un un lien podcast sur mon blog mais apres je bloque
Un petit coup de main stp please

[Rédigé par : MissT]

Merci ! Merci ! 100 fois merci ! J'ai ENFIN réussi à atteindre mon but : mettre de la musique sur mon blog !

Bon, bien sûr, j'ai dû m'y reprendre à plusieurs fois, mais qu'est-ce que je suis contente !

Des tuyaux comme ça, j'en redemande ! Si si, sincèrement !

[Rédigé par : nico]

top ! Merci Sam ;)
une question > cela peut-il fonctioner avec du Wave (et non du mp3) ? Ou comment changer du wave en MP3 ? RealPlayer ne le fait que dans sa version payante.. T'aurais une piste ?

Bravo pour ce Tuto' limpide en tout cas !

[Rédigé par : SamDProd]

Perso j'utilise AudioGrabber pour convertir le wav en Mp3. Vous pouvez le télécharger ici :
http://www.01net.com/windows/Multimedia/encodeurs_et_decodeurs/fiches/7091.html

Cdex est aussi gratuit et très simple d'utilisation :
http://www.01net.com/telecharger/windows/Multimedia/encodeurs_et_decodeurs/fiches/1077.html

[Rédigé par : renaud]

merci pour le didacticiel. très clair.
est-il possible de mettre plusieurs piste sur un même Dewplayer?.
merci

[Rédigé par : Sylvain]

Tres utile.
Il serait temps que typepad incorpore une fonction qui permette simplement d'uploader un fichier mp3 qui configure automatiquement tout cela.

[Rédigé par : kouroch]

totalement d'accord avec sylvain.
merci quand même pour le tuyau!!!

[Rédigé par : kouroch]

ah mais en fait g pas comme toi un truc comme ca. moi on a besoin de cliquer dessus. c normal?

[Rédigé par : Franck B.]

Décolé, mais je bloque dès le point 3.

3- Cliquez sur l'onglet "Editer le HTML" puis dessous, sur la petite icone avec une fleche verte (à gauche de ABC)

je n'ai pas d'onglet "Editer le HTML"...???...???
tu peux m'aider?

[Rédigé par : hoplalavoila]

Génial, j'ai suivi pas à pas et ça marche !!!!!
Génial génial
MERCI
Même si, en effet, intégré directement à TypePad ce serait encore mieux...

[Rédigé par : Olivier2.0]

De la boule !
Juste de la boule !
Merci bcp.

PS : j'ai remarqué que sur certains blogs, il y avait aussi carrément des sets (playlist) à écouter en stream... des conseils pour ce type d'interface?

[Rédigé par : isabelle]

salut
je voulez vous faire partager ma passion le sudoku
j'ai découvert un site ce week end
www.sudoku-gratuit.fr
on peut télécharger pleins de grilles gratuitement(plus de 2000)
de plus on peux jouer en ligne au sudoku
et ce que j'ai trouver super c que le webmaster a mis aussi pleins de truc et astuce pour résoudre les grilles
aller vite sur www.sudoku-gratuit.fr si vous êtes accros comme moi ;o)

[Rédigé par : JOUJOU DE PARIS]

Bravo, ça marche.Et pour l'image, pour pas embêter Loic à lui prendre ses fichiers...On peut la trouver où?

[Rédigé par : mumu]

j'ai décidé de me mettre au podcast et de TypePad jsuis arrivée a ici^^
merci beaucoup parce que je crois que je vais m'en sortir!! ( c'était pas gagné d'avance mais expliquer clairement ça va! )
mais a quoi sert I tunes la dedans ??

[Rédigé par : mumu]

( alala encore moi^^ ) je voudrais savoir, si quand tu t'abonne a un flux RSS pour pouvoir lire les podcast directement sur I Tunes et bien si tu peux ensuite récupérer la musique sur ton ordi...c'est a dire pas juste pouvoir la lire mais pouvoir comme grace aux mp3, pouvoir l'enregistrer. merci bien de m'expliquer ça^^

[Rédigé par : Jul]

QUestion:
Les droit de ce player sont il gartuit, a en croire le site de creative commons, developeur du player, oui. Mais ils stipulent que nous devons citer la source, hors dans cet exemple, elle n'apparait mul part (et dans bien des sites l'utilisant aussi).