Music - Drop Down Playlist Jukebox

Author's Comments

Look carefully for specific instructions

Features:
- Single changing Play/Pause button
- Stop button
- Forward and Back buttons
- Able to play whole playlist continuously (changes songs automaticly)
- Shuffle (not just first song) and shuffle on/off button
- Add track numbers to song titles automaticly

Adding Music

<option value="4">Artist Name - Song Title</option>

songs[4]="SONG URL HERE";

These are the two lines you need to make duplicates of to add new song beyond 5 songs. You'll find them in the code. Make sure to increment the "value" and also "song" number as you add more music. Finally make sure the option discription and songs URL with the same number corrispond to the same song.

DEFAULT SETTINGS
You can change default values for autostart, shuffling, and also if the tracks are numbered in the "Changeable Stuff" section which should be easy to spot and understand.

Notes:
I've noticed a small bug with the track numbering in that after the numbers are added, the box becomes slightly too small for the largest description. This problem seems to only happen in xanga though... and does not occure when I test in dream weaver.
Also I've Implemented the PlayList JukeBox using Windows Media Player 10.

You can put this code into your Custom Header or your Web Site Stats.

Hope everyone enjoys this!

Script Code

Copy and paste to Header HTML

Help

<option value="0">Artist Name - Song Title</option>
<option value="1">Artist Name - Song Title</option>
<option value="2">Artist Name - Song Title</option>
<option value="3">Artist Name - Song Title</option>
<option value="4">Artist Name - Song Title</option>

</SELECT>

<BR>
<BUTTON ID="BackButton" onClick="Back(forms['form'].playlist);"> << </BUTTON>
<BUTTON ID="PlayPauseButton" onClick="PlayPause(forms['form'].playlist);"><FONT color="green">  Play  </FONT></BUTTON>
<BUTTON ID="NextButton" onClick="Next(forms['form'].playlist);"> >> </BUTTON> 
<BUTTON ID="StopButton" onclick="Stop();"><FONT color="maroon">Stop</FONT></BUTTON>
<b><font size="3" color="black">Shuffle</font></b><INPUT TYPE=checkbox CHECKED ID="ShuffleSwitch" onclick="ToggleShuffle(this);" value="ON">

</FORM>
</CENTER>

var songs = new Array();

//*******************************//
	//****** CHANGEABLE STUFF *******//
	//*******************************// 
	
	var shuffle = false;  // false = shuffle off, true = shuffle on

var autoStart = true;   // false = autoStart off, true = autoStart on
	
	var numberTracks = true;  // true = place track number in front of list items, false = no track numbers
	
	// Add song URLs here (make sure it matches up with the order you have for song info, and urls need quotes):
	songs[0]="musicURL";
	songs[1]="musicURL";
	songs[2]="musicURL";
	songs[3]="musicURL";
	songs[4]="musicURL";
	
	//*******************************//
	//*******************************//

// Initializations //
with (document){
	var length = forms['form'].playlist.length;

if(numberTracks){
  for (var i = 0; i < length; i++){
  	forms['form'].playlist.options[i].innerHTML = (i+1) + " - " + forms['form'].playlist.options[i].innerHTML;
  }
	}
	
	if (shuffle) {
  var randsg = Math.floor(Math.random()*songs.length);
  Player.url = songs[randsg];
  forms['form'].playlist.options[randsg].selected = true;
  forms['form'].ShuffleSwitch.outerHTML = ShuffleOnHTML.innerHTML;
	}

else {
  forms['form'].ShuffleSwitch.outerHTML = ShuffleOffHTML.innerHTML;
  Player.url = songs[0];
	}

if(autoStart){
  var snum = forms['form'].playlist.selectedIndex;
  if(Player.url != songs[snum]){
  	Player.url = songs[snum];
  }
  Player.controls.Play();
	}
}

// Functions //
// Discription: "PlayPause" will toggle playing and pausing if the same song is still selected,
//              otherwise it will load the newly selected song
function PlayPause(list) {
	var snum = list.selectedIndex;
	
	if((Player.url == songs[snum] && Player.url != "") && Player.playState != 1){
  if(Player.playState == 3){
  	Player.controls.Pause();
  }
  
  else {
  	Player.controls.Play();
  }
	}

else {
  Player.url = songs[snum];
  Player.controls.Play();
	}
}

// Discription: "Next" will move to the next music file if shuffle is off
//              otherwise it will load a random song. Calls PlayPause to start music.
function Next(list) {
	var snum = list.selectedIndex;
	if (!shuffle) {
  if (snum == list.length-1) {
  	snum = -1;
  }
  snum++;
	}
	
	else {
  var temp;
  do{
  	temp = Math.floor(Math.random()*songs.length);
  } while(temp == snum);
  snum = temp;
	}
	
	list.options[snum].selected = true;
	PlayPause(list);
}

// Discription: "Back" does the same thing as "Next" but moves backwads
//              through the list. If shuffle is on then picks a random song.
function Back(list) {
	var snum = list.selectedIndex;
	if (!shuffle) {
  if (snum == 0){
  	snum = list.length;
  }
  snum--;
	}
	
	else {
  var temp;
  do{
  	temp = Math.floor(Math.random()*songs.length);
  } while(temp == snum);
  snum = temp;
	}
	
	list.options[snum].selected = true;
	PlayPause(list);
}

// Discription: Self explanitory.
function Stop(){
	Player.controls.Stop();
}

// Discription: Makes the shuffle flag the same as the status of the CheckBox
//    The status of the checkbox (true/false) indicates if the box is checked
function ToggleShuffle(CheckBox) {
	shuffle = CheckBox.status;
}

</SCRIPT>

// Description: This is an interupt handler used to handle instances when the
//              state of the player changes to play or stop for example.

//STATE.innerText = NewState;

switch(NewState){
	case 8:  // Handles player after it just finishes playing through a song
  var num = document.forms['form'].playlist.selectedIndex;
	
  if (!shuffle){
  	if(num == document.forms['form'].playlist.length-1){
    num = -1;
  	}
  
  	num++;
  }
  else {
  	var temp;
  	do{
    temp = Math.floor(Math.random()*songs.length);
  	} while(temp == num);
  	num = temp;
  }
	
  document.forms['form'].playlist.options[num].selected = true;
	
  PreviousState = NewState;
  break;

case 1: // Handles player after it stops
  if(PreviousState == 8){
  	var num = document.forms['form'].playlist.selectedIndex;
  	Player.settings.autoStart = true;
  	Player.url = songs[num];
  	PreviousState = NewState;
  }
  
  else if (PreviousState != 3 && PreviousState != 2){
  	Player.controls.Play();
  	Player.settings.autoStart = false;
  }
  
  else{
  	forms['form'].PlayPauseButton.innerHTML = PlayHTML.innerHTML;
  }
  break;

case 3: // Handles player after it starts to play
  PreviousState = NewState;
  forms['form'].PlayPauseButton.innerHTML = "Pause";
  shuffle = document.forms['form'].ShuffleSwitch.status;
  break;

case 2: // Handles player after being paused
  PreviousState = NewState;
  forms['form'].PlayPauseButton.innerHTML = PlayHTML.innerHTML;
  break;

default:
}

</SCRIPT>

Script Comments

Showing latest 2 of 2 comments

script will not work...it will not start...it will not change songs
it will notshuffle....its deader then a door knob
need help please

By edyearl on Apr 9, 2011 1:31 pm

How come it doesn't "Able to play whole playlist continuously (changes songs automaticly) "???

By winspaz on Jun 9, 2007 11:56 am

Script Details

Author	Jhaks
Submitted on	Mar 1, 2006
Page views	51,562
Favorites	32
Comments	2

Script Tags

music, playlist, drop down