Accueil du site > Lecteurs audio > FreeRadio > Le lecteur FreeRadio 1.0

Le lecteur FreeRadio 1.0

jeudi 12 mai 2011, par Franck Ruzzin

FreeRadio est un lecteur de flux audio gratuit écrit en actionscript.
Facile à intégrer, il est possible de l’implanter en pleine page ou dans une nouvelle fenêtre, pour ne pas perdre le signal tout en surfant, comme illustré ci-dessous.
Dans la section Liens sont indiqué des annuaires de WebRadios.

Instance freeRadio1

freeradio1

Alternative content

Get Adobe Flash player

play
stop
isPlaying ?
getVolume
setVolume (0 à 1)
getPan
setPan (-1 à 1)
volume :  ? getRadioUrl
pan :  ? setRadioUrl
Etat :  ?

 

Instance freeradio2

freeradio2

Alternative content

Get Adobe Flash player

play
stop
isPlaying ?
getVolume
setVolume (0 à 1)
getPan
setPan (-1 à 1)
volume :  ? getRadioUrl
pan :  ? setRadioUrl
Etat :  ?

 

 

Ouvrir FreeRadio dans une fenêtre

 


 

I) Implantation d’un lecteur FreeRadio


Extraire le contenu de l’archive freeradio-1-0.zip, dans le dossier de votre choix. Si vous souhaitez une structure de fichier différente de celle proposée, il faudra penser à éditer les deux variables situées en début du fichier freeradio-min.js :

m_freeradio_swfUrl="swf/freeradio.1.0.swf";     //Chemin du fichier swf "freeradio.swf"
m_express_swfUrl="swf/expressInstall.swf";      //Chemin du fichier swf "expressInstall.swf"

On utilise la boîte à outils javascript swfobject 2.2.

Note : la documentation sur l’usage de swfobject ainsi que le téléchargement de l’archive se fait à l’adresse suivante : http://code.google.com/p/swfobject/


1) Importer dans la partie <head> de la page les fichiers javascript swfobject.js et freeradio-min.js et le fichier de style freeradio.css.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
        <title>FreeRadio</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="javascript/swfobject.js" type="text/javascript"></script>
        <script src="javascript/freeradio-min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/freeradio.css" type="text/css" media="all">
</head>


2) Ajouter le code indiquant le point d’insertion du lecteur FreepapeR dans la page :


<div id="Freeradio1">
        <h1>Freeradio1</h1>
        <p>Alternative content</p>
        <p>
        <a href="http://www.adobe.com/go/getflashplayer">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"     alt="Get Adobe Flash player" />
        </a>
        </p>
</div>

Si le plugin Flash est manquant ou si la version est trop ancienne, alors cette partie du code sera utilisée pour le lien vers le plugin adéquat. L’élément important est id, dans notre exemple "Freeradio1" qui permettra d’indiquer à la boite à outils swfobject où implanter, si possible, le lecteur FreeRadio. Ainsi, le conteneur <div> d’id Freeradio1 devrait être remplacé par un objet SWF.

3) Créer le lecteur FreeRadio, avec ses options


<script type="text/javascript">
var flashvars = {
        radioURL: "http://live.campusgrenoble.org:9000/rcg112.m3u",
        autoStart: "false",
        volume: 0.3,
        pan: 0.5,
        onVolumeChange : whenVolumeChange,
        onPanChange : whenPanChange,
        onStop : whenStop,
        onPlay : whenPlay,
        author: "http://lededansdubocal.net"
};
var params = {
        wmode: "transparent"
};
var attributes = {
        altContentId: "Freeradio1"
};
freeRadio.embedRadio(flashvars, params, attributes);
</script>

- radioURL : optionnel - URL à ouvrir (radio, son). défaut : http://tai-02.egihosting.com/bombay...
- autoStart : optionnel - Démarrage automatique au chargement d’URL, true ou false. défaut : true
- volume : optionnel - décimal de 0 à 1. défaut : 0.7
- pan : optionnel -décimal de -1 (gauche) à 1 (droite). défaut : 0
- onVolumeChange  : optionnel – Méthode à exécuter lorsque le volume change (par défaut exécute onVolumeChange)
- onPanChange  : optionnel – Méthode à exécuter lorsque la balance change (par défaut exécute onPanChange)
- onStop  : optionnel – Méthode à exécuter lorsque la lecture s’arrête (par défaut exécute onStop)
- onPlay  : optionnel – Méthode à exécuter lorsque la lecture commence (par défaut exécute onPlay)
- wmode : optionnel – Positionnement du lecteur dans la page, window ou opaque ou transparent. défaut : window
- altContentId : obligatoire – id du noeud dont on remplace le contenu par le lecteur FreeRadio

Si on souhaite ne pas définir une valeur, il suffit de ne pas écrire la paire correspondante. Si on ne souhaite définir aucune valeur pour un objet il faut tout de même créer un objet vide, par exemple :
var flashvars={}
var params={}

ATTENTION : dans la description des attributs d’un objet (flashvars, params ou attributes), il est indispensable de séparer deux valeurs par le caractère virgule ",", sauf pour le dernier qui ne doit EN AUCUN CAS être suivi de virgule (cela provoque une erreur avec IE et Opéra) !

C’est terminé ! Au chargement de la page, le lecteur FreeRadio est créé et opérationnel !

 

II) Pilotage javascript d’un lecteur FreeRadio

- freeRadio.play(idRadio:String)

Lance la lecture du lecteur d’identifiant idRadio

- freeRadio.stop(idRadio:String)

Stoppe la lecture du lecteur d’identifiant idRadio

- freeRadio.isPlaying(idRadio:String):Boolean

Retourne un booléen indiquant si le lecteur d’identifiant idRadio est en mode lecture (true) ou en mode arrêt (false)

- freeRadio.getVolume(idRadio:String):Number

Retourne le volume actuel du lecteur d’identifiant idRadio, compris entre 0 et 1

- freeRadio.setVolume(idRadio:String,vol:Number)

Fixe le volume du lecteur d’identifiant idRadio, vol compris entre 0 et 1

- freeRadio.getPan(idRadio):Number

Retourne la balance actuelle du lecteur d’identifiant idRadio, compris entre -1 et 1

- freeRadio.setPan(idRadio:String,pan:Number)

Fixe la balance du lecteur d’identifiant idRadio, pan compris entre -1 et 1

- freeRadio.getRadioUrl(idRadio:String):String

Retourne l’URL du flux audio en cours de lecture

- freeRadio.setRadioUrl(idRadio:String,url:String)

Fixe l’URL du flux audio à lire

 

III) Evènements javascript lancés par un lecteur FreeRadio

- onVolumeChange(idRadio:String,newVol:Number)

Lorsque le volume du lecteur d’identifiant idRadio change, la méthode définie par flashvars.onVolumeChange est exécutée (si flashvars.onVolumeChange n’est pas défini, c’est la méthode onVolumeChange qui est exécutée)

- onPanChange(idRadio:String,newPan:Number)

Lorsque la balance du lecteur d’identifiant idRadio change, la méthode définie par flashvars.onPanChange est exécutée (si flashvars.onPanChange n’est pas défini, c’est la méthode onPanChange qui est exécutée)

- onStop(idRadio:String)

Lorsque le lecteur d’identifiant idRadio s’arrête, la méthode définie par flashvars.onStop est exécutée (si flashvars.onStop n’est pas défini, c’est la méthode onStop qui est exécutée)

- onPlay(idRadio:String)

Lorsque le lecteur d’identifiant idRadio commence la lecture, la méthode définie par flashvars.onPlay est exécutée (si flashvars.onPlay n’est pas défini, c’est la méthode onPlay qui est exécutée)

 

Note concernant la sécurité de Flash Player

Pour utiliser pleinement FreeRadio dans le "Sandbox Local" (protocole file :///) il faut paramétrer la sécurité de Flash Player.

Dans le cas d’une utilisation dans le sandbox local (protocole file :///) des restrictions sont appliquées concernant le chargement de fichier externes ou la communication entre l’objet flash et le navigateur pour des raisons de sécurité. En conséquence, le lecteur FreeRadio se lance, mais son fonctionnement est réduit.

Voir la documentation complète à propos de la sécurité sur le site Adobe.

Ci aprés deux solutions pour résoudre le problème.

- Solution numéro 1 : utiliser le Panneau des paramètres globaux de sécurité

Dans la combobox "Toujours faire confiance à ces fichiers et dossiers", choisir "ajouter".
Dans la boite de dialogue, qui apparait cliquer sur le bouton "Rechercher des fichiers", puis sélectionner en parcourant le disque dur local le fichier freeradio.swf (qui a le fonctionnement réduit).
Dans la page HTML ce dernier est maintenant ajouté à la liste des autorisations (pas de panique, l’autorisation n’est pas stockée sur le site adobe mais bien dans un fichier sur le disque local).

- Solution numéro 2 : utiliser le Répertoire Flash Player Trust utilisateur

Ouvrir le répertoire "Application Data\Macromedia\Flash Player\#Security\FlashPlayerTrust" de l’utilisateur courant (par exemple "C :\Documents and Settings\Administrator\Application Data\Macromedia\Flash Player\#Security\FlashPlayerTrust"). Ce répertoire est peut-être caché.
y ajouter un fichier d’autorisation de sécurité, par exemple de nom "MesAutorisations.cfg"
et dont le contenu est :
C :\Documents and Settings\Administrator\Desktop\freeradioTest

Nota : on accorde ainsi toutes les autorisations de sécurité aux fichiers swf contenus dans le dossier "C :\Documents and Settings\Administrator\Desktop\freeradioTest".

Formats

FreeRadio lit les flux radio de divers formats, cependant certains protocoles ne sont pas supportés :
  • mms
  • rtmp
  • wma
  • aac
Du moins, pour le moment.....

Documents joints

3 Messages de forum

  • Le lecteur FreeRadio 1.0 Le 26 novembre 2012 à 20:10 , par Azef

    Je suis très intéressé par le lecteur FreeRadio mais il manque une fonctionnalité javascript que je n’arrive pas à coder.
    L’objectif est de créer un lien qui charge une url puis qui la lit.

    Le principe :
    < a href="#" onclick="freeRadio.setRadioUrl(’Freeradio1’,’http://www.tv-radio.com/station/le_...’) ; freeRadio.play(’Freeradio1’) ;">Lire le Mouvp>

    L’Url de la radio est bien passée au lecteur mais la fonction play n’a aucun effet.
    Peux ton combiner ces deux fonctions ?
    Je vous remercie par avance de votre aide.

    Répondre à ce message

    • Le lecteur FreeRadio 1.0 Le 27 novembre 2012 à 14:29 , par Franck Ruzzin

      Bonjour Azef,

      Effectivement, durant le temps de la tentative de connexion à un flux radio, FreeRadio n’est plus à l’écoute des évènements extérieurs, comme par exemple l’instruction play.

      Ci-après un moyen pour contourner ce problème (on considère que l’on a inséré une radio d’id ’Freeradio1’) :

      Tout d’abord, le lien vers la radio

         <a href="javascript:setAndPlayRadio('Freeradio1','http://www.radiojunior.com/leson/realh.ram');"> radiojunior</a><br />

      ensuite, le code javascript à ajouter

         <script type="text/javascript">
             function setAndPlayRadio(playerId,radioURL)
             {
                 freeRadio.setRadioUrl(playerId,radioURL);
                 setTimeout(startPlayer,300,playerId,15);       
             }
                     
             function startPlayer(playerId,tryLeft)
             {
                 isPlaying=freeRadio.isPlaying(playerId);
                 if (freeRadio.isPlaying(playerId))
                 {
                     //alert("isPlaying. tryLeft : " + tryLeft);
                 }
                 else
                 {
                     if (tryLeft>0)
                     {
                         freeRadio.play(playerId);
                         setTimeout(startPlayer,300,playerId,tryLeft--);
                     }
                     else
                     {
                         alert('désolé, nb tentatives échouées pour ' + playerId);
                     }
                 }
             }
              </script>

      Ce que fait ce code :
      1) modifie l’URL du flux de la radio (setAndPlayRadio(playerId,radioURL))
      2) essaye à 15 reprise, avec un délai de 300 ms de démarrer la lecture du lecteur FreeRadio (startPlayer(playerId,tryLeft))

      Vous pouvez choisir de modifier le nombre de tentatives ou le délai entre 2 tentatives, simplement en modifiant l’appel à setTimeout dans le fonction setAndPlayRadio.

      Si la méthode ne donnait pas satisfaction, tenez moi informé. Une modification ds sources de FreeRadio est aussi envisageable.

      Cordialement.

      Franck

      Répondre à ce message

      • Le lecteur FreeRadio 1.0 Le 27 novembre 2012 à 19:47 , par Azef

        Bonjour,

        Merci de votre réponse rapide et de vos précisions. Je viens juste de tester la solution proposée et elle fonctionne très bien !
        J’apprécie surtout le nombre limité de reprise par la fonction setTimeout. Ceci évite les boucles infinies.
        Néanmoins ce sera un "plus" pour le lecteur si cette fonction serai intégrer de façon native.

        Merci à vous d’avoir proposé sur ce site un lecteur flash pilotable en javascript. Il y en a peu sur Internet.

        Cordialement,
        Azef

        Répondre à ce message

Répondre à cet article