La première partie de l’article est là
Il y a quelques semaines j’avais été sollicité par l’ami épicure audio pour lui inventer une plateforme de podcastavec les outils google
La premiére partie de l’article avait consisté
à créer un hébergement pour les fichier audio avec google drive,
à Créer un blog pour diffuser le podcast et créer les flux RSS du podcast
à rendre celà compatible avec ITune grâce à Feedburner
Histoire de compléter tout cela, je fais une partie 2 pour ajouter une fonctionnalité :
Ajouter automatiquement un lecteur audio a chaque article accompagné d’un fichier son, pour obtenir quelque chose qui va ressembler à çà
1/ ajouter la boucle qui insére le fichier audio dans blogger
dans l’administration de bloger allez dans modèle puis Modifier le code
on va positionner le code du player juste avant la barre de commentaire, à la toute fin du post
dans la fenêtre d’édition du code on ouvre l’outil de recherche [Ctrl]+[F] et on cherche le code : <div class=’post-footer’>
juste avant <div class=’post-footer’> on colle le code suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- audioplayer --> <ul> <b:loop values='data:post.enclosures' var='enclosure'> <b:if cond='data:enclosure.mimeType == "audio/mpeg"'> <div> <hr/> Ecouter le podcast : <br/> <audio expr:src='data:enclosure.url' preload='none'/> <br/> <a expr:href='data:enclosure.url'><b>► Télecharger cet épisode</b></a> </div> </b:if> </b:loop> </ul> <!-- finaudioplayer --> |
Enfin, sauvegardez vos modifications
on a en fait ajouté la balise HTML5 <Audio> en la metant dans une boucle blogger. IF.
si un fichier audio est présent, on l’affiche, sinon non.
Ajouter un peu de compatibilité avec AUDIO.JS
Le probleme avec la balise Audio, c’est que si elle est tres pratique, elle n’est pas interprétée de la même maniere par tous les navigateurs. on va don utiliser Audio.JS, un petit fichier javascript pour obtenir le même rendu partout.
1/ téléchargez Audio.JS
2/ décompressez l’archive
3/copiez les fichier audio.js, player-graphics.gif & audiojs.swf dans un répertoire de votre google drive, et rendez le répertoire public en procédant comme dans le précédent tutorial
ensuite dans l’interface blogger allez dans mise en page
Ajoutez un gadget javascript
et collez le code suivant
|
1 2 3 4 5 6 |
<script type="text/javascript" src="https://googledrive.com/host/VOTRE-REPERTOIRE/audio.min.js"></script> <script type="text/javascript"> audiojs.events.ready(function() { var as = audiojs.createAll(); }); </script> |
Enregistrez votre widget
Votre blog devrait maintenant vous proposer un player audio automatiquement comme ici sur le blog de test
Bonjour,
merci pour les explications, j’ai pourtant tout suivi et je n’ai pas de fichier qui s’affiche.
J’ai mis en pièce jointe à l’article et en lien dans l’article (sait-on jamais) mais rien ne fonctionne.
Sais-tu ce que je fais de mal ?
Merci !
http://fifoupodcast.blogspot.fr/2016/02/test-de-podcast.html
Salut Grégoire …
tu es sur d’avoir tout fait comme je l’explique ?
quand je vais sur ton site, je vois bien un fichier mp3,
un player un peu exotique qui n’a rien a voir avec celui présenté ici
va voir le blog qui m’a servi de support pour l’article : http://podcast2test.blogspot.fr/
as tu aussi suivi la premiére partie de l’article http://blog.passeurs-de-savoirs.fr/2014/12/creer-podcast-les-outils-google.html
merci de ta réponse.
oui j’ai bien suivi, j’ai finalement réussi avec ce lecteur exotique justement, le reste je n’y arrivais pas
ok, je vais voir l’article en question et oui, j’ai bien suivi l’étape 1
merci à toi !