코딩이야기/HTML

HTML 강좌 11강 - HTML 태그 익히기#10 - 배경음악

완소줄기 2016. 2. 4. 18:33

HTML 강좌 11강 - HTML 태그 익히기#10 - 배경음악


이번에는 배경음악을 설정하는 태그에 대해 알아보겠습니다.

배경음악을 설정하는 태그는 두 가지가 있습니다.

하나는 사용자가 컨트롤 할 수가 없는 태그이고, 다른 하나는 사용자가 컨트롤을 할 수 있는 태그 입니다.

어떠한 사이트에 들어갔을 때 사용자가 원하지 않는 음악이 계속 흘러나온다면..

저라면 아마도 스피커를 끄던가 사이트를 꺼버릴듯 합니다.

그래서 보통 사용자가 컨트롤 할 수 있는 태그로 설정을 합니다.

하지만 두가지 태그 모두 알아보도록 하겠습니다.


1. 컨트롤러가 없는 태그 - bgsound

<bgsound src="확장자를 포함한 음악파일의 경로와 파일명" Loop="반복횟수 또는 "infinite">

이미지 태그와 사용법이 흡사합니다.

loop 속성은 반복횟수를 설정 합니다.

-1 이나 INFINITE 값으로 설정하면 무한반복 입니다.

그리고 bgsound 태그는 익스플로러에서만 작동합니다.

또한 용량이 큰 파일은 재생하는데 시간이 오래 걸릴수도 있습니다.



이렇게 코딩을 하고 테스트를 해봅니다.







보는바와 같이 문서에는 아무것도 보이지 않지만, 설정해 놓은 음악이 나옵니다.


2. 컨트롤러가 있는 태그 - embed

<embed src="확장자를 포함한 음악파일의 경로와 파일명">

사용법은 bgsound와 비슷합니다.

하지만 다음과 같이 많은 속성을 가지고 있습니다.

autostart="true/false" : true의 경우 페이지 로딩시 자동실행되고 false로 지정하면 플레이 버튼을 눌러야 음악이 재생됩니다. 

hidden="true/false" : 미디어 플레이어가 화면에 출력되는지 여부를 지정합니다. 

loop="true/false" : 음악의 반복여부를 지정합니다. 

width="수치" height="수치" : 미디어 플레이어의 크기를 지정합니다. 동영상 파일을 재생할때 이 값을 적절하게 조절해 주면 좋습니다. 

Showcontrols="value" : 미디어 플레이어, value 값은 0 , 1 

VOLUME = "수치값" : 플레이 되는 음악의 소리 크기를 임의로 설정하는 속성입니다. 

hspace="value" vspace="value" : 미디어 플레이어의 수직/수평 여백값을 조절하는 옵션입니다. 

mute=1 : 음소거 





위와같이 재생파일 경로만 지정해 놓고 실행을 해봅니다.





(차단된 컨텐츠를 허용해 주어야 합니다.)

위와같이 기본적인 속성값들이 적용되면서 음악이 재생되는 것을 볼 수 있습니다.

나머지 속성들은 직접 값을 변경하면서 테스트를 하면 좋을듯 합니다.



예제 파일은 첨부파일에서 받을 수 있습니다 :)


11.zip