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) 6/11/2008 7:37 PM EST : Adding a pop-out music player
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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

How to add a Pop-out music player

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
TopBottom

Ciannon (Guild Admin) 6/12/2008 8:53 AM EST : RE: Adding a pop-out music player
Ciannon
Posts: 2000
Zomgawsh Poster

Awesome! Thanks

Is there a way we can get a sticky topic posted so that we can get a link to the threads that have the .css in them so people have somewhere to look?

I'd be willing to go through the topics to find them and post them.




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) 6/15/2008 1:51 AM EST : RE: Adding a pop-out music player
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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;
 }
  docu
ment.getElementById('playerBox').innerHTML = a;
}
var z = document.getElementById('playlist').value;
docu
ment.getElementById('playerBox').innerHTML = z;
</
script>
</bo
dy></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>
<head>
<title>
Mottie's Test Site</title>
</head>

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

<n
oframes>
Your browser does not support frames. Go to <a href="
{URL to your HOME page}">
Mottie's Test Site</a>
</no
frames>
</fra
meset>
</html>

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
TopBottom

Everdark (MVP) 6/15/2008 5:39 AM EST : RE: Adding a pop-out music player
GuildPortal MVP
Everdark
Posts: 3949
Zomgawsh Poster

That's awesome!

Although for some reason, the second player (Mario Themes) doesn't pop up when using IE 7 and the Exit button doesn't function.

I get an Access is Denied error on Line: 724 Char: 5 Code: 0


If functions good in Firefox though.

"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

Mottie (MVP) 6/15/2008 7:26 AM EST : RE: Adding a pop-out music player
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Thanks Everdark!

I found the problem with the exit button and fixed it in the code above. But I the second playlist (Mario themes) works fine for me. Maybe the error in the exit button before was stopping the second playlist from working - Odd.

Also, if you have Firefox set up to open links in a new tab, it will "exit" from the player by opening a new tab. It's not really a bug, but one way Firefox can be set up.

I did find another problem. The detailed progression box won't display anything when in a frame. I'm looking into fixing that now 
TopBottom

Everdark (MVP) 6/15/2008 10:55 AM EST : RE: Adding a pop-out music player
GuildPortal MVP
Everdark
Posts: 3949
Zomgawsh Poster

Sweet! It's working now, thanks MotGyver!

(ok, prob not the most clever nickname I've come up with but I had to get that in there just once.)

"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

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

LOL thanks!
TopBottom

Ciannon (Guild Admin) 6/15/2008 2:16 PM EST : RE: Adding a pop-out music player
Ciannon
Posts: 2000
Zomgawsh Poster

Everdark said:
Sweet! It's working now, thanks MotGyver!

(ok, prob not the most clever nickname I've come up with but I had to get that in there just once.)



I personally like Sir Mottie. TO CASTLE WORLD!


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/23/2008 9:47 AM EST : RE: Adding a pop-out music player
Laughing Wolf
Posts: 3474
Zomgawsh Poster

Alright, thank you for linking me here.  I swear I did a search for music and came out with nothing. 

This is great and works just fine on my own test run, but I have a couple questions.

Can you highlight the code I'd need to remove if I don't want multiple playlists?

Can the amount of space at the top be somehow eliminated?  I'd like the player to rest right at the top of the page - instead, it looks like it's maybe 20-30 pixels down.

Will Internet Explorer always ignore the "frameset rows="70,*" scrolling=no framespacing=no frameborder=0 noresize" line?  It seems the only part IE recognized, when I browsed it, was the rows field.

TopBottom

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

Another question.  (I answered the one about empty space being removed through some trial and error).  Is there a code to tell the player not to autoplay?  Some of my site members may not want it playing automatically.

And to turn off looping?

TopBottom

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