Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Adding a pop-out music player
Mottie (MVP) 7/23/2008 7:00 PM EST : RE: Adding a pop-out music player
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Laughing Wolf,

Well the top frame scrolls because the flash player is actually a lot bigger than the frame. That's why it didn't look like the frame options were working. Also the flash player was positioned with those 20-30 pixels above it - I had no control over that spacing.

One problem that I've found so far is when the framed music player is enabled, it tends to break some of the javascript I've written before: Custom tab bars and the detailed progression boxes... I'll try to fix these problems when I get a chance.

I searched for a really thin music player and it came down to two options.
  1. Use a "slim" music player that has an easy interface to add music online, or
  2. Use a slim music player, but requires a manually edited XML playlist.
I went with option 1 before, but if you want to try option 2, read on...

Ultra Slim Music Player

Player Setup

Music Setup

I've tried to upload music to my guild files, but the files seem to be truncated (cut short), so I you have two options:
  • Link to music already hosted on the web somewhere - this might irritate some web masters as this is called "stealing bandwidth". It's not really a big deal if you link to a 30 second preview on Amazon. But people who have to pay for bandwidth each month may block you if you do this.
  • Upload your music to your own file host... I've started using myotherdrive.com to host my non-GuildPortal files as they claim to have unlimited bandwidth and 2Gb of free storage. Once you have saved your music there, make sure you set the folder you want to use to "public" access.

Playlist Setup ("myplaylist.xspf")


The playlist for this music player is XML based. XML looks very similar to HTML, but the tags are more specialized.

You have two ways to make this XML file:
  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>
    <body>

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

    </body>
    </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,
That should be it.

* How to Upload Files *
  • 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..."
Edit (6/5/2010): Fixed a couple of mistakes: <trackList> is required in the XML and set background color to #000000 in the player frame. And added two new sections on how to setup your music source and how to upload files.
TopBottom

Laughing Wolf (Guild Admin) 7/25/2008 2:54 PM EST : RE: Adding a pop-out music player
Laughing Wolf
Posts: 3474
Zomgawsh Poster

Might I say again that you rock and I thank you for all the research you put into this.

For some reason, I can't code the playlist correctly.  At least I think that's where my error is.

I am using these files for repeated testing:
http://www.sinenterprises.com/playerframe.htm
http://www.sinenterprises.com/playlist.xpsf

TopBottom

Everdark (MVP) 7/25/2008 3:01 PM EST : RE: Adding a pop-out music player
GuildPortal MVP
Everdark
Posts: 3949
Zomgawsh Poster

Just from a cursory glance, shouldn't that extension be xspf?

"The person who says it cannot be done should not interrupt the person doing it." 

 
Everdark (T), Evadarr, Nevinn (AC), Soninn, Croninn, Zakarr, Avirded (SC)
TopBottom

Ciannon (Guild Admin) 7/25/2008 6:32 PM EST : RE: Adding a pop-out music player
Ciannon
Posts: 2000
Zomgawsh Poster

D'oh! So what actually gets added to the guildportal site?


Epic quotes from Coils:

"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008


TopBottom

Mottie (MVP) 7/25/2008 7:12 PM EST : RE: Adding a pop-out music player
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Yeah Everdark found your problem.

You can actually name the playlist to just about anything you want. The player was designed to use ".XSPF", but it worked just fine when I changed the playlist extension to ".XML"

My player frame: http://www.axiomfiles.com/Files/262592/slimplayerframe.htm
My playlist: http://www.axiomfiles.com/Files/262592/myplaylist.xml
TopBottom

Laughing Wolf (Guild Admin) 7/25/2008 9:46 PM EST : RE: Adding a pop-out music player
Laughing Wolf
Posts: 3474
Zomgawsh Poster

Oh, you've got to be bloody joking. 

Yeah.  Everdark hit it on the nose.  My desk now has a dozen new forehead prints in it.  I hereby demand that S's and P's be deleted from the alphabet for embarrassing me so.

I actually might just rename it all xml.  It feels cleaner... and less embarrassing.  >.>

Alright, now that I've got my S's and P's sorted out, it's all working beautifully.  And I must say, I like the look and setup of this player quite a lot.  No advertising and I can still do multiple playlists later on (I decided I liked the idea after all) without bugging you even more just by changing the entire top frame.  There's not much to the top frame, so it doesn't seem like it'd be a big loading concern.

Thanks so much again! 

TopBottom

Ciannon (Guild Admin) 7/25/2008 9:48 PM EST : RE: Adding a pop-out music player
Ciannon
Posts: 2000
Zomgawsh Poster

I'm still confused as to what actually gets put in the guildportal site. I've created all of these files, and I've tried everything... or... well, what I think is everything, and no bueno.

EDIT: Nevermind. I figured out what goes into the freeform html/xml content box, but it's borked. LOL


Epic quotes from Coils:

"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008


TopBottom

Laughing Wolf (Guild Admin) 7/30/2008 10:33 AM EST : RE: Adding a pop-out music player
Laughing Wolf
Posts: 3474
Zomgawsh Poster

Thanks again, Mottie.  Got it working and unveiled the new player for my group, after tweaking some html and player settings.  I even found a newer version of the Fabricio player at Boutell.com, which has shuffle, the ability to be colored, looks a little bit cleaner and has an autoresume feature (which I won't be using in the interest of possibly having multiple playlists).

www.sinenterprises.com

TopBottom

Donikkaa (New Admin) 6/4/2010 1:19 PM EST : RE: Adding a pop-out music player
Donikkaa
Posts: 26
Becoming Adept!

Grrr   First, let's just say, I dont know ANYTHING about html or css. I did manage to put the music player in a widget and it works! So thanks! BUT I'm having problems changing it to the "Frame" one, like you have on your site! I love that and the other officers want to hear the music play when they browse the whole site! I dont know what Im doing wrong! Please help!  Remember, please speak english, because I am html ignorant! Thanks!
TopBottom

Mottie (MVP) 6/4/2010 3:33 PM EST : RE: Adding a pop-out music player
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Donikkaa!

Could you please be more specific about what problems you are having adding a frame music player? I am always trying to improve my instructions so that anyone, especially people who know nothing about HTML and CSS, can follow them step-by-step and be able to get what they want. So I would appreciate any feedback on what part of the instructions aren't clear, so I can improve it 
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%