다른 프레임의 플레이어 제어」 - 타브리스

왼쪽의 배경 음악 재생기 처럼 만드는 방법입니다.

사실 왼쪽의 재생기는 가짜(?)라고 할 수 있고 진짜 재생기는 프레임으로 숨겨져 있습니다.
다른 프레임에 플레이어를 넣고 프레임 크기를 0으로 해서 숨겨 놓은 것이죠.
그리고 왼쪽의 가짜 재생기로 다른 프레임에 있는 재생기를 제어하는 것입니다.

그럼, 시노부 bgm을 예로 설명하겠습니다. 다른 플레이어도 동일한 원리로 수정할 수 있을 겁니다.

먼저, 주요 함수들과 노래 제목을 나타내주는 input 박스나 span 혹은 div의 id(혹은 name)를 알아봐야 됩니다. bgm.html 파일을

보니까..

닫기..

bgm.html
....
<input type="text" name="stitle"....
....
<a href="#" OnClick = "preTrack();" ......
<a href="#" OnClick = "stopTrack();" ......
<a href="#" OnClick = "play();" .......
<a href="#" OnCLick = "nextTrack();" .......
<a href="#" OnClick = "m_list();" .......
.....

시노부 bgm은 이전 곡은 preTrack(), 재생은 play(), 정지는 stopTrack(), 다음곡은 nextTrack(), 재생 목록은 m_list() 함수를 쓰고 제목은 stitle이라는 이름의 input박스로 나타내는 것을 확인할 수 있네요.

그럼, 이제 프레임을 만듭니다. 여기서는 재생기가 들어간 프레임의 이름을 bgm 내용이 들어간 프레임 이름을 main으로 했습니다.

frame.html..

닫기..

<frameset rows="0,*">
<frame src="bgm.html" name="bgm">
<frame src="main.html" name="main">
</frameset>

main.html 파일에는 알아서 좋게 재생기를 꾸밉니다. 저는 그냥 무대포로 -_-;;
그리고 몇가지 스크립트를 넣습니다.(설명은 소스에...)

main.html..

닫기..

.....
<table>
<tr>
<td>
<span id="title"></span>
</td>
</tr>
<tr>
<td>
<a href="javascript:prev();">이전 곡</a>
<a href="javascript:play()">재생</a>
<a href="javascript:stop()">정지</a>
<a href="javascript:next()">다음 곡</a>
<a href="javascript:list()">리스트</a>
</td>
</tr>
</table>

<script language="Javascript">
if ( parent.frames.bgm && parent.frames.bgm.document.getElementById("stitle") ){
// bgm 프레임이 있고, stiltle 객체가 있을 때만 실행합니다.
// 혹시 main.html 파일 단독으로 불려 졌을 때를 대비한 것 입니다.
document.getElementById("title").innerHTML =parent.frames.bgm.document.getElementById("stitle").value;
// bgm 프레임에 들어있는 stitle의 값을 읽어와 노래 제목을 바꿔줍니다.
}

function prev(){
if ( parent.frames.bgm && parent.frames.bgm.document.getElementById("stitle") ){
parent.frames.bgm.preTrack();
// 아까 알아두었던 함수들을 호출합니다.
}
}

function play(){
if ( parent.frames.bgm && parent.frames.bgm.document.getElementById("stitle") ){
parent.frames.bgm.play();
}
}

function stop(){
if ( parent.frames.bgm && parent.frames.bgm.document.getElementById("stitle") ){
parent.frames.bgm.stopTrack();
}
}

function next(){
if ( parent.frames.bgm && parent.frames.bgm.document.getElementById("stitle") ){
parent.frames.bgm.nextTrack();
}
}

function list(){
if ( parent.frames.bgm && parent.frames.bgm.document.getElementById("stitle") ){
parent.frames.bgm.m_list();
}
}
</script>
....

다음은 재생기의 소스를 약간 손 봐야 합니다.
소스를 보면 분명 노래 제목을 나타내주는 부분이 있을 겁니다.
그 부분에 main프레임에 노래 제목을 나타내주는 코드를 추가합니다.

bgm_system.js..

닫기..

......
......
document.form1.stitle.value = "♬ " + track_idx + ". " + songName[track];
if ( parent.frames.main && parent.frames.main.document.getElementById("title") ){
parent.frames.main.document.getElementById("title").innerHTML = "♬ " + track_idx + ". " + songName[track];
}
......
......

......
......
document.form1.stitle.value = "Shinobu BGM Player 1.5 [stopped]";
if ( parent.frames.main && parent.frames.main.document.getElementById("title") ){
parent.frames.main.document.getElementById("title").innerHTML = "Shinobu BGM Player 1.5 [stopped]";
}
.......
.......

이 파일은 시노부 bgm으로 간단하게 구현해 놓은 파일입니다.
한 번 보시길.

bgm_control.rar (10.7 KB)