How to create a pop-up player for shoutcast and icecast
In this article I will show you how to create a Pop-up window for your Shoutcast or Icecast player.
But ¿What is a Pop-up Window?
A Pop-up window is a web browser window that is smaller than standard windows and without some of the standard features such as tool bars or status bars. The Pop-up window will pop out of the page automatically or manually. The best option is to set it manually, ¿why? Well most of the browsers today come with a Pop-up blocker enabled by default. A few years ago the Pop-up Windows were very popular but people abused them making the user experience a bad one when these annoying Pop-up windows started popping up all the time.
You are probably asking, ¿Why do i need a Pop-up Player? The short answer is to give a better listening experience to your listener while they see all the pages on your website.
Usually a lot of people embed a player to their website’s Home page or in the case of wordpress to the sidebar. The problem with this practice is when the visitors of your website want to see your site and listen the music or audio you are streaming at the same time. Every time the visitor change to another page the streaming audio will cut out. Then the audio will start again when the listener lands on the next page. Unless you have your player set to auto playing, the listener will have to click the play button again and again.
That is why a Pop-up player is a good practice. The pop-up window will stay open playing the streaming audio without any interruption no matter how many times the visitor changes from one page to another on your site. Also another great advantage is if the visitor leaves your page the Pop-up player will stay open so he can surf online and still can listen your audio streaming.
Steps to create a Pop-up Window Player:
1- Copy this script code before the </head> tag in your website code. This script will do the Pop-up trick.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=300,height=150,left = 650,top = 375');");
}
// End -->
</script>
2- Copy either of these 2 codes in any place you want the Pop-up Window Player option to appear on your website.
My suggestion is, place the code under your home page player as an option to your visitors.
The first option is a button and the second option is a link.
<form>
<input type=button value="Popup Player" onClick="javascript:popUp('popup-player.html')">
</form>
<A HREF="javascript:popUp('popup-player.html')">Popup Player</A>
3- Create a new page with the name popup-player.html and copy the below code into and save it. If you don’t have a HTML Editor just copy the code to Windows Notepad or any other text editor save it and then change the extension of the file to .html. Then upload the page to your website root. This code is using a Windows Media Player code if you want to use another player replace the code between:
<!– Player Code Begin –> <!– Player Code Ends –>
For other player codes please see our articles:
- Simple Flash Player For Shoutcast And Icecast
- Shoutcast and Icecast Flash Player Over 25 Skins
- Embedding Windows Media Player For Shoutcast And Icecast
- Acc Plus Shoutcast Embedding Windows Media Player
- Flash Player Minicaster
- Custom Shoutcast Flash Radio Player
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Popup Window</title>
</head>
<body topmargin="15" alink="#e8e8e8" bgcolor="#000000" link="#e8e8e8" vlink="#e8e8e8"><div style="text-align: center; line-height: 20px; color: #e8e8e8; text-decoration: none; letter-spacing: 0px; font-weight: bold; font-size: 10px; font-family: verdana;">PopUp Player</div><div style="text-align: center;">
<!-- Player Code Begin -->
<OBJECT ID="MediaPlayer" WIDTH="240" HEIGHT="80" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="http://ipaddress:port">
<PARAM name="autostart" VALUE="true">
<PARAM name="ShowControls" VALUE="true">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<EMBED TYPE="application/x-mplayer2" SRC="http://ipaddress:port" NAME="MediaPlayer"
WIDTH="240" HEIGHT="80" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="1"> </EMBED>
</OBJECT>
<!-- Player Code Ends -->
</div>
<div style="text-align: center; line-height: 20px; color: #e8e8e8; text-decoration: none; letter-spacing: 0px; font-weight: bold; font-size: 10px; font-family: verdana;"><a href="javascript:self.close()">Close Popu</a></div>
</body>
</html>
Join now and be heard.