Radio player paramétrable

Contenu du snippet

A la suite du code trouvé sur ce post http://www.javascriptfr.com/code.aspx?ID=23476, j'ai décidé de plancher et d'ajouter quelques fonctionnalités en plus : images en fond de lecteur, texte défilant et un peu de design en plus! et aussi le fait qu'il puisse s'ouvrir dans une fenêtre pop up.

En demo sur http://travelindia.free.fr/mp3/radio.php

Source / Exemple :


Un fichier radio.htm
<head>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function OpenPopUp(MyFile,MyWindow,MyWidth,MyHeight)
//MyFile :   nom du fichier contenant le code HTML du pop-up 
//MyWindow :   nom de la fenêtre (ne pas mettre d'espace) 
//MyWidth :   entier indiquant la largeur de la fenêtre en pixels 
//MyHeight :   entier indiquant la hauteur de la fenêtre en pixels 

{    
var ns4 = (document.layers)? true:false;    //NS 4 
var ie4 = (document.all)? true:false;   //IE 4 
var dom = (document.getElementById)? true:false;   //DOM 
var xMax, yMax, xOffset, yOffset;;    

    if (ie4 || dom)
        {
        xMax = screen.width;
        yMax = screen.height;
        }
    else if (ns4)
        {
        xMax = window.outerWidth;
        yMax = window.outerHeight;
        }
    else
        {
        xMax = 800;
        yMax = 600;
        }
    xOffset = (xMax - MyWidth)/2;
    yOffset = (yMax - MyHeight)/2;
    window.open(MyFile,MyWindow,'width='+MyWidth
+',height='+MyHeight
+',screenX='+xOffset
+',screenY='+yOffset
+',top='+yOffset
+',left='+xOffset
+',scrollbars=yes,resizable=yes');
    }
//-->
</SCRIPT>

</head>
<body>
<INPUT TYPE="BUTTON" VALUE="radios" onClick="OpenPopUp('radios.htm','radios',500,300)">
</body>

et un autre radios.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Travelindia.fr présente sa sélection de radios</title>

<style type="text/css">
<!--
.Style1 {color: #FFFFFF;
font-weight: bold;

}
.Style2 {
	color: #000000;
	font-weight: bold;
	}

-->
</style>
</head>

<body bgcolor="#000000">
<!????????????????????????????????????????????????????????????????????????????????>
<table width="400" height="250">
  <tr><td width="300" height="250" align="center" valign="middle" bgcolor="#F141A6">

	 
	 
  	<img src="images/votreimage.gif" width="200" height="179"><br> //ici vous mettez votre image pour le fond du lecteur
	
	<marquee behavior="scroll" direction="left" height="20" width="200" align="middle" scrolldelay="1" scrollamount="2" OnMouseOver="this.stop()" OnMouseOut="this.start()" name="marquee1" id="marquee1" style="margin-left:9px">
	<span class="Style1">On vous présente notre sélection de radios...Pour les écouter, il vous suffit de cliquer sur le nom de la radio. </span>
	</marquee>
<br />

	<object name="ObjSonWav" id="ObjSonWav" height="25" width="300" classid = "CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase = "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Travelindia.fr vous présente sa sélection de radios..." type="application/x-oleobject">
				<embed width="0" height="0" hidden="TRUE" autostart="FALSE" loop="TRUE" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/download/default.asp" id="lecteur"></embed>
	</object></td>
	
	<td width="100" height="250" align="center" valign="middle"> 
	      
  
    <select name=radio
		size=15 
        onchange="ObjSonWav.FileName=this.options(this.selectedIndex).value;" style=" background-color:#33CC66" class="Style2" />   //ici parmaétrage de la couleur du bg du fond de la liste des radios
      <option value="http://www.radiohumsafar.com/humsafar.asx"/>
       Humsafar
      <option value="http://www.makeni.net/akash/akash.asx"/>Akash radio UK
      <option value="http://www.apnaradio.com/live/media64/ApnaRadio.asx"/>Apna radio
      <option value="http://www.humfm.com/humfm.asx"/>Hum FM live
              
      <option value="http://cache.yacast.fr/V4/europe1/europe1.asx"/> Europe 1
      <option value="http://www.radioteentaal.com/masala128.wax"/> Radio Teental
                  
                  
                  
</select></td></tr></table>

</body>
</html>

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.