En utilisant PHP et JavaScript, nous pouvons récupérer à la volée dans un podcast les données nécessaires pour le mettre en écoute dans un module comme dewplayer (lecteur gratuit de mp3).

Pour réaliser notre lecteur de podcast dynamique, il nous faut d’abord rendre le XML lisible, nous prenons en effet un flux extérieur au site dans lequel nous voulons afficher notre dewplayer. Pour que cela fonctionne, il est indispensable que le serveur pense que ce fichier XML se trouve sur notre site. Il existe une parade en PHP pour le faire.

Vous devez créer un fichier, par exemple podcast.php, et y mettre le code suivant :

<blockquote>
<?php
 header('Content-Type: text/xml');
 print file_get_contents('http://radiofrance-podcast.net/podcast09/rss_10638.xml');
 ?>

Pour cet exemple nous avons choisi un podcast de radiofrance.

Maintenant si vous ouvrez en ligne votre fichier podcast.php il s’affichera avec le contenu XML du fichier extérieur hébergé sur radiofrance.

Pour la suite nous allons passer par jQuery. Nous avons deux méthodes possibles pour y arriver.

1. avec l’extension jquery.jfeed.pack.js. La fonction s’appelle ainsi :

<blockquote>
jQuery.getFeed({
 url: 'http://monsite.com/podcast.php',
 success: function(feed) {
 /*jQuery('.titre').append('<a href="'
 + feed.link
 + '" target="_blank">'
 + feed.title
 + '</a>'); */
 var html = '';
 for(var i = 0; i < feed.items.length && i < 5; i++) {
 var item = feed.items[i];
 html += '<h4>'
 + '<a href="'
 + item.link
 + '">'
 + item.title
 + '</a>'
 + '</h4>';
 }
 jQuery('.item').append(html);
 }
 });

2. Avec ajax et parseXML. Nous pouvons aussi utiliser cette méthode :


jQuery(document).ready(function() {
jQuery("#loading").show();
jQuery.ajax({
type: "GET",
url: "http://monsite.com/podcast.php",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
jQuery(xml).find("item").each(function() {
//find each instance of loc in xml file and wrap it in a link
jQuery(".lecteur").append('<h4>'+ jQuery(this).find("title").text() +'</h4><object type="application/x-shockwave-flash" data="http://monsite.com/dewplayer-mini.swf?mp3='
+ jQuery(this).find("guid").text()
+ '&amp;showtime=1" width="160" height="20"><param name="wmode" value="transparent" /><param name="movie" value="http://www.leschampslibres.fr/html/dewplayer-mini.swf?mp3='
+ jQuery(this).find("guid").text()
+ '&amp;showtime=1" /></object>');
jQuery("#loading").hide();
});
}
});

Je suppose bien entendu que vous connaissez déjà la syntaxe jQuery, comment on peut ainsi agir sur le DOM et ce que signifie .append(). Personnellement je préfère utiliser la seconde méthode, ce qui explique pourquoi je vous en propose un code complet, mais à vous de voir.
Vous pouvez constater le résultat sur cette page du musée de Bretagne. Je vous laisse chercher par vous même comment limiter la boucle au premier fichier du podcast ou à un nombre précis.

Code complet d’une page avec un podcast : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Podcast du musée de Bretagne et de France Bleu Armorique</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">

jQuery(document).ready(function() {
jQuery("#loading").show();
  jQuery.ajax({
    type: "GET",
    url: "http://www.leschampslibres.fr/widget/musee.php",
    dataType: "xml",
    success: parseXml
});
            function parseXml(xml) {
jQuery(xml).find("item").each(function() {
//find each instance of loc in xml file and wrap it in a link
jQuery(".lecteur").append('<h4>'+ jQuery(this).find("title").text() +'</h4><object height="30" width="300" type="application/x-shockwave-flash" data="http://www.leschampslibres.fr/typo3/contrib/flashmedia/player.swf" id="mmswf4d7492b92ce2e" style="visibility: visible;"><param name="quality" value="high"><param name="allowScriptAccess" value="sameDomain"><param name="menu" value="false"><param name="wmode" value="transparent"><param name="flashvars" value="soundFile='
                + jQuery(this).find("guid").text()
                + '" /></object>');
jQuery("#loading").hide();
 });
}
});
</script>
    </head>
    <body>
<div class="lecteur">
</div>
    </body>
</html>