Author Topic: WebRadio in a Block ! (Read 17788 times)

gijs · « **on:** September 01, 2006, 09:10:00 AM »

WebRadio version 0.4 - free to share!

I'm not very good in scripting, actually very poor. This is a blend of php and javascript and even a cookie. To all code-freaks: it's a mess, but I managed to get it working :-) Feel free to clean it up...

Features:
- offer streaming radio to your members
- station and volume are 'remembered' when browsing or switching channels
- no ugly windows mediaplayer :-)
- player status dynamically shown

Installation Instructions:

Just 3 steps!

Step 1) Choose Radio Stations
- find Interesting Radio Stations, for example here http://www.mikesradioworld.com/
- copy the links to the streaming-audio to WebRadio.htm (In the form. there are 5 of them in there already, you might want to replace them :-)
- add &station=RadioName right after the link-to-the-streaming-audio
(see the 5 examples already in WebRadio.htm, replace RadioName with the name of the station)

That was the hard part, now the easy bits

:

Step 2) Upload files
- create a folder called WebRadio in (the root) of your SMF folder
- upload WebRadio.htm + volup.jpg + voldown +jpg to that folder

Step 3) Create TinyPortal Block
- Add a left- or right PHP-Block (bar must be approx 230 pixels wide)
- Replace in the block-code.txt-file www.YOURSITE.com with your webaddress.
- Copy the content of block-code.txt in the block. (set also: Do not use title/frame)

That's all, enjoy :-)

RoarinRow · « **Reply #1 on:** September 01, 2006, 09:14:04 AM »

Very cool :up:

alan s · « **Reply #2 on:** September 01, 2006, 10:29:59 AM »

very nice !

Svaha · « **Reply #3 on:** September 03, 2006, 10:49:35 AM »

Cool :up: Dank je

Greenbug · « **Reply #4 on:** September 03, 2006, 04:13:55 PM »

This is pretty cool snippet, I have been tweaking with mine. I got some stations I want and it works great.

Is there anyway you can change the width for this? It doesnt seem to fit in a block that well.

I did not use the title/frame option but its still much bigger then the other ones.

Is there a way?

Thanks

Got it, autosize=true.

Svaha · « **Reply #5 on:** September 03, 2006, 05:21:21 PM »

Quote from: Greenbug on September 03, 2006, 04:13:55 PM

This is pretty cool snippet, I have been tweaking with mine. I got some stations I want and it works great.

Is there anyway you can change the width for this? It doesnt seem to fit in a block that well.

I did not use the title/frame option but its still much bigger then the other ones.

Is there a way?

Thanks

Got it, autosize=true.

Where did you put this : autosize=true?

Greenbug · « **Reply #6 on:** September 03, 2006, 08:23:02 PM »

I have actually change mine around quite a bit, I drop the picture and changed the background (my forum isnt even close to yellow) and I also put the radio buttons all to the left.

This is the block code

Code: [Select]

if (isset($_COOKIE["WebRadio"]))
echo '<iframe id="radio" src="http://www.YOURSITE.com/WebRadio/WebRadio.htm' .  $_COOKIE["WebRadio"] . '" width=165 height=200 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no FRAMEBORDER=0px><body style="border:none"></iframe>
<layer visibility=hide>
</layer>';
else
echo '<iframe id="radio" src="http://www.YOURSITE.com/WebRadio/WebRadio.htm" width=165 height=200 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no FRAMEBORDER=0px><body style="border:none"></iframe>
<layer visibility=hide>
</layer>';

The autosize=true is in the WebRadio.htm file

This is mine attached.

www.chicohotornot.com

I also like the fact that you can move around inside the forum and it picks right back where it was. very cool!

Update: The attached is error free.

Another thing that has made this very easy to edit is an open source free editor called TSWeditor - AWESOME!
http://tswebeditor.net.tc/

Svaha · « **Reply #7 on:** September 04, 2006, 01:33:08 AM »

Thanks for sharin'.
I stopped it because it generates a lot of warnings / errors, about 300 pages in 10 minutes, lol.
I see on your page that it generates errors too, because I have this warning triangle in my explorer window saying :"Page build with errors".

G6Cad · « **Reply #8 on:** September 04, 2006, 02:07:51 AM »

If you put this string in the top of the code, the errors will stop filling your error log.

Code: [Select]

global $scripturl;

Svaha · « **Reply #9 on:** September 04, 2006, 03:20:03 AM »

I'm sorry, most of the errors come from the calendar module I'm testing this also.
What remains is a script error.
I resized the webradio image to 155x140 pixels.
You can see it on one of my sites : http://www.badmuts.nu

This is the code I have in webradio.htm

Code: [Select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META http-equiv=Cache-Control content=no-cache>
<META http-equiv=Pragma content=no-cache>
<META http-equiv=Expires content=0>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>

<script type="text/javascript">
<!--

var qs = location.search.substring(1);
var nv = qs.split('&'); 
var url = new Object(); 
for(i = 0; i < nv.length; i++) { eq = nv[i].indexOf('='); 
url[nv[i].substring(0,eq).toLowerCase()] = unescape(nv[i].substring(eq + 1)); } 
q2 = url.q1;
station2 = url.station;

function createCookie(name,value,days) {
if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function querystring(name) {
// returns a named value from the querystring
var tmp = ( location.search.substring(1) );
var i   = tmp.toUpperCase().indexOf(name.toUpperCase()+"=");
   if ( i >= 0 ) {
      tmp = tmp.substring( name.length+i+1 );
      i = tmp.indexOf("&");
      return unescape( tmp = tmp.substring( 0, (i>=0) ? i : tmp.length ));
      }
return("");
}
function getLastVolume() {
// get the last used volume from url querystring
var lastVol = querystring("vol");
// if the volume exists, apply the volume to the player
if (lastVol!='') {
document.getElementById("MediaPlayer").settings.Volume = parseInt(lastVol);
}
}

function passVolume(what) {
// get the current volume
vol = document.getElementById("MediaPlayer").settings.Volume;
// add volume to the link
what.href += '?vol=' + vol;
}

function go(loc) {
//create cookie
vol = document.getElementById("MediaPlayer").settings.Volume;
adresje = '?q1=' + loc +'&vol=' + vol;
createCookie('WebRadio',adresje ,7);
var fileName =
location.pathname.substring(location.pathname.lastIndexOf('/')+1);
window.location.href = fileName + '?q1=' + loc + '&vol=' + vol;
}

function downVol(MediaPlayer) {
// get the current volume
MediaPlayer.settings.volume = MediaPlayer.settings.volume  -20
//create cookie
vol = document.getElementById("MediaPlayer").settings.Volume;
adresje = '?q1=' + q2 + '&station=' + station2 +'&vol=' + vol;
createCookie('WebRadio',adresje ,7);
}

function upVol(MediaPlayer) {
// get the current volume
MediaPlayer.settings.volume = MediaPlayer.settings.volume  +20
//create cookie
vol = document.getElementById("MediaPlayer").settings.Volume;
adresje = '?q1=' + q2 + '&station=' + station2 +'&vol=' + vol;
createCookie('WebRadio',adresje ,7);
}

//-->
</script>

<BODY bgColor=#FFFFCC leftMargin=0 topMargin=0 onload="getLastVolume()">
<SCRIPT LANGUAGE = "JScript" FOR = MediaPlayer EVENT = PlayStateChange(NewState)>

// Test for the current state.
// If playing, display the name of the current media.

switch (NewState){
case 1:
divState.innerHTML = "Playstate: Stopped";

// Toggle the button states.
btnPause.disabled = true;
btnPause.value = " Pause ";
btnStop.disabled = true;

break;

case 2:
divState.innerHTML = "Playstate: Paused";
break;

case 3:
divState.innerHTML = "Playstate: Playing";
divName.innerHTML = "Media name: " + Player.currentMedia.name;

// Toggle the button states.
btnPause.disabled = false;
btnStop.disabled = false;

break;

case 6:
divState.innerHTML = "Playstate: Buffering";
break;

case 7:
divState.innerHTML = "Playstate: Waiting";
break;

case 8:
divState.innerHTML = "Playstate: Media Ended";
break;

case 9:
divState.innerHTML = "Playstate: Transitioning";
break;

case 10:
divState.innerHTML = "Playstate: Ready";
break;

// Other cases go here.

default:
divState.innerHTML = "Playstate: Other";
}

</SCRIPT>
<table width="100%" border="0">
  <tr>
    <td>
      <div align="left"><img src="WebRadios.jpg" width="155" height="140" align="middle"></div>
    </td>
  </tr>
</table>
<SCRIPT LANGUAGE = "JScript" FOR = MediaPlayer EVENT = StatusChange()>

// Display status. This requires Windows Media Player 9 Series or later.
divState.innerHTML =  MediaPlayer.status;

</SCRIPT>
<SCRIPT>   
var qs = location.search.substring(1);
var nv = qs.split('&'); 
var url = new Object(); 
for(i = 0; i < nv.length; i++) { eq = nv[i].indexOf('='); 
url[nv[i].substring(0,eq).toLowerCase()] = unescape(nv[i].substring(eq + 1)); } 
station2 = url.station;
if (station2 === undefined) {document.writeln('<div align=center><font size=1 face=Verdana>choose your station:</font></div>')} 
else {document.writeln('<div align=center><font size=1 face=Verdana>Now playing: <b>' + station2 + '</b></font></div>')}
checkPlayState(false);
//set cookie for sure
adresje = '?' + qs;
createCookie('WebRadio',adresje ,7);
</script>
<div id="divState" align="center" style=font-family:verdana;font-size:9px;color:#555555;></div>

<form name="qform" onSubmit=" return ProcessForm();">

<div align="center"><input type="radio" name="q1" onClick="go('http://www.omroep.nl/radio1/live64.asx&station=Radio 1');"> 
<font size=1 face="Verdana">Radio 1</font>  

<input type="radio" name="q1" onClick="go('http://www.omroep.nl/radio2/live64.asx&station=Radio 2');">
<font size=1 face="Verdana">Radio 2</font><br>  
 
<input type="radio" name="q1" onClick="go('http://ms.stream.garnierprojects.com/radio538&station=Radio 538');">
<font size=1 face="Verdana">538</font>

<input type="radio" name="q1" onClick="go('http://ms.stream.garnierprojects.com/kinkfm&station=Kink fm');">
<font size=1 face="Verdana">Kink fm</font><br>

<input type="radio" name="q1" onClick="go('http://www.garnierstreamingmedia.com/asx/skyradio.asp&station=Sky Radio');">
<font size=1 face="Verdana">Sky Radio</font>  

<input type="radio" name="q1" onClick="go('');">
<font size=1 face="Verdana" color="red">off</font><br>
<br>
<img src="voldown.jpg" border="0" NAME="VolDown" VALUE="-vol" onmouseover='style.cursor="hand"' OnClick="downVol(MediaPlayer)">
<font size=1 face="Verdana"> volume </font><br>
<img src="volup.jpg" border="0" NAME="VolUp" VALUE="-vol" onmouseover='style.cursor="hand"' OnClick="upVol(MediaPlayer)">
</div>
</form>

<SCRIPT>   
var WMP7;var d=document;var z;var link;
if(1){ //parent.canDetectPlugins() || parent.detectWindowsMedia()){
try {
if ((navigator.appName != "Netscape")) WMP7=new ActiveXObject('WMPlayer.OCX');
else if(window.GeckoActiveXObject) WMP7=1;
}
catch(e){WMP7=0;}

var qs = location.search.substring(1);
var nv = qs.split('&'); 
var url = new Object(); 
for(i = 0; i < nv.length; i++) { eq = nv[i].indexOf('='); 
url[nv[i].substring(0,eq).toLowerCase()] = unescape(nv[i].substring(eq + 1)); } 
if (vol='undefined') {vol = url.vol} else {vol=50}
link=url.q1;
z=parent.zender;
if(WMP7){
d.writeln('<OBJECT ID="MediaPlayer" width=155 height=64 classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" ');
d.writeln('standby="" type="application/x-oleobject">');
d.writeln('<PARAM NAME="URL" VALUE="'+link+'"><param name="volume" value="'+vol+'"><PARAM NAME="InvokeURLs" VALUE="false">');
d.writeln('<PARAM NAME="TransparentAtStart" Value="true"><PARAM NAME="AutoStart" Value="true"><PARAM NAME="AnimationatStart" Value="false"><PARAM NAME="ShowControls" Value="0"><PARAM NAME="autoSize" Value="false"><PARAM NAME="displaySize" Value="0">');
d.writeln('<PARAM name="uiMode" value="invisible">');
d.writeln('<EMBED type="application/x-mplayer2" ');
d.writeln('SRC="'+link+'" name="MediaPlayer" width="155" height="64" ShowStatusbar="0" AutoStart="1" InvokeURLs="0">');
d.writeln('</EMBED></OBJECT>');
}
else{
d.write('<OBJECT ID="MediaPlayer" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" ');
d.write('standby="" TYPE="application/x-oleobject" width="155" height="64">');
d.write('<PARAM NAME="FileName" VALUE="'+link+'"><param name="volume" value="'+vol+'"><PARAM NAME="InvokeURLs" VALUE="false">');
d.writeln('<PARAM NAME="TransparentAtStart" Value="true"><PARAM NAME="AutoStart" Value="true"><PARAM NAME="AnimationatStart" Value="false"><PARAM NAME="ShowControls" Value="0"><PARAM NAME="autoSize" Value="false"><PARAM NAME="displaySize" Value="0">');
d.write('<PARAM NAME="ShowStatusBar" VALUE="false">');
d.write('<EMBED type="application/x-mplayer2" ');
d.write('src="'+link+'" Name="MediaPlayer" ShowStatusBar="1" width="155" height="64" AutoStart="1" InvokeURLs="0">');
d.write('</EMBED></OBJECT>');
}
}
else d.writeln('<font style="color:red;font-size:12pt;">U heeft geen MediaPlayer plugin!</font><a style="text-decoration:none;" href="http://www.op.tv/video_players.htm" target="_parent"><font style="color:green;font-size:12pt;"> Installeren?</font></a>');
</SCRIPT>
<script> 
var stateg=document.getElementById("MediaPlayer");
//alert(stateg.PlayState);
</script>


</BODY></HTML>

And this is the block code :

Code: [Select]

global $scripturl;

if (isset($_COOKIE["WebRadio"]))
echo '<iframe id="radio" src="http://www.alohaspirit-nl.nl02.members.pcextreme.nl/badmuts/WebRadio/WebRadio.htm' .  $_COOKIE["WebRadio"] . '" width=162 height=320 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no FRAMEBORDER=0px><body style="border:none"></iframe>
<layer visibility=hide>
</layer>';
else
echo '<iframe id="radio" src="http://www.alohaspirit-nl.nl02.members.pcextreme.nl/badmuts/WebRadio/WebRadio.htm" width=162 height=320 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no FRAMEBORDER=0px><body style="border:none"></iframe>
<layer visibility=hide>
</layer>';

Prolly it's something with the dimensions that I got wrong.

Recent

User

Stats

Members

Stats

Users Online

Author Topic: WebRadio in a Block ! (Read 17788 times)

gijs

WebRadio in a Block !

RoarinRow

Re: Block code: WebRadio

alan s

Re: Block code: WebRadio

Svaha

Re: WebRadio in a Block !

Greenbug

Re: WebRadio in a Block !

Svaha

Re: WebRadio in a Block !

Greenbug

Re: WebRadio in a Block !

Svaha

Re: WebRadio in a Block !

G6Cad

Re: WebRadio in a Block !

Svaha

Re: WebRadio in a Block !