PDA

View Full Version : Creating a music playlist for a site I'm working on...



Rivian
09-13-2005, 02:34 PM
I'm working on a site where I need to create a play list. I don't want to embed background music because it slows download, so I'd like to create a page where people can go, click on the "play" link and have it open a player to play the music. I figured out that I'll likely need a javascript for this, unless there's a better option, but I don't have a clue how to go about this. Did a ton of research on Google and they talk lots about background music, but I really don't want to go that route. So I'd like it to look something like this:

To listen to the songs, click the "play" link.


City of Trees - Play
Cloudy Sun- Play
Dancing With The Grass- Play
Desert Sand- Play
Waking Up[- Play
Warm Rain- Play
Where'd You Go- Play
Wilting Flower- Play


Any help that you could offer would be wholeheartedly appreciated!!!!
Thanks,
~Riv

cr3ative
09-13-2005, 04:19 PM
Just link to an audio file (.ogg, .mp3, .wma, etc)

<a href="audio.mp3">Play</a>

Then the user can decide where they want to play it.

cr3

Rivian
09-13-2005, 08:24 PM
Hi Cr3ative...

I tried that but then when I tested it, it automatically starts downloading.. I don't want them to have to do that.. I want to have them just click play and have a player come up. Any thoughts on that?

Thanks,
~Riv

cr3ative
09-14-2005, 07:56 PM
Hmm, you could create an m3u file for each.. just open up notepad, insert the URL of the file and save as file.m3u. Then upload that file.m3u, and link to that.

When the user clicks on the m3u file, his/her preferred music player will open, read the link inside the file and play the track.

Hopefully.

cr3

Wizard13335
09-15-2005, 06:33 AM
You could also create a seperate webpage with an embedded audio player, and create a link to that. It would be kinda easier. All you have to do to embed the music is:

<embed src="your_file.mp3" width="_" height="_" autostart="true/false">
And it will create kind of a mini player on the page rather than opening the actual player. :)

Lin
09-25-2005, 03:13 AM
Hi, I think you might wanna try this one out. It's like a drop-down box where you can choose the music then click on Play or Pause or Stop
This is an example site: http://www.xanga.com/RCpreview1
Look up at the Music Playlist on the website :)

Below is the code from that site >.> (p.s. all the credits go to that site ;) )




<p class="nav">Music playlist</p>
<p class="menubottom">

<object id="darkplayer" codeBase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject" height="0" standby="Loading Microsoft Windows Media Player components..." width="0" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<param NAME VALUE>
<param NAME="ShowControls" VALUE="0">
<param NAME="ShowStatusBar" VALUE="0">
<param NAME="ShowDisplay" VALUE="0">
<param NAME="DefaultFrame" VALUE="Slide">
<param NAME="Autostart" VALUE="1">
<param NAME="Loop" VALUE="True">
</object><form name="form">
<select style="FONT-SIZE: 8pt; BACKGROUND: #EEEAEA; WIDTH: 166px; COLOR: #A8A8A8; font-face: Comic Sans MS" name="playlist" size="1">
<option value="0">SONG TITLE!!!</option>
<option value="1">SONG TITLE!!!</option>
<option value="2">SONG TITLE!!!</option>
<option value="3">SONG TITLE!!!</option>
<option value="4">SONG TITLE!!!</option>
<option value="5">SONG TITLE!!!</option>
<option value="6">SONG TITLE!!!</option>
</select><input TYPE="BUTTON" NAME="darkplay" VALUE="play" OnClick="play(document.forms['form'].playlist);">
<input TYPE="BUTTON" NAME="darkpause" VALUE="pause" OnClick="document.darkplayer.Pause(); playstate=2;">
<input TYPE="BUTTON" NAME="darkstop" VALUE="stop" OnClick="document.darkplayer.Stop(); playstate=2;"></p>
</form>
<script language="JavaScript">
<!--
var playstate = 1;
shuffle = 1; // set to 0 to always play first song in list
// set to 1 to randomly choose the first song to play
songs=new Array();
songs[0]="SONG URL!!!";
songs[1]="SONG URL!!!";
songs[2]="SONG URL!!!";
songs[3]="SONG URL!!!";
songs[4]="SONG URL!!!";
songs[5]="SONG URL!!!";
songs[6]="SONG URL!!!";

if (shuffle == 1) {
var randsg = Math.floor(Math.random()*songs.length);
document.darkplayer.FileName = songs[randsg];
document.darkplayer.scr = songs[randsg];
document.forms['form'].playlist.options[randsg].selected = true;
}
function play(list) {
if (playstate == 2) {
document.darkplayer.Play();
} else {
var snum = list.options[list.selectedIndex].value
document.darkplayer.FileName = songs[snum];
document.darkplayer.scr = songs[snum];
}
playstate = 1;
}
//-->
</script>


You might need to change some of the codes to fit your own site xD

P.S. I have nothing to do with the site :p Just passing by and found it nice xD, I hope it will help ^^

Noobish
09-27-2005, 05:05 AM
I know you don't own this code but I want to know how to make this work with Mozilla! Can anybody help me?

Tinkerbell
09-29-2005, 05:57 PM
Hi, I think you might wanna try this one out. It's like a drop-down box where you can choose the music then click on Play or Pause or Stop
This is an example site: http://www.xanga.com/RCpreview1
Look up at the Music Playlist on the website :)

Below is the code from that site >.> (p.s. all the credits go to that site ;) )




<p class="nav">Music playlist</p>
<p class="menubottom">

<object id="darkplayer" codeBase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject" height="0" standby="Loading Microsoft Windows Media Player components..." width="0" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<param NAME VALUE>
<param NAME="ShowControls" VALUE="0">
<param NAME="ShowStatusBar" VALUE="0">
<param NAME="ShowDisplay" VALUE="0">
<param NAME="DefaultFrame" VALUE="Slide">
<param NAME="Autostart" VALUE="1">
<param NAME="Loop" VALUE="True">
</object><form name="form">
<select style="FONT-SIZE: 8pt; BACKGROUND: #EEEAEA; WIDTH: 166px; COLOR: #A8A8A8; font-face: Comic Sans MS" name="playlist" size="1">
<option value="0">SONG TITLE!!!</option>
<option value="1">SONG TITLE!!!</option>
<option value="2">SONG TITLE!!!</option>
<option value="3">SONG TITLE!!!</option>
<option value="4">SONG TITLE!!!</option>
<option value="5">SONG TITLE!!!</option>
<option value="6">SONG TITLE!!!</option>
</select><input TYPE="BUTTON" NAME="darkplay" VALUE="play" OnClick="play(document.forms['form'].playlist);">
<input TYPE="BUTTON" NAME="darkpause" VALUE="pause" OnClick="document.darkplayer.Pause(); playstate=2;">
<input TYPE="BUTTON" NAME="darkstop" VALUE="stop" OnClick="document.darkplayer.Stop(); playstate=2;"></p>
</form>
<script language="JavaScript">
<!--
var playstate = 1;
shuffle = 1; // set to 0 to always play first song in list
// set to 1 to randomly choose the first song to play
songs=new Array();
songs[0]="SONG URL!!!";
songs[1]="SONG URL!!!";
songs[2]="SONG URL!!!";
songs[3]="SONG URL!!!";
songs[4]="SONG URL!!!";
songs[5]="SONG URL!!!";
songs[6]="SONG URL!!!";

if (shuffle == 1) {
var randsg = Math.floor(Math.random()*songs.length);
document.darkplayer.FileName = songs[randsg];
document.darkplayer.scr = songs[randsg];
document.forms['form'].playlist.options[randsg].selected = true;
}
function play(list) {
if (playstate == 2) {
document.darkplayer.Play();
} else {
var snum = list.options[list.selectedIndex].value
document.darkplayer.FileName = songs[snum];
document.darkplayer.scr = songs[snum];
}
playstate = 1;
}
//-->
</script>


You might need to change some of the codes to fit your own site xD

P.S. I have nothing to do with the site :p Just passing by and found it nice xD, I hope it will help ^^

yes well it helps thanks .... but ... it plays one song and not the others ... how could we change that?... :confused:

thanks

Lin
10-04-2005, 08:02 PM
yes well it helps thanks .... but ... it plays one song and not the others ... how could we change that?... :confused:

thanks

You will have to manually select the song you wanna play from the Drop Down List >_<
I think there is a way to modify it but I don't know ><"
Sorry ><

MikeyG
03-24-2008, 08:03 PM
Thanks Lin for sharing this code - it does exactly what I need. The only problem is, I suspect it won't work with all browsers and many visitors to my site will find they can't play the clips I want them to hear.

Does anyone know what I need to do to ensure it works on all platforms?:confused:

Medyman
03-25-2008, 12:10 AM
Thanks Lin for sharing this code - it does exactly what I need. The only problem is, I suspect it won't work with all browsers and many visitors to my site will find they can't play the clips I want them to hear.

Does anyone know what I need to do to ensure it works on all platforms?:confused:

Yeah...use flash.

http://www.jeroenwijering.com/?item=JW_FLV_Media_Player is one of the best free media players out there.

There used be a dedicated mp3 player on his site too but I guess he stopped support on it in place of this more robust one.

You can turn off all the video features and turn it into a pure-mp3 player. I have the standalone version around somewhere, if anyone needs it.

MikeyG
03-25-2008, 01:27 PM
Thanks for the tip - took me a while to work out fully what I needed, but I've now cracked it - much appreciated.

anandagarwal
03-27-2008, 06:18 PM
Hello every Body

I m new bee.

I have also same problem.

But, Thanks I got the solution with your replys.

Yours faithfully
Anand Agrawal