음악 embed 태그 익히기

[진(본부장)]

embed 태그를 사용할 때 미디어플레이어의 일반적인 제어 방법
(embed 태그안에 필요시 각 속성들을 독립적으로 넣어 준다)
<embed src="음악주소" loop=-1 volume=0 속성="값" 속성="값">

미디어 콘트롤(제어) 부분에 관한 속성과 값
콘트롤 내용	속성과 표시 값	효 과	비 고
Player(미디어)의 나타냄과 숨기기	hidden=false	나타남	속성을 별도 표시 안해도 같은 효과
	hidden=true	숨김	width=0 height=0 도 같은 효과(또는 "1" )
Player(미디어)의 크기는 width="수치값" 과 height="수치값" 으로 조정 기본크기는 약 300*45 정도(미디어크기 별도 지정안할 때 크기)
상태bar 및 콘트롤부의 표시	showstatusbar=0	상태bar만 나타남
	showstatusbar=1	콘트롤部도 나타남
동영상의 콘트롤부 전체를 안보이게 하는 속성은 showcontrols=0
반복재생의 지정	loop=-1	무한반복	loop=true도 무한반복
	loop=숫자	숫자만큼 반복	반복이 안될 때도 있슴
	loop=false	1회재생	미지정시도 1회재생
자동 및 수동재생의 지정	autostart=true	자동재생	autostart를 지정안해도 같은 효과
	autostart=false	수동재생
음량의 조절 (0 에서 -10000까지 사용)	volume=0	가장 큰 소리로 재생	미지정시 중간 정도
	volume=-"수치"	"수치"가 클수록 작음
	음소거	mute=1(음소거)
미디어에 오른쪽 마우스 금지	enablecontextmenu="false" 또는 enablecontextmenu="0"
미디어 각 표시부의 나타냄과 숨기기의 속성과 값(미지정시는 기본값)
표시부	속성	나타내기 값	숨기기 값
재생 상태바	showStatusbar	true	false(미지정)
표시정보부	showDisplay	true	false(미지정)
볼륨 조절부	showAudioControls	true(미지정)	false
곡선택부	showPositionControls	true(미지정)	false
트랙부	showtracker	true(미지정)	false

 Embed 태그내 각종 명령 익히기

---

되도록이면 Daum 블로그 내에서 활용 가능한 것으로

예를 들도록 합니다. 다른 곳에선 다른 기준이 있을 수 있습니다.

사실은 EMBED 태그를 아래와 같이 간단하게 작성해도

〈EMBED src="음원주소"〉

태그가 매우 심플(간단^^) 하죠? ^^

이렇게 간단히 작성해도 음악을 들려 줄 수 있습니다.

그러나,

Daum 블로그에서는 길이와 높이를 꼭 정해 주는 것이 좋습니다.

그렇게 하지 않으면
Daum 블로그 프로그램이 자동으로 태그를 삽입 하는 과정에서

화면이 자리잡기까지 시간이 걸리게 되고

오류로 갑자기 창이 닫힐 수도 있습니다.

블로그 독자가 게시판을 여는데 내 뜻과는 달리

창이 닫혀 버리면 귀찮은 생각에 짜증냅니다.^^

그러므로 아래의 예가
Daum 블로그에서는 가장 쉽고 간단한 태그라고 봐야 합니다.

〈EMBED src="음원주소" width=300 height=45〉

약간의 지식을 더하여 Daum 블로그 글쓰기 프로그램이
태그를 잘못 삽입하지 않도록 아래와 같이 정확하게 적어준다면

길이와 높이를 정해 주지 않아도 간단한 면에서 좋습니다.

'이건 이런 음악이다' 하고 미리 미디어 형식(type)을 정해주는 것 입니다.

이유는 다시 설명할 기회가 있을 겁니다.

음원주소의 파일이 xxx.wma로 끝날 경우
type=audio/x-ms-wma

〈EMBED src="음원주소.wma" type=audio/x-ms-wma〉

〈EMBED src="음원주소.asf" type=audio/x-ms-asf〉

〈EMBED src="음원주소.mp3"  type=application/x-mplayer2〉

위와 같은 형식으로 작성할 경우, 길이와 높이는 자동으로

 width=300 height=45 크기로 보여집니다. 

오류가 발생할 확률도 적어집니다.

이렇게 간단하게 작성해도 되는데
지금 우리들이 볼 수 있는 태그들은 뭐가 그리 복잡하냐?

다 이유가 있을 것 입니다.

세상 모든 것, 이유없이 만들어 진 게 없다는데. 알아볼까요?

위의 간단하게 작성한 미디어플레이어를 올렸더니...

〈EMBED src="음원주소.wma" type=audio/x-ms-wma〉

이렇게 올렸더니 말이죠.

다음과 같은 요구사항들이 있군요.

해결방법도 같이 봅니다.

1. 소리가 작아요. 좀 더 크게 안돼요?

volume="0"

볼륨을 최대로 하라. "0"이 최대음, 최소음은 "-10000" 세밀하게 조정 가능. volume="0" 라는 명령어 자체가 없으면 중간 정도 음이고 숫자로는 "-6000" 정도가 됩니다.

〈EMBED src="음원주소.wma" type=audio/x-ms-wma

volume="0"〉

2. Play 버튼을 눌러야 음악이 나오도록 만들어 주세요.

autostart="false"

자동으로 시작하지 못하게 함. Play를 눌러야만 노래가 나오게 하려면 "false"라 적고, 게시물을 열기만 하면 자동으로 노래가 나오게 하려면 "true"라고 적으면 되는데, "false" 대신 "0", "true" 대신 "1"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="false"〉

강조 ^^, EMBED 태그 내에서는 항상
"false" 대신 "0", "true" 대신 "1"을 넣어도 같은 효과입니다.

3. 계속 반복해서 노래를 들려주고 싶어요.

loop="-1"

노래 무한 반복 "-1"은 노래 끝나면 다시 계속 반복 (무한) "3"이라고 넣으면 당근, 3번. ^^ loop="-1"이라는 명령어 자체가 없으면 딱 한 번만 실행

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="false" loop="-1"〉

4. 스테레오의 오른쪽 소리만 더 크게 할 수 없나요?

balance="10000"

오른쪽 스테레오 최대로 하라. balance="10000" 명령어가 없으면 좌,우 같은 음높이. -10000이면 최대 왼쪽이고 10000이면 최대 오른쪽

〈EMBED src="음원주소.wma" type=audio/x-ms-wma

volume="0" balance="10000"〉

이런 Embed 태그 내의 명령어들은

필요에 따라 복합적으로 사용할 수 있습니다. - 밑줄 쫘악! ^^

예를 들면 여기 나온 명령어들을 모두 사용해도 되고

필요한 명령어만 골라 사용해도 된다는 말 입니다.

맘대로 뒤섞어 사용해도 아무 문제 없습니다.

5. 미디어 형식을 정해줘야 하나요?

type=audio/x-ms-wma type=audio/x-ms-asf type=application/x-mplayer2

미디어형식을 미리 정해 주는 것이 좋습니다 파일의 확장자가 .wma로 끝나면 type=audio/x-ms-wma 파일의 확장자가 .asf로 끝나면 type=audio/x-ms-asf 파일의 확장자가 .mp3로 끝나면 type=application/x-mplayer2

카페나 블로그, 각종 게시판의 글쓰기 프로그램도

사람이 만드는 거라 약간씩의 오류가 있을 수 있습니다.

Daum 블로그의 경우도 블로거가 제대로 작성하지 못한

태그를 자동으로 완성시켜 올려주는 기능이 있습니다만, 미디어 형식을

원래대로 구분하지 못하여 게시물을 열 때, 오류가 발생하는 경우가 종종 있습니다.

형식을 미리 정해 주면 이런 오류를 방지할 수 있습니다.

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="false" loop="-1"〉

6. 미디어 파일 정보를 보여주고 싶어요.

showstatusbar="true"

플레이어 상태바에 파일정보와 동작상태를 보여줍니다. 명령어 자체가 없거나 "false"이면 보여주지 않게 됩니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="true" loop="-1" showstatusbar="1"〉

7. 콘트롤 바가 필요 없거든요.

showcontrols="0" showstatusbar="1"

플레이어의 각종 조절기능을 없앱니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="true" loop="-1" showstatusbar="1" showcontrols="0"〉

8. 소리크기 조절기능을 없앱시다.

showaudiocontrols="0"

소리크기 조절기능을 없앱니다. 가로폭을 줄여야 할 때도 유용 합니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="true" loop="-1" showaudiocontrols="0"〉

9. 한 곡만 들려 드릴 겁니다.

showpositioncontrols="0"

곡 선택 기능(Position Control)을 없앱니다. 가로폭을 줄여야 할 때도 유용 합니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="true" loop="-1" showpositioncontrols="0"〉

10. [응용] 위 9번을 이용, 가로 길이를 170px로 줄여 봅니다.

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="1" loop="-1" showpositioncontrols="0" width=170〉

11. [응용] 위 8,9번의 소리 조절 기능과 곡 선택 기능을 다 없애려면?

showaudiocontrols="0" showpositioncontrols="0"

두 명령어 다 넣어 줍니다. 가로폭을 줄여야 할 때도 유용 합니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="true" loop="-1"
showpositioncontrols="0" showaudiocontrols="0"〉

12. [응용] 가로폭 최대한 줄이기

showpositioncontrols="0" showaudiocontrols="0"

위 11번 항목을 응용합니다. 가로폭을 대폭 줄여야 할 때 유용 합니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="0" loop="-1" width=73
showpositioncontrols="0" showaudiocontrols="0"〉

13. 트랙 바 없애기

showtracker="0"

트랙바를 없앱니다. 세로폭을 줄여야 할 때 유용 합니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="0" loop="-1" showtracker="0"〉

14. [응용] 가로 및 세로폭 최대한 줄이기

showaudiocontrols="0" showpositioncontrols="0" showtracker="0"

위 11와 13번 항목을 응용합니다. 가로 및 세로폭을 줄여야 할 때 유용 합니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="0" loop="-1" width=73 height=26
showpositioncontrols="0" showaudiocontrols="0" showtracker="0"〉

15. [응용] 가로 및 세로폭 줄이기 - 2

showpositioncontrols="0" showtracker="0"

위 9번과 13번 항목을 응용합니다. 가로 및 세로폭을 줄여야 할 때 유용 합니다. 명령어 자체가 없거나 "true"이면 보이는 기능입니다. "true" 대신 "1"을, "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="0" loop="-1" width=170 height=26
showpositioncontrols="0" showtracker="0"〉

16. 베껴가지 못하게 하고 싶어요.

enablecontextmenu=0

플레이어 위에 마우스를 올리고 우측버튼을 눌러도 속성을 볼 수 없게 만듭니다. 명령어 자체가 없으면 볼 수 있는 것이지요. "false" 대신 "0"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="1" loop="-1"
enablecontextmenu=0〉

17. 모든 걸 숨기고 싶어요.

hidden=1

플레이어를 감추고 음악만 흐르게 합니다. 명령어 자체가 없으면 보이는 기능입니다. "true" 대신 "1"을 넣어도 같은 효과

〈EMBED src="음원주소.wma" type=audio/x-ms-wma
volume="0" autostart="1" loop="-1" hidden=1〉

---

4) Style 명령으로 스킨 색깔 바꾸기

---

단원 들어가기 전에...
블로그와는 상관없지만 필요한 얘기 하나 하고 넘어갑니다.

"어? 음악을 올릴려고 했더니 왜 안되는거야?"

이런 얘기 많이 합니다.

특히 일부 포털 사이트나 카페에 음악을 올릴 경우

HTML로 살펴보면 이런 메시지가 끼어 있습니다.

〈EMBED src=[안내]태그제한으로등록되지않습니다-음원주소.wma

type=audio/x-ms-wma volume="0" autostart="1" loop="-1" width=300 height=45〉

이 경우에 대비해서, 아래와 같이

EMBED 태그 내 src= 앞에 style 명령어를 하나 집어넣어 줍니다.

〈EMBED style="width:300px; height:45px" src=음원주소.wma

type=audio/x-ms-wma volume="0" autostart="1" loop="-1"〉

눈치채셨겠지만, 가로와 세로 길이를

style 명령어로 정해준 것 뿐입니다.

자세히 보시면 아시겠지만

style 명령어는 기호나 단위를 제대로 적어주어야 합니다.

style="width：300px；height：45px"

 -------------------------------------------------------------------------------------------------------------

- EMBED 태그의 모든것 -

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)을 참고 하시면 됩니다.
기본적으로 사용할 소스는 Amazing Christmax에서 "Have Yourself Amazing A Merry Little Christmas - 이승철" 로 하겠습니다. Muzcast의 mp3 파일입니다. 혹시 mp3와 Windows Media Player가 연결이 안된 사용자를 위해서 <*embed> 태그로

재생할 mp3를 Windows Mediap Player로 연결 시키는 것을 추가 하겠습니다.

type="application/x-mplayer2"

위의 속성을 추가해주시면 됩니다. 마찬가지로 사용자가 ogg plug-in을 가지고 있다면 ogg도

위와 같이 type 속성을 넣어줌으로서 <*embed>로 재생 할 수 있습니다.
그러면 자주 쓰는 속성들을 살펴보겠습니다.

1. 반복하기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" loop=true><*/embed>

<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 loop="true"></EMBED>

loop=true, loop=-1, loop=infinity 를 넣어 주시면 무한 반복이 됩니다.

하지만 때로는 원하는 수 만큼 반복하고 싶을때가 있죠.

그럴때는 loop=3 식으로 원하는 회수를 넣어주시면 됩니다.

2. 자동재생 안하기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart=false><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false"></EMBED>

autostart= false 를 넣으시면 로딩 되었을때 바로 노래를 시작 안하고 사용자가 재생버튼을 눌러야 재생을 시작합니다.

기본값은 autostart= true 입니다.

3. 상태바 보이기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showstatusbar="true"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showstatusbar="true"></EMBED>

showstatusbar=true 를 넣게 되시면 왼쪽 예제에서 처럼 하단에 현재의 상태를 보여줍니다.

현재 정지된 상태라서 '정지'라고 표시되습니다. 음악 재생의 상태 뿐 아니라 음악파일에 정보가 있다면

삽입된 정보도 보여줍니다. 특별히 지정을 안할 경우 기본값은 false 입니다.

4. 콘트롤 바 숨기기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showstatusbar="true" showcontrols="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showstatusbar="true" showcontrols="false"></EMBED>

showcontrols= false 를 넣으시게 되면 예제에서처럼 상용자가 제어할 수 있는 버튼들이 몽땅 없어집니다. 

어디에 쓰일까 하시겠지만, 예제처럼 상태바만 보인다던지 혹은 뮤직비디오를 콘트를 바 없이 보이면 꽤 괜찮습니다.

5. 볼륨 콘트롤 감추기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showaudiocontrols="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showaudiocontrols="false"></EMBED>

사용자가 볼륨 조절을 못하도록 불륨 콘트롤을 감추는 것입니다. showaudiocontrols= false 를 넣으시면 됩니다.

6. 이전곡, 다음곡 버튼(Position Control) 감추기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showpositioncontrols="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showpositioncontrols="false"></EMBED>

사용자가 강제적으로 다음 혹은 이전 곡으로 넘어가는걸 방지 하기 위해서 쓰이겠죠.

멈출거 아니면 무조건 끝까지 들어라~ 하는거죠 뭐. showpositioncontrols= false 를 넣어주시면 됩니다.

7. 트랙바 감추기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showtracker="false"><*/embed>
  
<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showtracker="false"></EMBED>

현재 곡이 진행되고 있는 상황을 표시 하는 혹은 사용자가 임의로 원하는 곳으로 이동할 수 있게끔

해주는 트랙바를 감췄습니다. showtracker= false 를 넣어주시면 됩니다

8. 응용하기
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" showstatusbar="true" showaudiocontrols="false" showpositioncontrols="false" showtracker="false"><*/embed>

<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" showstatusbar="true" showaudiocontrols="false" showpositioncontrols="false" showtracker="false"></EMBED>

모든 옵션들은 서로 중복이 가능합니다. 그럼로 예제에서처럼 상태바를 보이면서

오디오콘트를을 감추고 포지션 콘트롤도 감추고 트랙바도 감추는걸 중복해서 쓸 수 있습니다.

9. 볼륨 및 기타
<*embed src="mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3" type="application/x-mplayer2" autostart="false" volume="0" balance="10000" ><*/embed>

<EMBED src=mms://218.38.55.217/HIGH_MP3_031218/326/326574.mp3 type=application/x-mplayer2 autostart="false" volume="0" balance="10000"></EMBED>

볼륨의 값은 -10000 부터 0 까지, 0이 최대입니다. 기본 값은 -6000 입니다.

초절정의 섬세한 불륨을 조절 할 수 있습니다.
또한 balance라는 값을 통해서 왼쪽과 오른쪽의 스테레오에 대한 값을 줄 수 있습니다.

-10000이면 최대 왼쪽이고 10000이면 최대 오른쪽 입니다.

[솔바람]

열공합니다..

[산사랑]

정보 감사합니다.

[난과산야초(이우종)010-3293-6201]

난과산야초 가족여러분 .. 너무 고맙습니다.
추석 고향길 안전운전하시고 다녀오시기 바랍니다.
추석지나고는 더욱더 열심히 하겠습니다.
풍성한 추석명절 되세요 !!!

[난향천리]

유익한자료 잘배우고갑니다.

[진(본부장)]

추석명절 차례, 성묘 잘지내셨습니까.
풍성한 한가위 되시고 안전운전하세요...

[순이사랑]

자료 감사합니다.

[대박지기]

자료 고맙습니다...

[심마니]

꽝꽝

[설중매]

좋은자료 즐감하고 갑니다.