Technology Networking & Internet

How to Build a Web Player for Your SHOUTcast Radio

    Building an Embed of Windows Media Player

    • 1). Open a program that can create and edit HTML documents. On a Windows PC, Microsoft Notepad is a good choice. It can be found by clicking the "Start" button in the lower left hand corner of the screen and navigating to "All Programs," "Accessories" and then "Notepad." On an Apple Mac, Text Editor will work; open this program from the Dock or the applications folder.

    • 2). Type the following code in the program: <OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
      STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
      This is the piece of code that tells the computer to display Windows Media Player on the web page. The code should be left untouched, except for the "height" and "width" values, which determine the size of the player in pixels. Change these values or leave them as the default.

    • 3). Type this code below the previous one: <PARAM NAME="FileName" VALUE="videofilename.wmv">
      This is the source of the file or stream that will be played in Windows Media Player. Erase the portion of the code that says "videofilename.wmv" but leave the quotation marks in. Enter the URL of the online radio station instead. This is usually an IP address followed by a port number (1.2.3.4:80). If you are the broadcaster of the online radio station, this number should be known since it is required to stream the station on SHOUTcast. If it is for a station other than your own, contact the station's webmaster to request the IP URL.

    • 4). Enter the following code below the previous one: <PARAM name="autostart" VALUE="false">
      <PARAM name="ShowControls" VALUE="true">
      <param name="ShowStatusBar" value="false">
      <PARAM name="ShowDisplay" VALUE="false">
      These are parameters that determine the look and operation of the player. All are changeable, and additional parameters can be added. "Show Controls" displays the start, stop and basic player buttons. It is set to "true" by default and should stay that way. Try adding additional parameters and changing their true/false settings to further customize the player.

    • 5). Type the following code below the previous one: <EMBED TYPE="application/x-mplayer2" SRC="videofilename.wmv" NAME="MediaPlayer"
      WIDTH="192" HEIGHT="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </EMBED>
      </OBJECT>.
      This is the embed code that builds the Media Player. Unfortunately, previous settings entered in the parameters have to be re-entered again here. Replace "videofilename.wmv" with the station's URL, adjust the height/width and set the true and false values of the parameters, using "0" for true and "1" for false. Additional parameters entered in the previous step will need to be added here.

    • 6). Save the HTML document. In Microsoft Notepad, go to "File" and click on "Save As." Enter a file name for the document and end it with “.html” before clicking "Save." On a Mac computer, click on "File" at the top of the page and then "Save As." Enter a file name for the document and change the format from Rich Text to HTML webpage using the drop-down menu below.

    • 7). Double click on the document to have it open in a default browser. Test the player by pushing the "Play" and "Stop" buttons to see if the stream connects. To embed the player into a web page, copy and paste the whole code from the previous three steps into a web editor where HTML is allowed.

    Using Default SHOUTcast Player

    • 1). Visit www.shoutcast.com. Find the station that the web player will be created for using the "Station" search box at the top of the page.

    • 2). Click on the station name. A pop up web player should launch, allowing the station to be heard. Click the "Copy Embed Code" button. Highlight and copy the URL.

    • 3). Paste the embed code into a web editor or other place that accepts HTML coding. The player should appear on the page once the editable version is saved.

Leave a reply