태그공부 -7. Sound(사운드) 태그

<TABLE borderColor=#666666 cellSpacing=0 borderColorDark=white width=656 align=center borderColorLight=#666666 border=1> <TBODY> <TR> <TD borderColorLight=#666666 width=650 bgColor=#cccccc height=35> 7. Sound(사운드) 태그 </TD></TR> <TR> <TD width=650> 1. 음악 넣기 홈페이지에 배경음악을 흐르게 할 때와 뮤직비디오를 보여줄 때 사용하는 태그입니다. 음악파일에 따라 태그 사용도 조금씩 다르니 주의하시고, 그 외 사운드 태그의 속성들도 익혀보시기 바랍니다. <[안내]태그제한으로등록되지않습니다-bgsound src="음악주소">  주로 홈페이지의 배경음악을 넣는 데 사용하는 태그입니다.  mid 파일을 주로 사용하구요, wav파일이나 mp3 파일도 되긴 되는데 [안내]태그제한으로등록되지않습니다-bgsound 태그는 일단 음악파일을 다 다운로드 받으신 다음 재생을 시키기 때문에 mp3 나 wav파일은 시간이 오래 걸립니다. <embed src="음악주소"> [안내]태그제한으로등록되지않습니다-bgsound 태그가 익스플러로 전용으로 만들어진 것이라면 embed 태그는 네스케 이프에서 음악을 재생시킬 수 있도록 만들어진 태그입니다. 그런데 요즘은 익스플로워와 네스케이프 양쪽 다 잘된다고 합니다. embed 태그는 배경음악보다는 직접 음악을 재생시키는 데 많이 사용됩니다. 주로 채팅방이 되겠죠?  embed 태그의 특징은 [안내]태그제한으로등록되지않습니다-bgsound 태그와는 달리 파일을 다 다운받은 받은 다음에 재생하는 것이 아니라 다운로드와 동시에 실시간으로 재생시켜 줍니다. 또한 여러가지 속성이 따라 붙는데 속성에 대해서는 밑에서 설명하도록 하겠습니다. <a href="리얼 음악주소"target="new">아무 글자</a> ra, ram 파일을 불러올 때 사용되는 태그입니다. <a> 태그는 사운드 태그라기 보다는 링크태그인데, ra나 ram 파일을 링크시키고 밑줄이 그어진 글자를 클릭하면 리얼플레이어가 실행되면서 음악이 나오게 됩니다. 주로 채팅방에서 많이 사용됩니다. <object src="음악주소"> object 태그는 거의 사용하지를 않지만, 이것은 embed와 기능은 같고 새로운 자바창(?)이 뜨면서 거기에 음악 상태바나 동영상이 나타나게 됩니다. W3C에서 embed 보다는 object 를 사용할 것을 권하고 싶습니다. embed 태그의 속성 <embed src="음악주소" autostart="true/false hidden=true/false loop=true/false> *autostart는 true의 경우 로딩되자마자 자동 실행되고 false의 경우는 그 반대입니다. *hidden은 음악 조절판이 true의 경우 보이지 않고 반대로 false의 경우 보이게 됩니다. *loop는 true일 때는 음악이 계속 반복해서 나오고 false일 때는 한 번만 나오게 됩니다. *width=수치 음악조절판의 길이와 높이를 조절합니다. 뮤직비디오와 같은 동영상을 직접 바로 보여주려면 embed 태그에 뮤직비디오의 주소를 적어주고 넓이와 높이를 조정해주기만 하면 됩니다. [예] : <embed src="http://urikr.com/mv_janghun_solo_m.asf" width=320 height=240 autostart=true> </TD></TR> <TR> <TD width=650> 2. 예제 <TABLE borderColor=#999999 cellSpacing=0 borderColorDark=white width=535 align=center border=1> <TBODY> <TR> <TD width=277> <EMBED src=music_video/mv_janghun_solo_m.asf width=274 height=240 type='application/x-shockwave-flash'; charset=iso-8859-1" autostart="true" allowNetworking='internal' allowScriptAccess='sameDomain'> </TD> <TD width=248> *width=320 : 뮤직 비디오의 가로 넓이가 320 픽셀이라는 말입니다. *height=240 : 뮤직 비디오의 세로 길이가 240 픽셀이라는 말입니다. *autostart=true : 자동으로 플레이 시키라는 말입니다. "http://urikr.com/music_video/ mv_janghun_solo_m.asf" : 뮤직비디오의 경로입니다. 플래쉬 무비도 이와 동일한 방법으로 사용하시면 됩니다. </TD></TR></TBODY></TABLE> </TD></TR> <TR> <TD width=650> 3. embed 태그로 리얼오디오 파일 재생하기 리얼오디오 파일은 <a href="리얼오디오파일주소">클릭</a> ☜이런 방법으로 재생할 수 있습니다. 그러나 리얼오디오파일은 embed 태그로도 재생이 가능합니다. 단, 첫번째 방법과 마찬가지로 자신의 컴퓨터에 리얼플레이어가 설치되어 있어야 합니다. 만약 안 보이신다면 자신의 컴퓨터에 리얼플레이어가 설치 되어있지 않기 때문입니다. <TABLE borderColor=#999999 cellSpacing=0 borderColorDark=white width=536 align=center border=1> <TBODY> <TR> <TD width=242> <EMBED src=tage_page/music/xfile.rm width=242 height=60 type=audio/x-pn-realaudio-plugin controls="controlpanel,statusbar" allowNetworking='internal' allowScriptAccess='sameDomain'></TD> <TD width=220> <EMBED src=music/xfile.rm width=220 height=40 type=audio/x-pn-realaudio-plugin controls="controlpanel" allowNetworking='internal' allowScriptAccess='sameDomain'></TD> <TD width=60> <EMBED src=tage_page/xfile.rm width=35 height=25 type=audio/x-pn-realaudio-plugin controls="playbutton" allowNetworking='internal' allowScriptAccess='sameDomain'></TD></TR> <TR> <TD width=242> controlpanel,statusbar</TD> <TD width=220> controlpanel</TD> <TD width=60> playbutton</TD></TR></TBODY></TABLE> <embed src="리얼오디오파일주소" type="audio/x-pn-realaudio-plugin" height="수치" height="수치" controls="제어판 옵션"> 위의 방법은 embed 태그에 리얼플레이어 플러그인을 연결시켜 준 방법입니다. 위에 보시다시피 type="x-pn-realaudio-plugin" 을 넣어 주시면 됩니다. 그리고 제어판 옵션을 조절해줄 수 있으며 그 옵션마다 올바른 가로, 세로 수치가 있습니다. (꼭 그렇게 할 필요는 없음) 여기 삽입된 음악은 중복되는 관계로 실제 있는 주소가 아님을 양해하시기 바랍니다.   <DIV align=center> <TABLE borderColor=#666666 cellSpacing=0 borderColorDark=white width=504 borderColorLight=#666666 border=1> <TBODY> <TR> <TD align=middle width="50%" bgColor=#cccccc>옵 션</TD> <TD align=middle width="48%" bgColor=#cccccc>수 치</TD></TR> <TR> <TD width="50%"> All</TD> <TD width="48%"> width="275" height="125"</TD></TR> <TR> <TD width="50%"> stopbutton</TD> <TD width="48%"> width="35" height="25"</TD></TR> <TR> <TD width="50%"> playbutton</TD> <TD width="48%"> width="35" height="25"</TD></TR> <TR> <TD width="50%"> controlpanel</TD> <TD width="48%"> width="275" height="40"</TD></TR> <TR> <TD width="50%"> controlpanel,stautsbar</TD> <TD width="48%"> width="275" height="60"</TD></TR> <TR> <TD width="50%"> controlpanel,infovolumepanel</TD> <TD width="48%"> width="275" height="105"</TD></TR></TBODY></TABLE></DIV> 여기까지 Sound(사운드) 태그에 대해 설명드렸습니다. 다음은 Marquee(마퀴) 태그입니다. </TD></TR></TBODY></TABLE>