[html] 홈페이지에 배경음악 넣기 다중 재생 및 컨트롤 ( FRAMESET 사용 )

출처 : http://topschool.co.kr/topboard/index.php

홈페이지에 배경음악을 넣는 방법 입니다. 

페이지 이동시 음악이 처음부터 다시 재생 되는것을 막기 위하여 <FRAMESET> 를 사용합니다.

먼저 index.htm 을 만들고  아래 소스를 추가합니다. 

1. 인덱스 페이지를 만든다

<!-- index.htm 페이지 시작 -->

<FRAMESET border=0 cols="*" frameBorder=no frameSpacing=0 rows="0,*">
    <FRAME name="soundMenu" noResize scrolling=no src="/bgsound.htm" leftmargin="0" marginwidth="0" topmargin="0"  marginheight="0">
    <FRAME name=mainview noResize scrolling=auto src="/main.htm" leftmargin="0" marginwidth="0" topmargin="0"  marginheight="0">
</FRAMESET>

<!-- bgsound.htm 페이지 끝 -->

2. 배경음악이 돌아갈 패이지를 만들며, 다중 음악이 가능하도록 asx 파일을 만든다

bgsound.asx 파일 내용 (asx 파일 만드는 방법은 메모장에 써놓고 저장할때 asx 확장자로 저장하면된다)

http://topschool.co.kr/Track1.wav
http://topschool.co.kr/Track2.wav
http://topschool.co.kr/Track3.wav


<!-- bgsound.htm 페이지 시작 -->

<embed id="bgsound" src="bgsound.asx" loop=true> 

<!-- bgsound.htm 페이지 끝 -->

여기까지 했다면 배경음악 3가지가 순서대로 돌아갈 것이다.

3. 이제 배경음악을 제어 하는 방법입니다. (아래 소스를 원하는 곳에 추가 )

<!-- main.htm 페이지 끝 -->

<a href="javascript:soundOn();">재생</a>
<a href="javascript:soundOff();">끄기</a>
<a href="javascript:soundPrev();">이전곡</a>
<a href="javascript:soundNext();">다음곡</a>

<script>
function soundOff() {  
  parent.document.frames["soundMenu"].document.getElementById("bgsound").stop(); 
}

function soundOn() {  
  parent.document.frames["soundMenu"].document.getElementById("bgsound").play(); 
}

function soundNext() {  
  parent.document.frames["soundMenu"].document.getElementById("bgsound").next(); 
}

function soundPrev() {  
  parent.document.frames["soundMenu"].document.getElementById("bgsound").previous(); 
}
</script>

<!-- main.htm 페이지 끝 -->