How to add a Pop-out music player

1. Playlist.com

• Go to playlist.com, sign up for a new account or sign in.
• Start searching for the music you want to add ( use the search beta, it's much easier to use, but I've had it mess up on me too )
• Create and add music to your playlist
• When you are done making the list, click on "post my playlist" at the very top of the screen
• Where do you want to put your playlist? Pick A
• Choose your playlist
• Pick what you want from the pull down boxes:
• Autostart
• Random/Shuffle
• Custom skin? -> lets you add a background image for the player

• Click "get code!"
• Click inside the box, select all text (CRTL-A) then copy it (CTRL-C), you should see something list this when you paste it:

<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"><embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.myplaylist.org/mc/mp3player.swf?tomy= http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270 &file=http://www.myplaylist.org/loadplaylist.php?playlist=36801507" menu="false" quality="high" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/><BR><a href=http://www.myplaylist.org><img src=http://www.myplaylist.org/mc/images/create_black.jpg border=0></a><a href=http://www.myplaylist.org/standalone/36801507 target=_blank><img src=http://www.myplaylist.org/mc/images/launch_black.jpg border=0></a><a href=http://www.myplaylist.org/download/36801507><img src=http://www.myplaylist.org/mc/images/get_black.jpg border=0></a> </div>

• Now you're ready to post it to GuildPortal!
• Go to Control panel > Pages & Content (Widget) > (pick a page to put it & click) > Add Widget tab > Add a title, Choose "Free Form Text/HTML" for Type of Widget, pick a location and click [ Add this Widget ].
• Now you should be in the Widget/Content tab, find the widget you just added and click the "Edit" link inside. Once the editor opens, make sure you press the "<> HTML" button then paste in the code.
• Now if you are posting the player into a center pane or a very wide side pane, you're done. But if you want to post it into a narrow side pane, you'll need to adjust all the "width" listings in the code to around 200 pixels to make it fit in the side pane better. I've highlighted the places you need to edit in red in the code above.
• If you want to customize it a little more, you can make your own button images for the three buttons across the bottom like I did on my media page.
• Save it and you're done!

2. Pop-out music player

• Go to flashwidgetz.com and register or sign in.
• Click on "Widgets" at the top.
• Pick a widget, and click the create widget button (there is also a Sudoku widget you can add to your site LOL)
• Customize it however you want
• Add a playlist, add the music or video you desire - you'll need to know the URL of the songs you want to add
• When done, click "Create My Widget"
• Continue to Home Page
• Click on "My Widgets" in the same area as "My Page"
• Click on "Share" in the widget box
• Click the "Copy" button to copy the code to your clipboard, you should see something like the code below when you paste it. Leave this window open for now, you'll see why in a minute.

<center><embed src="http://www.flashwidgetz.com/storage/flash/jw1-flashplayer.swf?id=FIQA5MG839EMEANV8U" quality="high" bgcolor="#FFFFFF" wmode="transparent" width="300" height="320" name="jw1-flashplayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></center><br><center><span style="font-size:8pt">This <a href="http://www.flashwidgetz.com/?referralowner=W6XG6QB2CI1WMMVH" target="_blank" alt="myspace music flash player playlist friendster piczo">MySpace Flash Player</a> was created @ <a href="http://www.flashwidgetz.com/?referralowner=W6XG6QB2CI1WMMVH" target="_blank">FlashWidgetz</a>.com.</span></center><br><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/CIMP/bT*xJmx*PTEyMTMyNDc5Njg 3OTYmcHQ9MTIxMzI*Nzk3MTIxOCZwPTEzNDIyMSZkPSZuPSZnPTE=.jpg" />

• Now this music player doesn't come with a pop out button, but we can fix that*
  (well if you have a place to save an HTML file - not a problem for people with a paid account)
• Open up a text editor like Notepad
• Paste the code into a new document, then add the HTML that I have below before the Widget code:

<title>My Guild's Music Player</title>
<style type="text/css">
body {
 background: #000000 url();
 color: #ffffff;
}
a:link, a:visited { color: #FFCC00; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
a:active { color: #CCCC00; text-decoration: none; }
</style>

• Change the text between the title label to customize it for your guild!
• Change the colors in the CSS above to match your site.
• Save the file as "musicplayer.htm", and remember where you saved it.
• Now you need to upload this file to the web, go to Control Panel > File Manager > Upload File(s) > Browse, find then [ Upload ] File
• Copy the URL of the file - right click and copy link location.

• Now go to Control Panel > Pages & Content (Widgets) > (pick a tab to put your music player in & click) > Add Widget tab > Add a title, Choose "Free Form Text/HTML" for Widget Type, pick a location then click [ Add this Widget ].
• You should now be in the Widgets/Content tab. Find the widget you just added then click the "Edit" link inside. In the editor window that opens, click "<> HTML".
• Paste the URL of the file you just uploaded.
• Now go back and get the code again from the window I told you to leave open
• Paste this below the URL you pasted in there before.
• Copy the HTML below and paste it above the Widget code.

<center><input type=button name="player" value="Pop-out Music Player" onclick="javascript:window.open( 'http://www.axiomfiles.com/Files/243007/musicplayer.htm', 'myMusic', 'toolbar=0, status=0, width=325, height=350' );"></center><br>

• Cut (CTRL-X) the URL of your uploaded file from the top (so it's no longer there!) and paste it into the "input" tag. I highlighted where to paste (CTRL-V) it in blue.
• You may have to adjust the width and height of this popup window to better fit your widget (highlighted in red).
• So you should end up with something similar to this:

<center><input type=button name="player" value="Popout Music Player" onclick="javascript:window.open( 'http://www.axiomfiles.com/Files/243007/musicplayer.htm', 'myMusic', 'toolbar=0, status=0, width=325, height=350' );"></center><br>

<center><embed src="http://www.flashwidgetz.com/storage/flash/jw1-flashplayer.swf?id=FIQA5MG839EMEANV8U" quality="high" bgcolor="#FFFFFF" wmode="transparent" width="300" height="320" name="jw1-flashplayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></center><br><center><span style="font-size:8pt">This <a href="http://www.flashwidgetz.com/?referralowner=W6XG6QB2CI1WMMVH" target="_blank" alt="myspace music flash player playlist friendster piczo">MySpace Flash Player</a> was created @ <a href="http://www.flashwidgetz.com/?referralowner=W6XG6QB2CI1WMMVH" target="_blank">FlashWidgetz</a>.com.</span></center><br><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/CIMP/bT*xJmx*PTEyMTMyNDc5Njg 3OTYmcHQ9MTIxMzI*Nzk3MTIxOCZwPTEzNDIyMSZkPSZuPSZnPTE=.jpg" />

• Save it and you're done!
• Try it out:

Ultra Slim Music Player

Player Setup

• Update: This player is now hosted in my GuildPortal files, so there is no need to have an additional copy of it unless you want one.
• This music player is open source (free) and can be found here: http://musicplayer.sourceforge.net/. Go there for more detailed information.
• To download this player directly, right click on the link below and choose "Save As".
  http://musicplayer.sourceforge.net/xspf_player.swf

Music Setup

Playlist Setup ("myplaylist.xspf")

1. Go to this website: http://emff.sourceforge.net/playlistgenerator/
   
   
   
   1. You must enter the Location (URL) for the file you are adding, everything else is optional.
   2. Click the + on the far right to add another track to the playlist
   3. When done, copy (Ctrl-C) the generated XML and paste it (Ctrl-V) into a text editor
   4. Save the file as "myplaylist.xml" or whatever you want.
   
   
2. Open up a text editor like Notepad, copy the XML below and add the song url (in orange) to add your music tracks. Everything that is purple is optional - you can completely leave those XML tags out if you want. To add more tracks, copy everything between "<track>" and "</track>" and paste it above the "</trackList>" tag.
   
   <?xml version="1.0" encoding="UTF-8" ?>
   <playlist version="1" xmlns="http://xspf.org/ns/0/">
   
   <!-- This is optional -->
   <title>PLAYLIST TITLE</title>
   <annotation>NOTES</annotation>
   <creator>YOUR NAME</creator>
   <info>YOUR SITE</info>
   <!-- the above is optional -->
   <trackList>
   
   <track>
   <location>URL TO MP3</location>
   <title>SONG TITLE</title>
   <image>URL TO ALBUM ART</image>
   <annotation>ARTIST - NAME OF SONG</annotation>
   <info>LINK TO LYRICS OR BAND WEBSITE</info>
   </track>
   
   </trackList>
   </playlist>
   
   
3. Once you are done adding your music tracks, save the file with a ".xml" or ".xspf" ending. 
4. Upload this file to your file area (* see the instructions at the bottom on how to do this).

Player Frame ("playerframe.htm")

• This HTML page actually contains your music player.
• Copy the HTML below and paste it into your text editor.
• Edit the CSS in blue to match your site.
• Edit the URLs in orange to match your site, your music player and your playlist you just uploaded above.
• Edit the parameters in red to make the player autoplay or repeat. More parameters can be found at the main site here.
• CODE:
  
  <html>
  <body>
  <style type="text/css">
  body { background: #000000; color: #ffffff; }
  .exit a { font-size: 12px; background: #cccccc; color: #555555; text-decoration: none; vertical-align:top; }
  </style>
  <span style="float:right;" class="exit"><a target="_parent" href="URL TO YOUR GUILDPORTAL HOME PAGE"> EXIT </a></span>
  
  <object type="application/x-shockwave-flash" width="400" height="170"
  data="http://www.axiomfiles.com/Files/262592/xspf_player_slim.swf?playlist_url=http://www.axiomfiles.com/Files/######/YOURPLAYLISTLIST.xml&autoplay=true&repeat_playlist=true">
  <param name="movie"
  value="http://www.axiomfiles.com/Files/262592/xspf_player_slim.swf?playlist_url=http://www.axiomfiles.com/Files/######/YOURPLAYLISTLIST.xml&autoplay=true&repeat_playlist=true" />
  </object>
  
  </body>
  </html>
  
  
• Once your done editing the code, save the file and name it "playerframe.htm"
• Upload this file to your file area (* see the instructions at the bottom on how to do this).

Main Frame ("guildname.htm")

• This is the HTML required to define the frames required to add the player above your website page.
• Make a new file in your text editor, then copy the HTML below and paste it into the editor.
  
  <html>
  <head>
  <title>YOUR GUILD NAME</title>
  </head>
  
  <frameset rows="25,*" scrolling=no framespacing=no frameborder=0 noresize>
  <frame src="URL TO PLAYERFRAME.HTM">
  <frame src="URL TO YOUR GUILDPORTAL HOME PAGE">
  
  <noframes>
  Your browser does not support frames. Go to <a href="URL TO YOUR GUILDPORTAL HOME PAGE">
  YOUR GUILD NAME</a>
  </noframes>
  </frameset>
  </html>
  
  
• Once your done editing the code, save the file and name it with a ".htm" ending.
• Upload this file to your file area (* see the instructions at the bottom on how to do this).

Player Button

• Just like the previous post about making a frame player, you can add a button or text to your home page to activate this frame music player.
• Change the URL in orange to link to the main frame you just uploaded above. And name the player button in green to whatever you desire.
  
  Button
  <center><input type="button" onclick="top.window.location='URL TO YOUR MAIN FRAME';" value="Open music Player"></center>
  
  Link
  <center><a href="URL TO YOUR MAIN FRAME" target="_self">Open music player</a></center>
• If you want to see it in action,

• Go to Control Panel > General Settings & Tools > File Manager
• Click the [ Browse... ] button and find the file you just made (it is best to just work with all your files in the same directory, like say the desktop )
• Once you find the file, click [ Open ] (this may be different on a Mac)
• Uncheck the "Optimize images for faster..."
• Click [ Upload ]
• You'll know the upload is done when the Upload box next to the [ Browse... ] button clears and the check mark to "Optimize" returns.
• To get the URL of the file you just uploaded, find the file in the "Current File" list. Right click and choose Copy link location/address. or whatever your particular browser says to copy links. This is the URL (link) you will use in the instructions above that ask for "URL TO..."