Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome, Guest. Please login or register.
Did you miss your activation email?

August 19, 2022, 04:58:31 AM

Login with username, password and session length
Members
  • Total Members: 3843
  • Latest: Tricky
Stats
  • Total Posts: 193479
  • Total Topics: 21088
  • Online today: 51
  • Online ever: 1035
  • (November 26, 2020, 04:45:12 AM)
Users Online
Users: 1
Guests: 35
Total: 36

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

0 Members and 1 Guest are viewing this topic.

gijs

  • Guest
WebRadio in a Block !
« on: September 01, 2006, 09:10:00 AM »
WebRadio version 0.4 - free to share!  8)

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

« Last Edit: September 02, 2006, 01:31:29 AM by gijs »

Offline RoarinRow

  • Hero Member
  • *****
  • Posts: 1034
  • Ride my AV!
    • Avalanche Style
Re: Block code: WebRadio
« Reply #1 on: September 01, 2006, 09:14:04 AM »
Very cool  :up:

SMF 2.0 RC3
TP 1.0 beta 5-1
Wordpress 3.0

alan s

  • Guest
Re: Block code: WebRadio
« Reply #2 on: September 01, 2006, 10:29:59 AM »
very nice !

Svaha

  • Guest
Re: WebRadio in a Block !
« Reply #3 on: September 03, 2006, 10:49:35 AM »
Cool  :up: Dank je

Greenbug

  • Guest
Re: WebRadio in a Block !
« 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.

:)

« Last Edit: September 03, 2006, 04:48:29 PM by Greenbug »

Svaha

  • Guest
Re: WebRadio in a Block !
« Reply #5 on: September 03, 2006, 05:21:21 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

  • Guest
Re: WebRadio in a Block !
« 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/
« Last Edit: September 04, 2006, 12:55:56 PM by Greenbug »

Svaha

  • Guest
Re: WebRadio in a Block !
« 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".

Offline G6Cad

  • Friends
  • *
  • Posts: 12643
    • FamiljeGodis
Re: WebRadio in a Block !
« 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

  • Guest
Re: WebRadio in a Block !
« 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.