Radio, jukebox, playlist...

Cela fait un moment que j'y songe, mais je me résous enfin à dire quelques mots de la radio installée sur ce blog, dans la boîte Radioblog.

Peka-Radio : le choix de Saute-mouton

Vieilles ondesLa radio surgit dans un pop up quand on clique sur l'image ; elle fonctionne grâce à la technologie Flash ; elle a été codée et "designée" par la société Pk-prod. Le fichier Flash est téléchargeable depuis le portfolio du site, en cliquant sur la cinquième icône de la barre inférieure. L'installation est enfantine : après avoir chargé sur le serveur, dans un dossier radio/ le contenu du zip, on crée un sous-dossier mp3/ où l'on verse 10 *.mp3 (nombre maximal imposé). Il suffit ensuite d'appeler la radio dans un pop up. Un code est fourni dans la documentation du script pour ce faire, mais les GuppYstes auront intérêt à tirer parti du code popup natif de GuppY. Utilisez ma portion de code en copiant-collant le code source de la présente page (mot-clef pour affiner la recherche dans le source : radioblog).

Pour personnaliser l'aspect de la radio, en choisissant les couleurs des boutons et des textes, ainsi que l'image de fond, il suffit de renseigner un fichier de config, dont tous les paramètres sont commentés et renseignés dans la doc. En quelques minutes, le tour est joué !


Zanorg Radio : la même en mieux

En furetant, j'ai découvert que Kek, l'un des créateurs de la Peka-radio, à l'instant décrite, avait produit un modèle plus évolué, la Zanorg Radio. Dans sa version basique, elle ressemble furieusement à son aînée, mais elle a l'avantage :Bien entendu, elle conserve la souplesse de son modèle : Malheureusement, je n'ai pas trouvé d'autre moyen de l'installer que les suivants :
  1. par iframe, solution guère favorable
  2. via un include en PHP, ce qui suppose de modifier "en dur" les sources de GuppY
J'ai retenu la solution iframe pour vous présenter une démonstration, dont je vais profiter pour vous faire découvrir Zlot, un talentueux duo français, qui commet avec bonheur de vigoureuses "chansons cynico-caustiques" :


Je ne prends pas la peine de customiser les couleurs de la radio, mais voici un schéma inclus dans la doc qui donne un aperçu des possibilités offertes :

Comment customiser l'interface de la Zanorg Radio


XSPF Web Music Player

Voici une autre alternative, le XSPF Web Music Player, qui, s'il est plus complexe à mettre en place, a le mérite de ne pas se lancer au chargement de la page, comme la mini-radio précédente [Edit : Kek, le développeur de cette dernière, m'a informée par mail que la nouvelle version de la Zanorg Radio comprend une option autoplay, laissant le choix à l'utilisateur de lancer (ou non) automatiquement la lecture des pistes]. La complexité vient du fait qu'il ne suffit pas de placer les fichiers *.mp3 dans un dossier pour qu'ils soient détectés et joués, mais qu'il faut créer une playlist au format *.xspf. Heureusement, un très bon tutoriel (EN) indique comment faire en proposant un modèle et une méthode pas-à-pas.

Autre atout, le Player se décline en quatre versions :
  1. le Music Player Slim est une simple, fine et discrète barre horizontale
  2. le Music Player Extended présente une interface plus sophistiquée. Il affiche notamment pour chaque morceau une image prédéfinie par l'utilisateur au moment où il aura fabriqué sa playlist.xspf
  3. le Music Player Button est un minuscule bouton, à peine visible, idéal pour inclure du son dans un flot de texte, sans l'interrompre
  4. enfin, la Music Player Sidebar, réservée aux utilisateurs de Firefox, évidemment, ajoute un panneau latéral de navigation au navigateur
Mais voici, sans plus tarder, le rendu du Music Player Slim, qui joue la superbe playlist Sexy and swinging, trouvée sur Webjay :


et celui du Music Player Extended, avec les vignettes :


L'avantage de ce player est d'être intégrable à une page sans le recours à l'iframe, grâce à un code fourni sur la page d'aide mentionnée supra. Par ailleurs, le fonctionnement par playlists permet d'avoir accès à un bon nombre de ressources partagées, recensées pour partie sur la page de présentation du script. L'usage du générateur de playlists Webjay facilite d'ailleurs la confection de celles-ci, dès qu'on a un peu compris le principe de fonctionnement, guère aisé à appréhender au début.


Php SHOUTcast : votre radio dans votre page

Retour à un site francophone avec la radio php-SHOUTcast, plus complète que les autres puisqu'elle intègre un mini-chat. Elle est encapsulée dans un mini pop-up et un système de layers transparents permet de basculer d'un affichage à l'autre. Elle fonctionne sans base de données, avec du PHP couplé à un template en CSS, mais l'utilisateur doit aussi disposer d'un serveur SHOUTcast (aïe !), ce qui à mon sens l'éloigne du "podium". Ce qui achève toutefois véritablement de la perdre, est le fait qu'elle ne fonctionne sous Windows qu'avec Internet Explorer et sous Linux qu'avec les navigateurs Mozi'likes (aberration !). Voici néanmoins deux screenshots :

Php-SHOUTcast en action Le mini-chat intégré de Php-SHOUTcast


Retour sur le Dewplayer

Je me contente, par souci d'(illusoire) exhaustivité, de recopier ce que j'ai écrit dans ce billet.

Sur le blog de Dew, il existe un minimaliste et sobre lecteur mp3, en flash. Son principal avantage, nous explique l'auteur, est, outre sa légèreté (- 3Ko), de permettre de ne télécharger le contenu du son qu'à la demande (lorsqu'on clique sur play) et non pendant le chargement de la page, ce qui aurait pour désastreux et conjoints effets
  1. d'en ralentir le chargement
  2. d'indisposer les visiteurs non désireux d'être assaillis de musique sans avoir été consultés sur la question.
Une démonstration étant toujours plus éloquente qu'un vaseux discours, tendez l'oreille à Miss Brown To You, chantée par Billie Holiday : . J'ai opté ici pour une forme réduite du lecteur, afin de l'insérer dans le texte sans coupure ni déport de ligne, mais on peut préférer une taille légèrement supérieure, comme ceci :


Dans tous les cas, ce lecteur devient un heureux indispensable ! wink

Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=1410 - [Version PDF]