삶은 예배다.

embed 태그를 음악을 재생하는 전용 태그로 잘못 알고 계신 분이 많습니다. 하지만, embed 태그는 음악만을 위한 것이 아닙니다. embed 라는 사전적 의미가 '끼워넣다' 이 죠. 말 그대로 문서에 끼워넣는 것입니다. 음악, 동영상, 플래쉬 파일 등을 말이죠.

예를 들어 유명한 '우유송' 플래쉬 애니메이션을 게시판에 올리려고 하면
<embed src="우유송주소.swf" width=500 height=400></embed>
식으로 올리시죠??

사실 정확히 따지고 보면 저렇게 하면 안됩니다. ^^; 만약 flash plug-in을 설치 안하신 분이 계시다면 못 보는거죠.
그런데, 왜 저렇게만 올려도 플래쉬 에니메이션을 볼 수 있을까요??
"우유송주소.swf"라는 파일에 header에 파일에 대한 정보가 있습니다. 이 파일은 플래쉬 파일입니다~~ 하고 알려주는 것이 있습니다.
그래서 embed 태그로 끼워넣기만 하면 익스플로러 브라우저가 알아서 플래쉬라고 인식을 하고 작동을 하는거죠.

음악도 마찬가지입니다. 보통 embed로 음악을 재생하는 확장자는 wma, asf, mp3, 등 이 있고...푸키뮤직의 경우는 확장자가 tm$입니다. 그러나, 푸키뮤직에서 임의의 확장자로 만든 것이지 속성자체는 wma를 divx로 코딩한 것입니다.
그러니, 확장자를 자신이 맘대로 고친다고 해서 ogg가 wma가 될 수는 절대 없습니다. 이런 일반적인 음악화일들을 재생시켜주는게 뭐가 있을까요?? 그렇습니다. 윈도우만 깔면 억지로 지우지만 않으면 누구나 깔려있는 medai player 입니다.
그러니 음악파일을 embed로 재생시키면 웹 브라우저(이하 익스플로러와 동일 취급하겠습니다.)에서 미디어플레이어로 재생을 시켜주는거죠.

그러면 embed 태그 뒤에 붙이는 여러 속성들은 당연히 미디어플레이어 오브젝트의 속성들을 붙여주면 되는거죠. ^^
미디어플레이어의 속성들은 MSDN(Microsoft Developed Netword)을 참고 하시면 됩니다.

기본적으로 사용할 소스는 잼씨엔씨 홍보동영상으로 하겠습니다. 
혹시 mp3와 Windows Media Player가 연결이 안된 사용자를 위해서 <embed> 태그로 재생할 mp3를 Windows Mediap Player로 연결 시키는 것을 추가 하겠습니다.

type="application/x-mplayer2"

위의 속성을 추가해주시면 됩니다. 마찬가지로 사용자가 ogg plug-in을 가지고 있다면 ogg도 위와 같이 type 속성을 넣어줌으로서 <embed>로 재생 할 수 있습니다.

그러면 자주 쓰는 속성들을 살펴보겠습니다.

1. 반복하기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" loop=true></embed>

예제
loop=true, loop=-1, loop=infinity 를 넣어 주시면 무한 반복이 됩니다. 하지만 때로는 원하는 수 만큼 반복하고 싶을때가 있죠. 그럴때는 loop=3 식으로 원하는 회수를 넣어주시면 됩니다. 반복되는 음악을 감상하시면서 밑으로 가시죠. ^^

2. 자동재생 안하기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" autostart=false></embed>

예제

autostart= false 를 넣으시면 로딩 되었을때 바로 노래를 시작 안하고 사용자가 재생버튼을 눌러야 재생을 시작합니다. 기본값은 utostart= true 입니다. 왼쪽의 예제의 경우 재생 버튼을 눌러야 재생이 시작 됩니다.

3. 상태바 보이기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" autostart="false" showstatusbar="true"></embed>

예제

showstatusbar=true 를 넣게 되시면 왼쪽 예제에서 처럼 하단에 현재의 상태를 보여줍니다. 현재 정지된 상태라서 '정지'라고 표시되습니다. 음악 재생의 상태 뿐 아니라 음악파일에 정보가 있다면 삽입된 정보도 보여줍니다. 특별히 지정을 안할 경우 기본 값은 false 입니다.

4. 콘트롤 바 숨기기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" autostart="false" showstatusbar="true" showcontrols="false"></embed>

예제

showcontrols= false 를 넣으시게 되면 예제에서처럼 상용자가 제어할 수 있는 버튼들이 몽땅 없어집니다. ^^; 어디에 쓰일까 하시겠지만, 예제처럼 상태바만 보인다던지 혹은 뮤직비디오를 콘트를 바 없이 보이면 꽤 괜찮습니다. ^^

5. 볼륨 콘트롤 감추기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" autostart="false"
showaudiocontrols="false"></embed>

예제

예제에서 오른쪽이 썰렁하죠? 사용자가 볼륨 조절을 못하도록 불륨 콘트롤을 감추는 것입니다. showaudiocontrols= false 를 넣으시면 됩니다. 소리를 안들리게만 재생하려고 할때(사용자가 콘트를을 못하니까..^^;) 혹은 소리를 무조건 최대로 하려고 할 때 쓰이면 되겠죠.

6. 이전곡, 다음곡 버튼(Position Control) 감추기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" autostart="false"
showpositioncontrols="false"></embed>

예제

이번엔 가운데가 썰렁합니다. ^^; 사용자가 강제적으로 다음 혹은 이전 곡으로 넘어가는걸 방지 하기 위해서 쓰이겠죠. 멈출거 아니면 무조건 끝까지 들어라~ 하는거죠 뭐. showpositioncontrols= false 를 넣어주시면 됩니다.

7. 트랙바 감추기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" autostart="false" showtracker="false"></embed>

예제

현재 곡이 진행되고 있는 상황을 표시 하는 혹은 사용자가 임의로 원하는 곳으로 이동할 수 있게 끔 해주는 트랙바를 감췄습니다. showtracker= false 를 넣어주시면 됩니다.

8. 응용하기

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv"
type="application/x-mplayer2" autostart="false" showstatusbar="true" showaudiocontrols="false" showpositioncontrols="false"
showtracker="false"></embed>

예제

모든 옵션들은 서로 중복이 가능합니다. 그럼로 예제에서처럼 상태바를 보이면서 오디오콘트를을 감추고 포지션 콘트롤도 감추고 트랙바도 감추는걸 중복해서 쓸 수 있습니다.

9. 볼륨 및 기타

<embed src="http://jamcnc.nayana.kr/video/jamcnc_web.wmv" type="application/x-mplayer2" autostart="false" volume="0" balance="10000"></embed>

예제

볼륨의 값은 -10000 부터 0 까지, 0이 최대입니다. 기본 값은 -6000 입니다. 초절정의 섬세한 불륨을 조절 할 수 있습니다(ㅡㅡ;)

또한 balance라는 값을 통해서 왼쪽과 오른쪽의 스테레오에 대한 값을 줄 수 있습니다. -10000이면 최대 왼쪽이고 10000이면 최대 오른쪽 입니다.

한번 재생을 해보세요. 오른쪽에서만 들립니다.

자료출처 : 늘 푸른집

자료편집/수정 : 잼씨엔씨