Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Multimedia > Pop-out Music Player
Mottie (SuperAdmin) 6/11/2008 8:11 PM EST : Pop-out Music Player
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Playlist.com | Pop-out player | Frame Player | Ultra Slim Framed Player

How to add a Pop-out music player

GuildPortal admin site link to original post

I can't take credit for doing this, but I wanted to post detailed instructions on how to add a pop-out music player to your site (thanks to ~Sarrita~ in the Knights of Hyrule guild for doing it first )

So far I've found two different ways to get a pop-out music player for your site. This is nice because it will open a music player in a separate window so you can surf your forums without the music being interrupted.

1. Playlist.com

This site allows you to make a playlist from music that you can search for in their database. It is possible to submit links to them, but I don't know how picky they are about ownership.
  • 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!
[top]

2. Pop-out music player

These instructions use Flashwidgetz.com - This site has a large selection of music players and you can add music directly into the playlist with URL links. Another nice flash music player site is Myflashfetish.com. Any flash player will work.
  • 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:
Edit (3/29/2010): Updated to remove the other hosting site and updated some instructions
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 6/15/2008 2:03 AM EST : RE: Pop-out Music Player
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Don't hate me! I figured out another way to make your music player not get interrupted while surfing your site. And you can select which playlist you want the music player to use! YAY!

This is a little more complicated (*blink*)

Frame Player

1. You need a place to save two HTML files. If you subscribe to GuildPortal, upload the files with the file manager. If you aren't a subscriber, use a free file hosting site (ripway.com works)

2. Find a thin flash music player and make a playlist (or two, or three ). I found two at flashwidgetz.com named "Slim Slyder" and "City MP3 Player". You'll see why they need to be thin in a minute! Get to the Embed code page, but don't copy the code yet.

3. Open up your trusty text editor and copy the code below:

<html><body>
<style type="text/css">
body { background: #000000; 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; }
playlist { background: #000000; color: #ffffff; }
</style>

<table border=0 width="100%"><tbody>
<tr>
 <td valign=top width="33%">
 <div id="playerBox"></div>
 </td>
 <td valign=top width="33%"></td>
 <td valign=top align=right width="33%"><br>

  <select id="playlist" class="playlist" onchange="setPlaylist(this.value)">
  <option value="blank">Select playlist</option>

  <option selected='selected' value='{insert embeded music player code here}'>
  {Playlist Name}
  </option>

  <option value='{insert embeded music player code here}'>
  {Playlist Name}
  </option>

<!--
 ************************************
 Copy the HTML below and paste in the
 embeded link and type in the name

 Only the first option should have a
 selected='selected' in it
 ************************************
 <option value='{insert embeded music player code here}'>
 {Playlist Name}
 </option>

 ************************************
-->

</select>
  <a href="{URL to your HOME page}" target="_parent"><input type=button value="Exit"></a>
 </td>
</tr>
</tbody></table>
<script type="text/javascript">
function setPlaylist(playnm) {
 if (playnm == "blank") {
  var a = "&nbsp;";
 } else {
  var a = playnm;
 }
  document.getElementById('playerBox').innerHTML = a;
}
var z = document.getElementById('playlist').value;
document.getElementById('playerBox').innerHTML = z;
</script>
</body></html>

4. Adjust the colors or add backgrounds in the style area to match your site (blue text)

5. Now copy the Embed code of the flash player from step 2 and paste it (CTRL-V) over {insert embeded music player code here}, making sure that the single quotes around the embed code are still there.

6. Replace {Playlist Name} to name your playlist, repeat the above two steps for each playlist you make. But make sure that only the first playlist has the selected='selected' code in it!

7. Copy the URL of your Home Page and paste it over {URL to your HOME page}  

8. Now save this file and name it "player.htm" or something easy to remember 

9. Upload this file to your site using the File Manager: Control Panel > File Manager > Upload a New File > Browse, pick, open > Upload File

10. Now copy the Path to the file "http://www.axiomfiles.com/Files/######/player.htm".

11. Make a new file in your text editor and paste the "Path" from step 10 at the top.

12. Copy the code below and paste it below the URL from step 11.
<html>
<he
ad>
<title>Mottie's Test Site</title>
</head>

<frameset rows="60,*" scrolling=no framespacing=no frameborder=0 noresize>
<frame src="{URL to player.htm from step 10}">
<frame src="{URL to your HOME page}">

<noframes>
Your browser does not support frames. Go to <a href="{URL to your HOME page}">
Mottie's Test Site
</a>
</noframes>
</frameset>
</ht
ml>
13. Replace the green text with the name of your guild.

14. Cut (CTRL-X) and paste (CTRL-V) the URL from step 10 into {URL to player.htm from step 10}

15. Copy and paste the URL of your website's home page into {URL to your HOME page}

16. Now save this file with your guild name and add a ".htm" at the end (e.g. "My Guild.htm"). This will be visible in the URL box of the browser, so it is very visible to users.

17. Upload this file to your site and copy it's URL.

18. Now find a place to put a button or image that site members can click on to open this frame. Content box of the "Free Form Text/HTML" type should be used.

19. You can now decide if you want to use a button to open the frame or an image with a link, then replace {URL to your page from step 17} with, you guessed it, the URL from step 17. And also change the name of your link (in green)
Button
<center><input type="button" onclick="top.window.location='{URL to your page from step 17}';" value="Open music Player"></center>
Link
<center><a href="{URL to your page from step 17}" target="_self">Open music player</a></center>

20. Try it out!... if you notice the player gets cut in half or isn't showing enough of it, look back at the code in step 12 and you'll find a "60,*" in red. That is the height in pixels of the top frame. Adjust it as you need.

If you want to see this work, just
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 7/23/2008 7:16 PM EST : Ultra Slim Frame Music Player
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Ultra Slim Music Player

GuildPortal admin site link to original post

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>

    <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,
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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

norilis zione II (Applicant) 8/25/2008 6:01 PM EST : RE: Pop-out Music Player
norilis zione II
Posts: 59

0
Like

0
Dislike

so everything was working fine in the first document but when i created the second one for somereason it doesnt work it jus sends me to a "
page cannot be found screen" i cant figure it out please almighty mottie help me
TopBottom

Dethmaul (Member) 1/10/2012 12:05 PM EST : RE: Pop-out Music Player
Dethmaul
Posts: 987

0
Like

0
Dislike

Mottie! Buddy!

So I hit my 1.5 week limit and I JUST HAD to bug you...

So here it is.

I got the music player working. Click the button, it pops up a little box and works... YAY!

You KNOW I could never be satisfied with just that right!?

I was wondering, how hard would it be to give the pop-up a better visual, and by that I mean, I would like it to pop-up but then kinda just dock to the screen in one of the corners.

I would like it to not actually show the pop-up frame, just the player and have it sit on the screen and float when I scroll kind of like my menu bar does.

I messed with it a little and actually got it to do something like what I want, but I lost the function to continue playing through page browsing. I tried other versions you have here, but they all suffer from the same flaws...

a) When you start the player, it reloads the homepage
b) the frame reloads and music restarts every page change.

I really like what i have and can live with it if I need to, I just would like that pretty music box player to remain visible on the site, instead of minimizing while I am browsing.

EDIT:

Ok, so I tried the frame one again, and it works... until I change pages. I think it has something to do with the way pages are called using the side panel script on my site, because I think it is reloading everything when it changes pages... only thing I can think of...
TopBottom

Mottie (SuperAdmin) 1/10/2012 3:50 PM EST : RE: Pop-out Music Player
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Dethmaul!

Sadly these issues you are having is due to the browser completely reloading the page when going to other tabs on your site. So really the only way around keeping the music player from restarting would be to open the player in a new popup window or in a frame (but you won't see the URL change) like the ultra slim method. Not much has changed how these work since I first posted this thread.

Now if you want to position the popup window, that is possible with the "2. Pop-out music player" method, but not with the "1. Playlist.com" method since it controls the popup itself. This is done by adding in some more window options (top & left were added below).
<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, top=100, left=100' );"></center><br>
If that isn't want you wanted, well then I think we're all just SOL.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Nykeawyn (Applicant) 6/3/2012 11:05 AM EST : RE: Pop-out Music Player
Nykeawyn
Posts: 246

0
Like

0
Dislike

Mottie,

Just an FYI, Playlist.com is now restricted and you can not copy the embedded code to your website anymore.  It became effective on June 2,2012.  I found out when I was scanning my site and noticed a popup telling me if I want to listen I had to go to their site.  Thought you might want to know.

As always, keep up the great work.
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%