1.이 JUKE BOX도 소스를 내컴에 저장하고, 블로그나 카페에 파일로 업로드 시켜야 합니다.
2.업션을 선택하는 기능에서 초기랜덤모드 여부(1=랜덤, 0=시퀀스)에서 차례대로 음악이 나오는 0=시퀀스를
선택하기보다는 1=랜덤을 선택하는 것이 매번 클릭할 때마다 다른 곡이 나옴으로 변화가 있습니다.
3.처음 시작할 트랙(0=랜덤, #=트랙번호)에서 초기랜덤모드를 선택할 경우에는 여기에서도 0=랜덤을 선택해야
합니다.
4.음악 리스트를 수정할 때에 반드시 선택한 곡이 제대로 나오는 지를 확인하시고,
아래와 같이 교체하는 과정에서 따옴표,콤마등을 정확하게 사용하시고,
빨간색 부분처럼 공란이 생기면 다음곡으로 자동으로 넘어가지를 못합니다.
(" http~~~~~.mp3 "," 모든 영광 하나님께 ","피아노 연주 ")
("http://home.megapass.co.kr/~sungsang1/sydney03.mp3","모든 영광 하나님께","피아노 연주")
5. 결과 / 첨부파일 : JukeBox.txt (클릭)
<소스 내용>
<head>
<title>피아노 연주 /영혼의 친구</title>
<base href="http://blog.itimes.co.kr/JukeBox.aspx?blogID=anth" />
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Expires" content="-1">
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
body, td, input,marquee { font-size:8pt;font:돋움; color:#666666;}
a:link { color:#666666; text-decoration:none; }
a:visited { color:#666666; text-decoration:none; }
a:hover { color:#666666; text-decoration:underline; }
</style>
<script language="javascript">
play_flag = 1;
canvas=new Array();
canvas_counter=0;
function PlayList()
{
if (JukeList_div.style.display == "none")
{
JukeList_div.style.display = "" ;
jukeWatch.style.display = "none" ;
list_button.src = "Skin/DefaultGray/skindata/BtnSoundListOff.gif";
}
else
{
JukeList_div.style.display = "none" ;
jukeWatch.style.display = "" ;
list_button.src = "Skin/DefaultGray/skindata/BtnSoundlist.gif";
}
}
function Setting()
{
TrackData();
if (playstatus)
{
Play();
}
}
function Mode()
{
switch(Mode.arguments[0])
{
case "shuffle":
shuffle = (shuffle == 0)? 1 : 0;
break;
case "repeat":
repeat = (repeat == 0)? 1 : 0;
break;
case "timer":
if(playstatus) {timer=(timer == 3) ? 1 : timer+1;}
break;
default:
}
if (shuffle) shuffle_button.src="Skin/DefaultGray/skindata/BtnSoundRandomOff.gif";
else shuffle_button.src="Skin/DefaultGray/skindata/BtnSoundrandom.gif";
if (repeat) repeat_button.src="Skin/DefaultGray/skindata/BtnSoundRepeatOff.gif";
else repeat_button.src="Skin/DefaultGray/skindata/BtnSoundrepeat.gif";
}
function Play() {
if (typeof(kikyou)=="number") clearTimeout(kikyou);
document.all.imgCD.src="Skin/DefaultGray/skindata/ImgSoundCdOn.gif";
MediaPlayer.open(file);
playstatus = 1;
}
function Stop() {
if(typeof(kikyou)=="number") clearTimeout(kikyou);
document.all.imgCD.src="Skin/DefaultGray/skindata/ImgSoundCdOff.gif";
MediaPlayer.Stop();
playstatus = 0;
}
function Selector(akane)
{
if(typeof(kikyou)=="number") clearTimeout(kikyou);
if (!(Selector.arguments[1]*repeat))
{
if (akane == "next" || akane == "prev") {track=NextTrack(akane);}
else if (akane > total || akane <= 0) {track=Math.ceil(Math.random()*total);}
else {track=akane;}
if (akane != "next" && akane != "prev") {playstatus=1;}
}
Setting();
}
function NextTrack()
{
if(total==1) return 1;
else
{
if(!shuffle)
{
switch(NextTrack.arguments[0])
{
case "next":
kirishima=(track==total)?1:track+1;
break;
case "prev":
kirishima=(track==1)?total:track-1;
break;
default:
}
}
else
{
kirishima=Math.ceil(Math.random()*total);
}
if(kirishima == track)
{
NextTrack();
}
return kirishima;
}
}
function TrackData()
{
number = (track<10)?"0"+track:track;
file = canvas[(track*3)-3];
name = canvas[(track*3)-2];
singer = canvas[(track*3)-1];
if (singer == "" || singer == null) singer = unknown_singer;
Scroller( "<font style='color:#FFFFFF;'><b>"+ name +"</b>("+ singer+")</font>");
}
function TimerData()
{
ayane = MediaPlayer.Duration
kasumi = MediaPlayer.currentPosition
switch(timer)
{
case 1:
min = Math.floor(ayane/60); sec = (ayane%60<10)? "0"+Math.floor((ayane)%60) : Math.floor((ayane)%60);
break;
case 2:
min = "- "+Math.floor((ayane-kasumi)/60); sec = ((ayane-kasumi)%60<10)? "0"+Math.floor((ayane-kasumi)%60) : Math.floor((ayane-kasumi)%60);
break;
case 3:
min = "+ "+Math.floor(kasumi/60); sec = (kasumi%60<10)? "0"+Math.floor(kasumi%60) : Math.floor(kasumi%60);
break;
default:
}
}
function DisPlay()
{
if (playstatus)
{
TimerData();watch.value=min+":"+sec;
}
else
{
watch.value="재생중이지 않습니다.";
}
if (watch.value == "" || watch.value == "+ -1:0-1" || watch.value == "0:00" || watch.value == "- 0:01")
{
watch.value="파일 연결중입니다.";
}
}
function kana(bResult)
{
if (kana.arguments[0] == 0)
{
if(MediaPlayer.PlayCount==1) kikyou = setTimeout("Selector('next', 1);", blank*1000);
}
}
playstatus = 1; // 초기재생여부 (1=재생, 0=정지)
shuffle = 1; // 초기 랜덤모드 여부 (1=랜덤, 0=시퀀스)
repeat = 0; // 초기 리피트모드 여부 (1=리피트)
blank = 2; // 곡 사이의 시간 (단위=초)
timer = 2; // 초기 타이머 모드 (1=총시간, 2=남은시간, 3=재생시간)
startat = 0; // 처음 시작할 트랙 (0=랜덤, #=트랙번호)
listclose = 1; // 리스트창에서 곡을 선택할때 리스트창 자동으로 닫기 (1=닫음, 0=닫지않음)
unknown_singer = "UnKnown"; // 가수이름을 적지 않았을때 표시될 내용.
// 파일이름, 곡제목, 가수이름의 세가지가 순서대로 들어가야 합니다.
// 형식 list("파일의 URL","곡제목","글번호");
function List()
{
for (i=0; i < List.arguments.length; i++)
{
canvas[canvas_counter] = List.arguments[i];
canvas_counter++;
}
}
function Scroller(string)
{
info.innerHTML = string;
}
function PageInit()
{
<!-------------------------음악 List ------------------------------------>
List("http://home.megapass.co.kr/~sungsang1/sydney03.mp3","모든 영광 하나님께","피아노 연주");
JukeList.options[0]=new Option("01 모든 영광 하나님께",1)
List("http://home.megapass.co.kr/~sungsang1/sydney04.mp3","내 맘속에 있는 이 평화는","피아노 연주");
JukeList.options[1]=new Option("02 내 맘속에 있는 이 평화는",2)
List("http://www.andong-ch.org/media/mp3/AD024/mindl09.mp3","죄 짐 맡은 우리 구주","파이프 올갠 연주");
JukeList.options[2]=new Option("03 죄 짐 맡은 우리 구주",3)
List("http://www.andong-ch.org/media/mp3/AD024/mindl11.mp3","내 진정 사모하는","파이프 올갠 연주");
JukeList.options[3]=new Option("04 내 진정 사모하는",4)
List("http://home.megapass.co.kr/~sungsang1/sydney13.mp3","멀고 험한 이 세상 길","피아노 연주");
JukeList.options[4]=new Option("05 멀고 험한 이 세상 길",5)
List("http://home.megapass.co.kr/~sungsang1/sydney06.mp3","그 때 그 무리들이","피아노 연주");
JukeList.options[5]=new Option("06 그 때 그 무리들이",6)
List("http://www.andong-ch.org/media/mp3/AD024/mindl16.mp3","죄 짐을 지고서 곤하거든","파이프 올갠 연주");
JukeList.options[6]=new Option("07 죄 짐을 지고서 곤하거든",7)
List("http://www.andong-ch.org/media/mp3/AD024/mindl28.mp3","마음 속에 근심있는 사람","파이프 올갠 연주");
JukeList.options[7]=new Option("08 마음 속에 근심있는 사람",8)
List("http://home.megapass.co.kr/~sungsang1/sydney10.mp3","나는 길잃은 나그네였네","피아노 연주");
JukeList.options[8]=new Option("09 나는 길잃은 나그네였네",9)
List("http://home.megapass.co.kr/~sungsang1/sydney07.mp3","놀라운 놀라운 일이였네","피아노 연주");
JukeList.options[9]=new Option("10 놀라운 놀라운 일이였네",10)
List("http://www.andong-ch.org/media/mp3/AD024/mindl12.mp3","주여 나의 병든 몸을","파이프 올갠 연주");
JukeList.options[10]=new Option("11 주여 나의 병든 몸을",11)
List("http://www.andong-ch.org/media/mp3/AD024/mindl05.mp3","주의 음성을 내가 들으니","파이프 올갠 연주");
JukeList.options[11]=new Option("12 주의 음성을 내가 들으니",12)
List("http://home.megapass.co.kr/~sungsang1/sydney05.mp3","죄인들을 위하여","피아노 연주");
JukeList.options[12]=new Option("13 죄인들을 위하여",13)
List("http://home.megapass.co.kr/~sungsang1/sydney02.mp3","거룩하신 하나님","피아노 연주");
JukeList.options[13]=new Option("14 거룩하신 하나님",14)
List("http://www.andong-ch.org/media/mp3/AD024/mindl03.mp3","내 영혼의 그윽히 깊은데서","파이프 올갠 연주");
JukeList.options[14]=new Option("15 내 영혼의 그윽히 깊은데서",15)
List("http://www.andong-ch.org/media/mp3/AD024/mindl01.mp3","인애하신 구세주여","파이프 올갠 연주");
JukeList.options[15]=new Option("16 인애하신 구세주여",16)
kanzaki=setInterval("DisPlay()", 200);
total=eval(canvas.length)/3;
if (startat==0 || startat>total) track = Math.ceil(Math.random()*total);
else {track=startat;}
Mode();
Setting();
parent.IframeReSize('frmJukeBox');
}
</script>
<script language="JavaScript" for="MediaPlayer" event="EndOfStream(bResult)">
kana(bResult);
</script>
</head>
<body onLoad="PageInit();" topmargin="0" leftmargin="0" oncontextmenu="return false;" ondragstart="return false;" onselectstart="return false;">
<table cellpadding=0 cellspacing=0 width="540">
<tr>
<td>
<table cellpadding=0 cellspacing=0 width=150 background="Skin/DefaultGray/skindata/ImgSoundTitleBackGround.gif" height="20">
<tr><td style="padding-left:5px;padding-right:5px;padding-top:3px">
<marquee id=info direction="left" width="100%" scrollamount="1" loop="0"></marquee>
</td></tr></table>
<td><img id="imgCD" src="/Skin/DefaultGray/skindata/ImgSoundCdOff.gif" width=23></td>
<td height=20 onClick="Mode('timer')" style="cursor:hand">
<div id="jukeWatch">
<input type=text onfocus="this.blur()" name=watch style="width:100%;border:1px;color=#999999;" onmouseover="this.style.color='#000000';this.style.cursor='hand'" onMouseOut="this.style.color='#999999'">
</div>
<div id="JukeList_div" style='display:none;'>
<select name="JukeList" onchange="Selector(this.value);" style="font:돋움; font-size:8pt;"></select>
</div>
<embed type='application/x-mplayer2' id="MediaPlayer" autostart="1" Volume="0" style="Display:none" width="50" height="20" pluginspage="http://www.microsoft.com/windows/windowsmedia/download/" >
</embed></td>
<td align="right">
<img src="Skin/DefaultGray/skindata/BtnSoundprev.gif" style="cursor:hand" onfocus="this.blur()" title="이전곡" onClick="Selector('prev');">
<img src="Skin/DefaultGray/skindata/BtnSoundplay.gif" style="cursor:hand" onfocus="this.blur()" title="재생" onClick="Play();" >
<img src="Skin/DefaultGray/skindata/BtnSoundStop.gif" style="cursor:hand" onfocus="this.blur()" title="정지" onClick="Stop();">
<img src="Skin/DefaultGray/skindata/BtnSoundnext.gif" style="cursor:hand" onfocus="this.blur()" title="다음곡" onClick="Selector('next');">
<img src="Skin/DefaultGray/skindata/BtnSoundrandom.gif" style="cursor:hand" name=shuffle_button onfocus="this.blur()" onClick="Mode('shuffle')" title="무작위재생">
<img src="Skin/DefaultGray/skindata/BtnSoundrepeat.gif" style="cursor:hand" name=repeat_button onfocus="this.blur()" onClick="Mode('repeat')" title="반복재생">
<img src="Skin/DefaultGray/skindata/BtnSoundlist.gif" style="cursor:hand" name=list_button onfocus="this.blur()" onClick="PlayList()" title="음악목록">
</td></tr> </table>
</td></tr></table>
</body>
</html>