Creating a music playlist for a site I'm working on...

[Rivian]

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]

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]

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]

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]

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]

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 Just passing by and found it nice xD, I hope it will help ^^

[Noobish]

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]

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

thanks

[Lin]

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

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]

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?