Intégrer un flux radio en HTML
De plus en plus de radios sont présentes sur le web, chaque grande radio dispose de son propre site et même des particuliers peuvent maintenant créer leur propre webradio ou webtv en utilisant le protocole SHOUTcast.
Pour diffuser une radio à partir de votre site web, il suffit de connaitre l’adresse de son flux, et d’intégrer un lecteur audio dans votre code HTML. J’ai trouvé de nombreux exemples de sites utilisant le lecteur Windows Media Player, mais tous utilisaient dans leur code des balises <embed>, balise obsolète en XHTML.
J’ai donc cherché sur A List Apart des exemples de code valides, et en tâtonnant un peu, (ils concernaient tous la vidéo ou le MP3), je les ai adaptés à mon besoin, c’est à dire les flux radio.
Voici un code qui fonctionne parfaitement, c’est d’ailleurs celui utilisé par le site ekoot.net.
Dans l’exemple ci-dessous, le flux est celui de France Info.
<!-- Code Player -->
<object id="player" width="180" height="45" type="application/x-mplayer2" data="http://players.creacast.com/creacast/france_info/playlist.m3u">
<param name="src" value="http://players.creacast.com/creacast/france_info/playlist.m3u" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
<param name="ShowControls" value="true" />
<param name ="ShowDisplay" value="false" />
<param name="EnableContextMenu" value="true" />
</object>
<!-- Fin Code Player -->Attention à ne pas oublier de spécifier un id unique dans la balise <object>, j’ai passé beaucoup de temps avant de comprendre pourquoi le lecteur disparaissait après un « refresh » de ma page et ne réapparaissait qu’après avoir effacé le cache de mon navigateur.
La plupart des radios utilisent des flux m3u ou asx qui ne devraient pas poser de problème avec ce type de lecteur. Quelques radios cependant utilisent le caractère & dans l’URL de leur flux : je n’ai pas encore trouvé le moyen de les faire fonctionner (mais je ne désespère pas d’y arriver).
Bonne écoute.
Commentaires