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

Le widget FreeRadio 1.0

lundi 16 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.

I) Implantation du widget

1) Si l’insertion de code javascript est interdite :

A l’endroit où l’on souhaite insérer un lecteur FreeRadio, saisir le code suivant :
<div style="height: 70px; width: 118px;">
<object type="application/x-shockwave-flash" data="http://widget.lededansdubocal.net/freeradio/freeradio.1.0.swf" height="70" width="118">
        <param name="movie" value="http://widget.lededansdubocal.net/freeradio/freeradio.1.0.swf">
        <param name="wmode" value="transparent">
         <!--début de l'alternative-->  
     <p>Alternative de l'animation</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>
     <!-- fin de l'alternative-->  
</object>
</div>

Insère un lecteur FreeRadio avec les valeurs pas défaut, à savoir :

- url de radio= http://tai-02.egihosting.com/bombayb-256k-mp3.pls,
- démarrage automatique,
- volume=0.7,
- balance=0


Il est possible de préciser des valeurs différentes des valeurs par défaut en ajoutant un paramètre flashvars comme suit :

<div style="height: 70px; width: 118px;">
<object type="application/x-shockwave-flash" data="http://widget.lededansdubocal.net/freeradio/freeradio.1.0.swf" height="70" width="118">
        <param name="movie" value="http://widget.lededansdubocal.net/freeradio/freeradio.1.0.swf">
        <param name="wmode" value="transparent">
        <param name="flashvars" value="radioURL=http://www.sky.fm/mp3/salsa.pls&autoStart=false&volume=0.3&pan=-0.5">
         <!--début de l'alternative-->  
     <p>Alternative de l'animation</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>
     <!-- fin de l'alternative-->  
</object>
</div>


Alternative de l’animation

Get Adobe Flash player

Insère un lecteur FreeRadio avec les valeurs suivantes :

- url de radio= http://www.sky.fm/mp3/salsa.pls (Sfy FM Salsa),
- démarrage manuel,
- volume=0.3,
- balance=-0.5


Les 4 variables de flashvars sont facultatives. Deux variables doivent être séparées par le caractère "&".

 

2) Si l’insertion de code javascript est autorisée :


- Importer dans la partie <head> de la page (si possible) les fichiers javascript swfobject-2.2.js et freeradio.1.0-min.js
        <script language="javaScript" src="http://widget.lededansdubocal.net/swfobject/swfobject.2.2.js" type="text/JavaScript"></script>
        <script language="javaScript" src="http://widget.lededansdubocal.net/freeradio/freeradio.1.0-min.js" type="text/JavaScript"></script>

- Ajouter le code indiquant le point d’insertion du lecteur FreeRadio dans la page

<div style="height: 70px; width: 118px;">
        <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>
</div>



- 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 !

 

- 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

 

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

 

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

 

Répondre à cet article