J’ai cherché comment avoir une solution la plus standard et la plus simple possible, donc via le lecteur audio HTML5, mais qui permette de lire non pas un seul fichier mais toute une liste, afin de proposer l’accès le plus rapide possible pour le lecteur aux podcasts de « monnaie libre ».
La balise fonctionne ainsi pour un fichier son quelconque, encodé ici en deux format libre ogg. (On peut proposer d’autres formats comme mp3 ou autres, on peut ainsi rajouter autant de lignes <source> que l’on souhaite vers différents formats du même fichier son).
<audio controls="controls"> <source src="chanson.ogg" type="audio/ogg" /> Votre navigateur ne supporte pas la balise HTML5 audio. </audio>
Ce qui nous donne :
Après quelques recherches et modifications, j’ai réalisé ce que je souhaitais à savoir un même lecteur avec une liste de plusieurs fichiers différents. Voici donc le code HTML contenant un script très simple et très court, qui permet d’intégrer une liste de fichiers « en durs » dans la page intégrant le lecteur :
<html>
<head>
<title>HTML5 Audio Player with Playlist</title>
<script>
function loadSong(elt, e) {
if(!e) var e = window.event;
document.getElementById("player").src=elt.href;
document.getElementById("player").load();
document.getElementById("player").play();
return false;
}
window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[i].onclick=function(e) { return loadSong(this, e); };
}
}
</script>
</head>
<body>
<div>
<audio tabindex="0" id="player" controls="controls">
balise audio HTML5 inconnue</audio>
<ul id="playlist">
<li><a href="fichier1.ogg" onclick="loadSong()">fichier1</a></li>
<li><a href="fichier2.ogg" onclick="loadSong()">fichier2</a></li>
<li><a href="fichier3.ogg" onclick="loadSong()">fichier3</a></li>
</ul>
<ul id="signature">cc-by-sa <a href="http://www.monsite.org"
target="_blank">signature</a></ul>
</div>
</body>
</html>
C’est la solution que j’ai d’abord retenue pour proposer ce lecteur aux auditeurs du podcast « monnaie libre » dont voici le résultat avec en prime une mise en page css permettant de coller au mieux aux couleurs par défaut du lecteur par défaut de la balise HTML5 audio (voir dans le code source de la page HTML pour voir le css).
Link Mauve qui a suivi le sujet sur un salon xmpp/jabber m’a signalé une solution qu’il avait déjà développée et nommée « Spiff », qui lisait un fichier xml autonome plutôt que de coder les adresses des fichiers en dur. Je lui ai alors proposé de l’améliorer pour voir s’il pouvait directement parser un flux rss de podcasts ! Je lui laisse la parole :
« Spiff était à la base un simple lecteur de playlists XSPF, clone d’un autre écrit en flash, destiné à relever un défi de faisabilité en HTML et JS purs, sans ajout de plugin. L’un des buts était de le rendre aussi simple à intégrer dans un site externe, par un élément object auquel on fournit des paramètres pour contrôler le comportement. Je lui ai depuis ajouté des fonctionnalités qui m’ont été demandées par ses utilisateurs, comme la lecture automatique, le changement de piste, le support de multiple versions d’une même piste, et dernièrement le support des podcasts RSS. »
Nous finirons donc par le lien vers Spiff et un exemple avec l’intégration de spiff pour monnaie libre (Pour les webmasters : faire ensuite clic droit pour avoir le HTML source, et la place du fichier javascript spiff.js à télécharger, à noter aussi dans l’URL le paramètre ?file=urlRSSpodcast).
Exemple d’intégration qui reprend ici l’actualisation automatique des 3 derniers podcasts « Monnaie Libre » via la lecture directe du flux RSS (intégrés ici, pas directement dans la page, mais via une iframe) :
Voilà donc deux solutions qui devraient intéresser les podcasteurs souhaitant proposer des formats libres.
Happy coding !
26 comments