Lecteur HTML5

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).

Mais cette solution, si elle permet de mettre à jour ce seul fichier pour que le lecteur intègre de nouveaux podcasts à lire, n’est pas très pratique pour proposer un lecteur qui lirait directement un podcast actualisé, en lisant directement le flux rss du podcast !

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 !


Commentaire

Lecteur HTML5 — 27 commentaires

      • oui
        j’ai essayé plusieurs possibilités
        notamment , j’ai doublé le script avec sur le 2eme player2 et playlist2
        dans ce cas, le player 2 fonctionne bien … mais c’est le 1 assigné a play et playlist qui ne fonctionne plus…

        • les scripts:

          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); };
          }
          }

          function loadSong(elt, e) {
          if(!e) var e = window.event;
          document.getElementById(« player2 »).src=elt.href;
          document.getElementById(« player2 »).load();
          document.getElementById(« player2 »).play();
          return false;
          }

          window.onload = function() {
          links = document.getElementById(« playlist2 »).getElementsByTagName(« a »);
          for(var i = 0; i<links.length; i++) {
          links[i].onclick=function(e) { return loadSong(this, e); };
          }
          }

          PLAYER1:

          balise audio HTML5 inconnue

          name
          name

          PLAYER2:
          balise audio HTML5 inconnue

          name

          • Attention, il faut que tu revoies ton code. Si tu as deux players, tu dois faire en sorte de distinguer une action sur l’un ou sur l’autre. Je te conseille de faire d’autres tests et/ou ensuite de donner le lien de ta page de tests à des développeurs de scripts, sur un forum actif sur le sujet. Là on sort du strict cadre de la balise audio.

  1. oui je vais continuer mes recherches . Il y a tjr une solution 🙂
    merci pour cette aide. elle me confirme la direction à prendre . je vais approfondir

  2. Bonjour Galuel,

    Je suis super intéressée par ce player SPIFF. Je gère un petit agrégateur de podcasts et ça fait un bout de temps que j’aimerais intégrer les audios ogg dans mon player.

    Malheureusement sur le site de linmauve il n’y a que l’ancienne version téléchargeable (http://linkmauve.fr/dev/) et je voulais savoir si ta version qui accèpte les flux rss t’était uniquement réservée ou si elle était disponible.

    Dois-je te demander à toi ou à linkmauve ?

    Dans tous les cas ce player me semble idéal. Bravo.

    Béa

    • Bonjour Béa, il te suffit de suivre le lien « spiff pour monnaie libre », et par clic droit tu auras le code source et aussi le lien vers le fichier javascript, donc tu auras tout à télécharger par simples clics. Tu peux aussi demander à LinkMauve. Si tu l’intégres quelque part fais le moi savoir ici dans ces commentaires ! Merci. Galuel

  3. Bonjour Galuel,

    Le lien dont tu me parles nous amène sur la première version de ton player.

    C’est le premier lien que tu as donné qui nous amène vers l’exemple SPIFF pour monnaie libre et là il n’y a pas le fichier. (enfin plus exactement le fichier dans archive : http://linkmauve.fr/dev/spiff-rss/spiff.tar.xz se télécharge mais ne s’ouvre pas et le lien mercurial pository : http://hg.linkmauve.fr/spiff ne contient rien de SPIFF).

    (Alors que j’ai réussi à télécharger et à ouvrir la version précédente ici : http://linkmauve.fr/dev/spiff.tar.xz )

    Pourrais tu vérifier s’il te plait ?

    Bien évidemment si je l’intègre vous serez tous les deux prévenus et cités, j’ai hate de pouvoir le tester !

    Béa

    • Béa, tu as SPIFF qui fonctionne très bien sur cette page HTML. Ensuite dans le code source tu n’as besoin en plus que du fichier javascript qui se trouve donc sur ce second lien.

      Tu n’as besoin que de ces deux fichiers, et de faire ensuite appel à ta page HTML avec le paramètre ?file=urldetonRSSdepodcast (pour que ça fonctionne ton podcast doit intégrer dans son flux RSS un tag « enclosure » qui donne l’url de tes fichiers audio, si le tag de ton RSS contenant cette url porte un autre nom, tu devras modifier ce nom de tag directement dans le fichier javascript).

      J’espère que c’est clair, tu n’as donc besoin que de deux fichiers dont je t’ai donné les noms. Ensuite si tu le testes quelque part online, et que tu rencontres un problème je pourrai te dire sans doute ce qui ne va pas en regardant comment tu l’as uploadé et comment tu y fais appel.

  4. Galuel,

    Pour te répondre honnêtement, tu n’es pas tout à fait clair, ou tout du moins ce n’est pas tout à fait clair pour moi, mais je comprend l’idée.

    Alors, y’a du nouveau, j’ai enfin compris l’idée de piocher le code source de la page html et du javascript, même si ça eut été plus simple de créer un petit fichier téléchargeable directement contenant ces deux fichiers là, comme LinkMauve avait fait pour la version précédente.

    Où ça nous mène ?

    A la version « bleue » qui lit parfaitement ton fichier rss (feed.rss installé sur mon serveur pour tester).
    Tu peux voir le résultat ici : http://blogsaudio.dmmworld.com/PLAYERhtml5/index.xhtml

    MAIS l’inconvénient de cette version est que je ne sais pas comment mettre un lien « entier » de podcast, comme par exemple ton flux : http://www.monnaielibre.creationmonetaire.info/feed/
    J’ai essayé avec des guillemets ‘ ‘, sans guillemets, et ça ne marche pas.

    Quand à la seconde version, elle fonctionne très bien aussi mais elle est moins intuitive puisque il faut d’abord cliquer sur le titre de l’audio qu’on veut écouter avant d’appuyer sur « lecture », sinon rien ne se passe.
    http://blogsaudio.dmmworld.com/PLAYERhtml5/?file=feed.rss

    Et même interrogation que pour la version « bleue » : comment intégrer un lien complet de flux rss2, dont certains adresses comportent en plus des points d’interrogation dans leur adresse ?

    Ca avance, ça avance… ;o)
    Béa

    • Alors, y’a du nouveau, j’ai enfin compris l’idée de piocher le code source de la page html et du javascript, même si ça eut été plus simple de créer un petit fichier téléchargeable directement contenant ces deux fichiers là, comme LinkMauve avait fait pour la version précédente.

      Pour ça, tu peux participer au développement de spiff en te mettant en contact avec LinkMauve, et pourquoi pas, mettre les fichiers zip et le mode d’emploi sur Github ou SourceForge pour proposer ces améliorations. Je mettrai alors un lien vers cette version proposée à tous, simplifiée grâce à toi.

      Tu peux voir le résultat ici : http://blogsaudio.dmmworld.com/PLAYERhtml5/index.xhtml

      Parfait, tu as très bien compris !

      MAIS l’inconvénient de cette version est que je ne sais pas comment mettre un lien « entier » de podcast, comme par exemple ton flux : http://www.monnaielibre.creationmonetaire.info/feed/
      J’ai essayé avec des guillemets ‘ ‘, sans guillemets, et ça ne marche pas.

      Tu ne peux pas, tu dois pointer vers un fichier rss qui est sur le même serveur que spiff. Pour ça tu dois créer un nouveau flux rss chez toi, alimenté par un (ou plusieurs) flux externes (wordpress sait très bien faire ça avec une extension nommée WP RSS Multi-importer), ou bien avoir un outil installé sur ton serveur qui te fabrique ce flux RSS qui va te servir pour spiff.

      Quand à la seconde version, elle fonctionne très bien aussi mais elle est moins intuitive puisque il faut d’abord cliquer sur le titre de l’audio qu’on veut écouter avant d’appuyer sur « lecture », sinon rien ne se passe.
      http://blogsaudio.dmmworld.com/PLAYERhtml5/?file=feed.rss

      Ca c’est un bug, tu dois comparer les codes sources des deux versions pour le trouver… Ceci dit pour moi avec Firefox 29.0 ça fonctionne parfaitement sans devoir cliquer sur « lecture ».

      Et même interrogation que pour la version « bleue » : comment intégrer un lien complet de flux rss2, dont certains adresses comportent en plus des points d’interrogation dans leur adresse ?

      Ton flux doit être local. Tu dois en sus revoir la remarque que je t’ai donnée concernant le tag « enclosure », s’il n’existe pas dans ton fichier RSS, tu dois repérer le nom du tag qui contient l’adresse de ton fichier de podcast ogg (ou mp3).

      PS : pour répondre dans les commentaires clique préférentiellement sur « répondre » en bas du message, ça placera ta réponse juste en dessous, c’est mieux pour qui nous lira ensuite pour suivre le fil de la conversion…

      • Tu ne peux pas [mettre un lien « entier » de podcast], tu dois pointer vers un fichier rss qui est sur le même serveur que spiff.
        Arrrggg, il doit bien exister un moyen de permettre la lecture de flux rss externes, je vais chercher.

        Pour ça tu dois créer un nouveau flux rss chez toi, alimenté par un (ou plusieurs) flux externes (wordpress sait très bien faire ça avec une extension nommée WP RSS Multi-importer), ou bien avoir un outil installé sur ton serveur qui te fabrique ce flux RSS qui va te servir pour spiff.
        Aucun problème, j’ai déjà ça : http://blogsaudio.dmmworld.com/moonmoon/index.php

        Ca c’est un bug, tu dois comparer les codes sources des deux versions pour le trouver… Ceci dit pour moi avec Firefox 29.0 ça fonctionne parfaitement sans devoir cliquer sur « lecture ».
        Pas de différence entre chez toi et chez moi pour ce player « gris », je dois cliquer sur les titres avant d’appuyer sur play dans les deux cas. j’ai firefox 29.0.1 et ça me fait pareil sur SeaMonkey.

        Tu dois en sus revoir la remarque que je t’ai donnée concernant le tag « enclosure », s’il n’existe pas dans ton fichier RSS, tu dois repérer le nom du tag qui contient l’adresse de ton fichier de podcast ogg (ou mp3).
        Tous les podcasts que j’héberge ont leur fichier dans le tag enclosure du flux rss2. C’est une norme je pense. ;o)

        Aucun problème pour participer au développement et aider, mais je ne pratique ni Github ni Source Forge. Je contacterai LinkMauve pour ça.

        Merci, et à bientôt avec de nouvelles réponses ;o)

        • J’ai compris ton soucis concernant particulièrement le « ? ». En effet le flux rss est correct (le tag « enclosure » y est), mais son expression comporte un « ?type=atom10 » qui ne semble pas pris en compte.

          Ceci est dû à la forme du javascript qui découpe ton URL de podcast de façon incorrecte, et il faut corriger le programme pour qu’il prenne en effet l’URL entière après le premier « ? », et pas après le second… Ou quelque chose dans ce genre.

          Par contre pour pointer vers une URL de podcast extérieure au site j’ai bien peur qu’il n’y ait pas de solution car je crois bien (à vérifier) que le fondement même du javascript interdit d’aller pointer à l’extérieur. Ceci étant dit, te fabriquer des URL internes n’est vraiment pas difficile, y compris avec des CMS clés en main style WordPress. Ou bien tu peux sans doute te trouver une solution auprès de programmeurs spécialistes qui te donneront un PHP quelconque capable de te faire ça à la volée.

          Tiens moi au courant de la suite !

          PS : excellent ton blog de podcasts, je m’empresse de le mettre dans mes RSS 🙂

  5. Merci Galuel ;o)

    Avant tout, tu avais bien raison sur le player « gris », chez moi aussi ça marche en cliquant sur un titre dans la liste, sans appuyer ensuite sur lecture. (par contre quand on appuie sur « lecture » il ne se passe rien tant qu’on n’a pas cliqué sur un titre, c’est dommage. Doit peut-être y avoir un truc à rajouter dans le code pour positionner le premier titre comme titre cliqué automatiquement).

    Ensuite je viens de trouver un player complètement hallucinant (dans le sens où visuellement parlant il ressemble à rien de connu, et j’ai dû faire le tour de tous les players html5 disponibles sur le web) et je te file le lien :
    http://studio.html5rocks.com/#Player

    J’ai donc installé ça et mis des flux rss de podcasts avec des mp3 mais aussi le tiens avec des ogg et ça marche :
    http://blogsaudio.dmmworld.com/PLAYERhtml5/audio-podcast/

    Bon après il est complètement foutraque et tout le code est rempli du nom d’un célèbre moteur de recherche, mais on peut dire que c’est possible d’avoir un lecteur html5 avec des playlists extérieures. C’est pour la bonne nouvelle ;o)

  6. Bonjour Galuel,

    Je suis bien désolée de t’embêter à nouveau, mais j’ai besoin d’explications que je ne trouve pas ailleurs.
    J’ai finalement pris ton code premier que j’ai mixé avec simplepie pour obtenir les audios de nimporte quel flux rss2 voulu. Ca fonctionne.

    En revanche, je souhaite pouvoir avoir plusieurs players html5 sur une même page, et pour l’instant je bloque (essentiellement parce que je ne comprend pas grand chose au javascript même en lisant des cours ou tutos sur le net). Le premier player fonctionne, pas les autres, parce qu’un id doit être unique et qu’avec plusieurs players ayant le même id chacun, forcément…

    Après une semaine de réflexion, j’ai trouvé un moyen (que je te dirai quand tout sera fait, j’aime bien ne montrer mes trucs que quand ça fonctionne parfaitement, et aussi j’aime bien réfléchir donc je veux pas qu’on me donne la solution toute prête).

    Mais si j’ai bien en tête ce qu’il faut faire, je n’arrive pas à l’appliquer parce que je ne comprends pas ce que veut dire le bout de code javascript suivant (et bien évidemment c’est là dedans que je dois faire une modif)(en même temps je comprends rien à javascript en général).

    Le code javascript (c’est bien du javascript hein ? rassures moi) :

    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); };
    }
    }

    (qui est ton premier code, tu peux le constater).

    Pourrais-tu m’expliquer, si tu as le temps, chaque ligne du code pour me dire à quoi chaque ligne sert ?

    Le « player » entre parenthèse, je peux le remplacer par une variable ?
    Pourquoi à un moment y’a =elt.href; ? Ca veut dire quoi ? (c’est pour te situer mon niveau…)

    Grand merci d’avance si cela t’est possible,
    Bon Week-End,
    Je continue de chercher de mon coté,

    Béa

    • Oui « player » ainsi que « playlist » sont en fait les « ID » des balises HTML dans ta page, qui sont repérées ainsi par le code javascript afin de les utiliser (appeler leurs fonctions, ou même dans d’autres cas on peut aussi, via le code javascript modifier l’intérieur du code HTML dans les balises, pour y rajouter ou y enlever des éléments). Donc oui, tu dois faire en sorte de différentier chacun de tes players avec des « ID » différents !

      • Merci infiniment à toi Galuel !

        J’ai galéré comme une malade mais j’en suis venue à bout !

        Je reviendrai te montrer le résultat bientôt. Il me reste le décors à planter et pleins de bidules à fignoler encore. Encore merci et à très vite pour te montrer l’objet ;o))))

  7. Ping : L’économie des logiciels libres | Création Monétaire

  8. Ping : La TRM en double miroir | Création Monétaire

  9. Bonjour,
    j’essaie d’utilisé le lecteur 1er version avec la combinaison mp3 – ogg pour chaque chanson mais je n’y arrive pas, pourriez vous me dire comment faire pour passé les deux version ogg et mp3 en paramètre dans la fonction Onclick.

    Ou alors me dire à quoi sert ces deux variable :function loadSong(elt, e) elt et e
    Merci

  10. Aucune protection du fichier de l’œuvre musicale (un clic droit et le morceau est volé, plus besoin de retourner sur le site qui l’affiche). Cette solution n’est donc ni viable, ni utilisable, par aucun compositeur, musicien, auteur, qui voudrait mettre en ligne gratuitement, pour l’écoute & non au prix des copies illicites, ses propres compositions.
    C’est ça le problème sur l’Internet! Car personne n’a le droit de violer le droit d’auteur sans l’accord écrit de celui-ci. Il faudrait un peu que lesdits « développeurs » pensent (qu’il y a des DROITS dans tout acte CIVIL).

    • Que ceux qui souhaitent développer les licences non-libres pratiquent l’informatique non-libre et que ceux qui souhaitent développer les licences libres pratiquent les licences libres. Les développeurs de logiciels libres n’imposent pas l’utilisation des logiciels libres, il n’y a aucune obligation à venir lire ou poster sur ce site sous licence libre par exemple.

  11. Bonjour Galuel
    Tout d’abord merci pour le partage de ce player, je le trouve très esthétique et j’ai pu l’intégrer sur mon site pour lire mes chansons.
    Je l’ai paramétré à ma convenance et j’en suis très content. Le résultat sur http://www.loucalice.com . mais je galère sur un point : je n’arrive pas à faire s’enchaîner les morceaux comme sur celui de Monnaie Libre ! Quelle est l’astuce ? Est-ce du fait que je n’ai pas crée de fichier liste ? Autre chose y aurait-il un code pour passer au morceau d’avant ou d’après (genre flèches situées avant et après le bouton play/pause) ? Ainsi le player serait absolument Parfait ! Merci

  12. En fait j’ai trouvé pour la transition automatique. Ce script marche bien. Merci encore

    function loadSong(link,playerId)
    {
    var player=document.getElementById(playerId);
    document.getElementById(‘source’).src=link.href;
    player.load();
    player.play();
    }

    function preparePlayer()
    {
    var links=document.getElementById(« playlist »).getElementsByTagName(« a »);
    var player=document.getElementById(‘player’);
    var z;
    for (z=0;z<links.length;z++)
    links[z].onclick=function(e) {loadSong(this,"player");return false;};
    player.addEventListener("play",function() {
    var k,km=links.length;
    for (k=0;k<km;k++)
    {
    if (document.getElementById("source").src==links[k].href)
    {
    this.setAttribute("data-k",k);
    links[k].style.color="black";
    }
    else links[k].style.color="grey";
    }
    },false);
    player.addEventListener("ended",function() {
    var k=parseInt(this.getAttribute("data-k"));
    if (k<(links.length-1)) k++;else k=0;
    loadSong(links[k],"player");
    },false);
    }

    window.addEventListener("load",preparePlayer,false);

    Merci encore.

  13. Ping : Mes trouvailles du jour : 7 October 2015 | DotMana

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*

Time limit is exhausted. Please reload the CAPTCHA.