En complément et en amélioration du précédant article traitant du sujet (voir « Récupérer un podcast pour lecture en ligne« ), je vous propose de récupérer plusieurs fichiers mp3 d’un podcast avec jQuery.

Dans l’article traitant déjà de ce sujet (voir « Récupérer un podcast pour lecture en ligne« ), j’avais proposé une méthode propre au rss récupérer. Dans ce tutoriel, nous allons tenter un code qui s’adapte à tous les podcasts (s’ils respectent bien l’écriture RSS).

Nous prenons un flus RSS : http://www.sprechgesang.net/spip.php?page=backend&id_rubrique=53. Pour pouvoir récupérer sur votre hébergement ce flux et l’utiliser avec l’ajax, il vous faut créer un clone de cette page en PHP. Pour cela je vous invite à relire le premier article qui l’explique.

Nous allons ensuite utiliser dewplayer pour lire les fichiers mp3. Vous le téléchargez, le décompressez et le mettez soit à la racine de votre site ou dans un dossier (à vous de voir).

Première méthode : un lecteur par fichier avec dewplayer mini par exemple

C’est assez simple à réaliser mais pas très lisible si votre podcast propose des dizaines de fichiers !

Tout d’abord nous allons récupérer les données :

jQuery.ajax({
             type: "GET",
             url: "votreClonePHPDuRSS.php",
             dataType: "xml",
             //async : false,
             success: parseXml
        });

Ensuite nous allons parser le XML et réaliser un each() pour récupérer les différentes données (ici le titre et l’url du mp3).

function parseXml(xml) {
            jQuery(xml).find("item").each(function() {
                   var url = jQuery(this).find('enclosure').attr('url');
                   jQuery("#lecteur").append('<h3>' +
                jQuery(this).find("title").text() +
                    '</h3><object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=' +
                url +
                '" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-mini.swf?mp3=' +
                url +
                '" /></object>');
            jQuery("#loading").hide();
          });
}

Dans votre code HTML vous proposez deux divs :

<div id="loading">en cours de chargement</div>
<div id="lecteur"></div>

La première div disparaîtra dès que la seconde sera chargée.

On obtient une liste des titres proposés avec un lecture sous chaque titre. C’est fonctionnelle mais sans plus.

Seconde méthode : utilisons dewplayer multi

Pour réduire l’espace, nous allons placer tous les mp3 du podcast dans le dewplayer multi et afficher ensuite dans une liste les titres numérotés des fichers mp3.

Pour cela nous allons créer, avant de parser le XML, quelques variables : une variable qui va récupérer au fur et à mesure les urls des mp3 ; une autre variable qui va reprendre toutes ces urls ; et enfin une variable pour les numéros des titres (car dans le each le premier titre a la valeur 0).

var html = 'plus';
var html2 = '';
var num = '';

Ensuite on lance le each :

function parseXml(xml) {
     jQuery(xml).find("item").each(function(index) {
            var url = jQuery(this).find('enclosure').attr('url');
            if (html === 'plus'){html = 'dewplayer-multi.swf?mp3=' + url;}    
            else {html += '|' + url;}
            html2 = html;
            $('#lecteur2 object param.url').val(html2);
            $('#lecteur2 object#dewplayer-multi').removeAttr('data').attr({ data: html2 });
            num = index + 1 ;
            $('ul#url').append('<li>' + num + ' : '+ jQuery(this).find("title").text() + '</li>');
            jQuery("#loading").hide();
    });
}

Votre code HTML :

<div id="loading">en cours de chargement</div>
<div id="lecteur2"><object type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3=" width="240" height="20" id="dewplayer-multi"><param name="wmode" value="transparent" /><param class="url" name="movie" value="dewplayer-multi.swf?mp3=" /></object></div>
<ul id="url2"></ul>

L’idée est de changer les valeurs dans le lecteur de dewplayer via jQuery en changeant la valeur du param et le data de l’object. Je donne à la valeur ‘html’ un mot quelconque pour pour voir différencier la première url des autres qui doivent être précédées d’un ‘|’. Je rajoute dans la fonction du each l’index, je donne la valeur de l’index+1 à num pour ne pas commencer à 0. Ma playlist est en place !

Vous pouvez voir les deux méthodes en ligne avec le code sur le site de sprechgesang.

Sois gentil, partage !