윈도우미디어 플레이어 음악 태그

윈도우미디어 플레이어 음악 태그

최근 미디어 기술이 발달하여 다양한 포맷의 음악들이 만들어지고 있습니다. 자신의 홈페이지에 음악 하나쯤은 삽입해 둘 정도로 선호하고 있는 태그 중 하나가 음악태그입니다.
홈페이지에 잔잔한 음악이 흐르는 가운데 웹 정보여행을 하면 즐거움이 배가 되겠지요. 음악태그의 종류와 태그의 사용방법에 대해서 알아보겠습니다. 윈도우미디어 플레이어11를 기준으로 설명 합니다. 11버전 이하일 때 스킨모양이 약간 다를수있으며, 태그소스도 일부 변경될 수도 있습니다.
그리고 몇 가지 부주의 때문에 미디어플레이어가 제대로 작동이 안 되는 경우가 있습니다. 그중에 " " 표시와 띄워쓰기를 잘못해서 작동이 안되는 경우가 대부분입니다. 항상 " "표시와 띄어쓰기에 주의하세요.
아래의 음악파일 주소를 붙여 넣어 연습해보세요.

http://club.catholic.or.kr/capsule/blog/download.asp?userid=769269&seq=9&id=49962&strmember=u90120&filenm=magic.wma

기본태그 설명
ㆍloop="true" (무한 반복 재생)
ㆍloop="infinite" (무한 반복 재생)
ㆍloop="1" (무한 반복 재생) 간혹 -1이라고도 하는데 그냥 1만 입력하면 됩니다.
(주의) loop="숫자입력" (embed src 태그에서 많은 사람들이 숫자를 입력한 만큼 재생한다고 알려졌습니다. 이건 잘못 알려진 부분입니다. 숫자를 넣는다고 해서 숫자만큼 재생이 안됩니다. 유의하세요. 자세한 내용은 아래의 태그의 속성을 참조하세요.)

ㆍloop="false" (한 번만 재생)
ㆍloop="0" (한 번만 재생)

ㆍvolume="숫자입력" (볼륨의 값은 -10000부터 0 까지 입력 가능)
(설명 팁) : 볼륨값 "0" 이 최대음값 입니다.

ㆍenablecontextmenu="1" (마우스 오른쪽버튼 클릭 허용)
ㆍenablecontextmenu="0" (마우스 오른쪽버튼 클릭 금지 설정)

ㆍhidden="true" (미디어플레이어를 화면에서 숨김) ---> 홈피나 블로그의 배경음악으로 많이 사용.
ㆍhidden="false" (미디어플레이어를 화면에 보이게 함)

ㆍAutostart="true" (자동재생 기능 설정 - ON)
ㆍAutostart="false"  (자동재생 기능 미설정 - OFF)

ㆍshowstatusbar="true" (하단 음악재생의 상태, 음악파일의 정보표시를 설정 활성.)
ㆍshowstatusbar="false" (하단 음악재생의 상태, 음악파일의 정보표시를 설정 미활성)

ㆍshowcontrols="true" (사용자가 제어할 수 있는 버튼들의 표시를 설정, 컨트롤바, 재생버튼, 일시멈춤버튼 등등...)
ㆍshowcontrols="false" (사용자가 제어할 수 있는 버튼들의 표시를 설정 미표시)

※ 각각의 단독으로 버튼들을 설정 가능

ㆍshowpositioncontrols="true"   ( 이전곡, 다음곡 버튼표시 설정.)
ㆍshowpositioncontrols="false"  ( 이전곡, 다음곡 버튼 미표시 설정.)

ㆍshowaudiocontrols="true"  (볼륨컨트롤의 표시설정.)
ㆍshowaudiocontrols="false"  (볼륨컨트롤의 표시 미설정.)

ㆍshowtracker="true"  (현재 곡이 진행되고 있는 상황을 표시하는 트랙바 표시설정.)
ㆍshowtracker="false"  (현재 곡이 진행되고 있는 상황을 표시하는 트랙바 표시 미설정.)

<태그의 속성정리>

1.SRC
src 속성은 원본을 의미하는 'source'라는 의미의 속성이 되겠습니다.
이곳에는 원본 미디어 파일의 주소(URL)가 들어가게 됩니다. 만약 동영상이나 플래시 파일이 제대로 실행되지 않고 멈추어 있다면, 제일 먼저 이곳(SRC)의 링크에 이상이 있는 것은 아닌가~ 확인을 해보셔야 합니다. 

2. WIDTH, HEIGHT
모든 태그에서 거의 공통으로 사용하는, 넓이(width) 와 높이(height)는 더는 설명해 드리지 않아도 충분히 잘 알고 계실 것이라고 생각합니다.이 속성들은 미디어 파일이 화면에 나타나는 크기를 의미합니다. (단위가 픽셀(Pixel)이라는 것. 노파심에 다시 한번 살짝 말씀드려 봅니다.) 

3. LOOP
'반복할지의 여부'를 의미하는 loop 속성은 해당 미디어 파일이 연속적으로 실행되게 할지, 아니면 단 한 번만 실행되게 할지를 결정하는 속성입니다. 만약 여기에 true 또는 1이라는 값을 넣으면 끊임 없이 무한정 반복되며, false 또는 0 의 값을 넣게 되면 단 한 번만 실행하고 멈추게 됩니다. 참고로 이 속성을 지정하지 않았을 때의 기본값은 false 입니다. 또 한가지.. 만약 loop 속성에 0이 아닌 다른 숫자를 넣으시면 marquee태그처럼 그 숫자만큼 적용되는 것이 아니고 무한 반복됩니다. 혼동하시면 안 되겠지요? (태그지정을 하지 않으면 기본적으로 한 번만 재생.) 

4. AUTOSTART
이 속성은 말 그대로 '자동으로 시작되게 할 것인지'의 여부를 결정합니다. LOOP와 마찬가지로 true 나 1의 값을 넣으면 자동으로 미디어 파일이 실행되며, false 나 0 의 값을 넣으면 시작 버튼을 누르기 전까지는 실행 되지 않습니다. 그리고 이 속성값을 지정하지 않았을 때의 기본값은 true 입니다. 따라서 이 속성값이 없는 경우에는 해당 미디어 파일이 자동으로 실행됩니다. 

5. HIDDEN
hidden 속성은 이 미디어 파일을 보여줄 것인지 숨길 것인지를 결정합니다.
예를 들어 동영상의 경우, 영상을 숨기고 소리만 들려주고 싶다던가.. 여러가지 이유로 화면을 숨기고 싶을 때 이 속성에 true값을 적용합니다. (이때는 1의 값을 적용하면 안 되는 것 같더군요. TRUE 를 사용하실 것을 권장합니다.) 보여주고 싶다면 이 속성의 값에 false 를 사용하시면 되지만, 이 속성의 기본값이 false 이기에 굳이 이 값은 넣어주지 않아도 무방할 것 같습니다. 

6. VOLUME
미디어 파일의 소리(볼륨)의 크기를 지정합니다.
최대 크기의 볼륨으로 동영상을 감상하고 싶다면 이 속성에 0 값을 지정하면 되고, 마이너스 값이 점점 커질수록 볼륨의 크기는 점점 줄어들게 됩니다. (제가 제 컴퓨터에서 Windows Media Player 11로 테스트해본 결과로는 0 이 최대의 볼륨이고, -3400 정도가 최소의 볼륨인 것 같습니다만.. 뭐, 이 결과는 환경에 따라 달라질 수 있으니까요. 최대 볼륨이 0이라는 것만 기억하시기 바랍니다.)
만약 이 속성에 양의 정수 값을 입력하면 볼륨은 절반 정도로 자동 조절됩니다. 또한, 이 속성값을 지정하지 않았을 때에도 볼륨은 절반 정도가 되는 것 같습니다. 

7. MUTE
mute. 즉, '음소거'라는 기능을 여러분께서는 잘 아실 겁니다.
(TV 리모컨을 자주 만지는 분이시라면 더더욱 잘 아실 것 같습니다.) 이 속성은 말 그대로 '완전히 소리를 나오지 않게 하는' 속성인데요.
이 속성 값에  true 또는 1의 값을 입력하면 '음 소거' 된 상태로 재생 되고, false 또는 0 의 값을 입력하면 정상 볼륨으로 파일이 재생됩니다. 물론 이 속성의 기본값은 false입니다. 소리는 정상적으로 나오게 되지요. 

8. PLUGINSPAGE
HTML 페이지에서 embed 태그는 멀티미디어 파일을 끼워 넣기 위한 태그이며, 플러그인 프로그램이 설치되어 있어야만 파일이 실행된다는 말씀을 위에서 드렸는데요. 플러그인 프로그램이 설치되어 있지 않은 사용자들을 위하여 그 플러그인 프로그램을 설치할 수 있도록 해당 플러그인을 제공하는 사이트의 주소(URL)를 알려주는 속성이 바로 이 PLUGINSPAGE 속성이 되겠습니다. 즉, 이 속성은 플러그인 프로그램이 설치되어 있지 않은 사람들을 위한 속성입니다. 

9. SHOWCONTROLS
이 속성은 동영상을 실행할 때 아래 그림과 같은 재생, 멈춤, 볼륨 조절 등의 컨트롤 패널을 보여줄 것인지를 결정하는 속성입니다..
이 속성에  true  또는 1 의 값이 들어가면 이 컨트롤이 보여지게 되며, false 또는 0 의 값이 들어가게 되면 컨트롤은 사라집니다.
(대신 이 컨트롤의 크기만큼 화면의 크기가 늘어나게 됩니다.) 이 속성의 기본값은 TRUE 이므로, 기본적으로 이 컨트롤은 보여지게 됩니다. 

10. SHOWSTATUSBAR
SHOWSTATUSBAR 속성은 동영상을 실행하는 경우에 아래 그림과 같은 상태 창이 보여게 할 것인지 아닌지를 결정하는 속성입니다.
이 속성에 true 또는 1의 값이 들어가면 상태창이 보이게 되며, false 또는 0의 값이 들어가게 되면 상태창은 보여지지 않게 됩니다.
이 속성의 기본값은 FALSE이므로 기본적으로 상태 창은 보여지 않습니다. 

지금까지 말씀드린 속성이 embed 태그를 사용할 때 유용하게 사용되는 속성들입니다.
물론 이 외에도 많은 속성이 있습니다만, 위의 속성들만큼 자주 쓰이지는 않는 것 같습니다.
(더 많은 속성들이 궁금하시면 관련 서적이나 사이트들을 참고하시기 바랍니다.)

참고삼아 말씀드리자면... 위에서 설명해드린 속성은 대부분 음악과 동영상에 관련된 속성들입니다.
플래시와 관련된 속성들은 보통 SRC 와 WIDTH, HEIGHT 속성 정도를 사용합니다. (아래 참조) 

<공식조합>
자 이제부터 본격적으로 공식을 조합해볼까요!
위에 있는 태그용어를 다 외울 필요는 없지만, 기본적으로 어떻게 적용이 되는지는 알고 있어야 합니다.
기본공식: <embed src="파일주소입력" 태그소스 적용>

설명팁!
"파일주소입력"은 음악파일이나 동영상파일이 저장된 주소를 말합니다.
음원이나 영상을 보고 듣기위해서 먼저 인터넷에 파일을 올려야만 가능합니다. 올리는 방법은 많지만 한가지 예로 블로그나 홈피같은곳을 이용해도 됩니다.또 한곳은 http://www.dcinside.com/도 있습니다.여기말고도 이런 계정을 올릴수있는 공간은 많으니 여러분들이 찾아보세요.

음악태그

윈도우미디어 플레이어의 스킨색상 (검정색: gray)

 
기본태그:  <embed src="파일주소입력" style="FILTER:gray">

 style="FILTER:gray 이부분을 삭제해도 됩니다.

윈도우미디어 플레이어의 스킨색상 (회색: xray) 

기본태그:  <embed src="파일주소입력" style="FILTER:xray">

설명팁!
위의 색상지정태그를 사용하지 않을경우 기본적인 값은 검정색으로 표시됩니다.
그리고 윈도우미디어플레이어 10에서는 xray 검정색이고,gray 회색 입니다.
 

윈도우미디어 플레이어를 일부버튼만 보이게 하기
기본태그:  <embed src="파일주소입력" width="67" height="45">

 

 (width=67)     
    
 

 (width=100)   
             
 

 (width=145)

설명팁!
width(넓이), height(높이) 사이즈의 수치를 조정해 원하는 크기를 만들수 있습니다.이때 height(높이)는 "45"로 고정해주세요. 45수치가 넘어가면 동영상화면이 나옵니다.작은스킨에서 영상을 볼일은 없겠죠.그리고 스킨사이즈를 작게할경우 showstatusbar="true" 소스태그는 사용하지 않는게 좋습니다.사용한다고 해도 정보를 자세히 볼수없으니 깐요.

응용편 (윈도우미디어 플레이어를 일부버튼만 보이게 하고 스킨색상도 바꾸기)

 
기본태그:  <embed src="파일주소입력" width="100" height="45" style="FILTER:xray">
설명팁!
위의 내용2가지를 모두 응용한것으로 색상과 크기를 바꿔 적용. 

응용편2 (윈도우 미디어 플레이어 모양변형)

 
검정색 스킨이 적용된 모습

회색 스킨이 적용된 모습

기본태그

<EMBED style="filter: alpha(style=2, opacity=100, finishopacity=0) gray()" src="음악파일주소입력" width="70" height="25" AUTOSTART="1" loop="1" volume="0" enablecontextmenu="0">

<설명팁!>
opacity=75 (스킨색상의 짙음과 옅음 효과:숫자가 높을수록 스킨의 색상이 짙어진다 "수치100 이 최대농도")
finishopacity=0 (스킨의 모양을 원래의 사각모양으로 할것인지 아니면 지금처럼 타원형의 스타일로 할것인지 정하는 태그 " 숫자가 작을수록 타원형으로 됨.  0~100 이 있음)
회색: xray (윈도우미디어 플레이어11를 기준으로)
검정색: gray (윈도우미디어 플레이어11를 기준으로)  

응용편3 (윈도우 미디어 플레이어 모양변형)

검정색 스킨이 적용된 모습

 
회색 스킨이 적용된 모습 

기본태그

<EMBED style="filter: alpha(style=2, opacity=100, finishopacity=0) gray()" src="음악파일주소입력" width="171" height="25" AUTOSTART="true" loop="1" Volume="0" enablecontextmenu="0">

<설명팁!>
opacity=75 (스킨색상의 짙음과 옅음 효과:숫자가 높을수록 스킨의 색상이 짙어진다 "수치100 이 최대농도")
finishopacity=0 (스킨의 모양을 원래의 사각모양으로 할것인지 아니면 지금처럼 타원형의 스타일로 할것인지 정하는 태그 " 숫자가 작을수록 타원형으로 됨.  0~100 이 있음)
회색: xray (윈도우미디어 플레이어11를 기준으로)
검정색: gray (윈도우미디어 플레이어11를 기준으로)  

응용편4 (윈도우 미디어 플레이어가 좌우로 이동하는 스킨)
 
검정색 스킨이 적용된 모습

 
회색 스킨이 적용된 모습 

기본태그

<marquee scrollamount=2 behavior="alternate" width="200px"><EMBED style="filter: alpha(style=2, opacity=100, finishopacity=0) gray()" src="음악파일주소입력" width="171" height="25" AUTOSTART="true" loop="1" Volume="0" enablecontextmenu="0"></marquee>

 <설명팁!>
marquee scrollamount=1 (숫자가 높을수록 움직이는 속도가 빨라진다.하지만 최대 숫자 5를 넘지않게 하세요)
behavior="alternate" (좌,우로 움직이게 하는 명령태그)
width="200px" (좌,우로 이동하는 거리를 설정하는 명령어 숫자가 많을수록 화면의 좌우로 많이 이동한다.)

 재생, 정지, 음소거, 볼륨 버튼만 보이게 하기
 

기본태그: <embed src="파일주소입력" invokeURLs="false" style="FILTER:gray(); width=178px; height=45px" type="text/plain; charset=EUC-KR" ShowPositionControls="False">
<설명팁!>
위의 파란색 태그소스는 없어도 됩니다.

곡정보 나타나게 하기 (음악파일 정보표시 활성)

 
기본태그:  <embed src="파일주소입력" showstatusbar="true">
설명팁!
showstatusbar="true" 곡명을 나타내게 하는 태그용어 입니다.

음악파일 정보만 표시

 
기본태그:  <embed src="파일주소입력" showstatusbar="true" showcontrols="false"> 

그라이데이션 적용 (희미하게 표시하기)

 
기본태그:  <embed src="파일주소입력" style="FILTER: gray()alpha(opacity=10,style=1,finishopacity=90)" Volume="0" loop="-1">

기본태그:  <embed src="파일주소입력" style="FILTER: xray()alpha(opacity=90,style=1,finishopacity=10)" Volume="0" loop="-1">
설명팁!
opacity, finishopacity 부분 수치에 따라 오른쪽과 왼쪽 희미해지는 농도가 달라진다.

응용태그:
<embed src="파일주소입력" style="BORDER-RIGHT: #cecece 5px ridge; BORDER-TOP: #cecece 5px ridge; FILTER: invert(); BORDER-LEFT: #cecece 5px ridge; BORDER-BOTTOM: #cecece 5px ridge" style="FILTER:gray">
설명팁!
3px 앞에 붙은 숫자가 테두리 두께이다. 두껍게 바꾸고 싶으면 높은 숫자로 입력하면 됩니다.
위,아래,왼쪽,오른쪽 4방향의 수치를 변경하세요.

그림이미지와 미디어플레이어 합치기
 

기본태그: 
<table border=0 bordercolor=white cellSpacing=0 cellPadding=0 width="300" height="200">
<TR>
<TD><img src="이미지파일 주소입력"></TD>
</TR>
<TR>
<TD>
<embed src="파일주소입력" width="300" height=28 style="FILTER: gray(); width:300px; height: 66px" showControls="true" volume="0" loop="false" showtracker="true" showstatusbar="true"  enablecontextmenu="0">
</TD>
</TR>
</table>

1. 일단 이미지를 인터넷에 올려야 한다.(JPG , GIF)
물론 인터넷에 있는 이미지의 주소를 가지고 와도 되지만 시간이 지나면서 이미지가 없어지는 경우가 많다. 때문에 가능하면 자신이 직접 이미지를 웹페이지에 등록을 해두는것이 좋은 방법이다.(위 내용참조)
2.위 소스에서 붉은색 width, height 부분에 이미지의 가로와 세로의 사이즈를 정해주면됩니다.이미지크기수정은 포토샵에서 이미지크기를 조절합니다.
파란색 부분은 미디어플레이어의 크기로 width(넓이)만 변경해주면 됩니다.
<기본동영상 사이즈치수>
width=300
width=350
width=400  

다양한 태그를 적용한  소스값 보기 <응용편>

자동반복재생, 볼륨최대음,음악파일 정보표시 활성,오른쪽마우스버튼클릭 금지설정으로 듣기
<embed src="파일주소입력" volume="0" loop="1" showstatusbar="true" enablecontextmenu="0">

재생버튼을 눌러야만 재생, 볼륨최대음, 자동반복재생, 음악파일 정보표시 활성설정으로 듣기
<embed src="파일주소입력" volume="0" loop="1" showstatusbar="true" autostart="false">

윈도우미디어플레이어 숨김설정, 자동재생, 볼륨최대음,자동반복설정으로 듣기(배경음악으로 사용할 때..)
<embed src="파일주소입력" volume="0" loop="1" hidden="true" autostart="true">

윈도우미디어플레이어 숨김설정, 자동재생, 볼륨최대음,1회만 재생설정으로 듣기
<embed src="파일주소입력" volume="0" loop="0"hidden=true autostart="true">

윈도우미디어플레이어 숨김설정,볼륨최대음,자동재생 설정으로듣기 (이방법은 일종의 편법으로 미디어플레이어를 크기를 점형태로 아주작게 만든방법임)
<embed src="파일주소입력" volume="0" autostart="true" width="1" height="1">

윈도우미디어플레이어 숨김설정,자동반복설정으로 듣기
<embed src="파일주소입력" Loop="true" hidden="true">

윈도우미디어플레이어 숨김설정, 자동재생, 볼륨최대음, 자동반복 설정으로 듣기
<embed src="파일주소입력" volume="0" loop="infinite" hidden="true" autostart="true">