홈페이지에 배경음악을 HTML로 넣는 방법

31367 
Created at 2007-11-12 22:49:09 
248   0   0   0  
원제목: 홈페이지에 배경음악을?


홈페이지를 멋지게 만들고 싶을 때, 그리고 뭔가 멀티미디어적인 요소를 주고자 할 때, 배경 음악을 넣습니다. 그런데 사용자가 원하지 않는 배경 음악을 자동으로 나오게 하는 것은 제 생각에, 특수한 경우를 제외하면, 썩 좋은 생각은 아닌 것 같습니다.

  1. 사용자는 공공의 장소에서 조용히 웹 탐색을 하려고 했는데 갑자기 예상하지 못했던 배경 음악이 튀어나와 당황할 수 있습니다.
  2. 배경 음악의 소리 크기, 일시 정지, 완전 정지, 또는 음 소거 등이 가능한 버튼 컨트롤을 제공하지 않아서 어떻게 그것을 중단시켜야 할 지 몰라 난감해 할 수도 있습니다.
  3. 스피커나 사운드카드가 없어서 음악을 들을 수 없는 사용자, 난청이나 청각 장애가 있는 사용자에게는 무용 지물이 됩니다.

그래서 배경 음악을 넣을 때에는 다음 몇 가지를 꼭 지키는 것이 좋을 것 같습니다.

  1. 꼭 필요한 곳에만 배경 음악이나 배경음을 넣는다.
  2. 시각적으로 크게 보기 싫지 않다면, 사용자가 멀티미디어 요소를 직접 조절(중단, 일시 중단, 음량, 음 소거 등) 할 수 있도록 한다.
  3. 꼭 필요한 경우가 아니라면 웹 페이지에 멀티미디어 요소를 삽입(embed)하는 것보다는 멀티미디어 파일을 독립적인 플레이어에서 재생하도록 링크만 걸어주는 것이 사용자가 제어할 수 있는 범위가 커지므로 바람직하다.
  4. 운동 장애 또는 기타 이유로 마우스를 쓸 수 없는 사용자들을 위해, 멀티미디어 요소를 키보드로도 조절할 수 있도록 한다.
  5. 되도록 여러 가지 환경에서 동일하게 멀티미디어가 작동하는지 사전에 시험해보고, 되도록 W3C의 표준에 맞게 코드를 작성한다.
  6. 멀티미디어 요소가 플레이되지 않거나, 그것을 보고 들을 수 없는 장애인들을 위해 대체 텍스트(alternative text)를 제공한다.

이거 말은 쉽지요. 그러나 멀티미디어를 웹에 삽입하는 것은 접근성에 앞서 우선 상호운용성과 제대로 된 동작을 보장하는 것부터 상당히 신경을 써야 합니다. 아래와 같이 배경 음악이 잘못 삽입된 예를 몇 개 들고, 그것을 어떻게 고쳐야 하는지를 나열해보았습니다.

  1. 아주 흔히 잘 못 사용되는 bgsound 요소
    <bgsound src="music.mp3" loop="0" id="bgmusic"/>
    bgsound 요소는 html 4.01이나 xhtml 1.x 표준에 없는 태그로 인터넷 익스플로러에서만 작동합니다. 그리고 공교롭게도 인터넷 익스플로러도 버전에 따라서는 bgsound를 지원하지 않습니다. 그리고 사용자가 음악을 끄거나 중단할 수 있는 방법이 없습니다.
  2. 또 잘못 사용되는 embed 요소
    <embed src="music.mp3" type="application/x-mplayer2"/>
    <noembed>음악 재생</noembed>
    embed 요소 역시 표준에 없는 요소입니다. 없는 요소라는 것은 낡았지만 아직 지원하는(deprecated) 요소보다 강도가 강한 말입니다. 즉, 비표준이라는 뜻이지요. 그렇지만 많은 브라우저들이 embed를 지원하기 때문에 실질적인 상호운용성을 위해 사용할 수 밖에 없는 요소입니다.
  3. 또 드물게 잘 못 사용되는 방식이 dynsrc 속성을 사용한 것입니다.
    <img src="moonflag.gif" dynsrc="moonflag.mpg" alt="달 착륙 동영상"/>
    이것은 이미지의 잘못된 비표준 속성(attribute)으로, 이미지 대신 동영상(또는 음성)이 나오도록 하는 방법인데, 아주 옛날에 작성된 동영상 소스를 보면 이런 식으로 된 것들이 가끔 있습니다. 이것도 브라우저에 따라서 지원하지 않는 경우가 많으므로 안 쓰는 것이 좋습니다.

여러 가지 브라우저와 OS 환경을 지원하고, 일반 사용자에게 멀티미디어를 중단하거나 줄일 수 있는 어느 정도의 조절 권한을 주고, 또, 멀티미디어를 재생할 수 없는 사용자에게는 대체 텍스트를 제공해주려면 어떻게 해야 할까요? 가장 이상적인 방법은 W3C의 표준에 엄격하게 맞는 object 요소를 사용하는 것입니다.

<object data="mozart.mp3" 
type="audio/mpeg" height="239" width="45">
You are expected to listen to Mozart music
but your browser does not seem to be able to play it.
</object>

object 요소는 html 4 이후에서 표준으로 채택된 요소입니다. 그리고 content-type을 위와 같이 type 속성을 써서 지정해주는 것이 좋습니다. 또 달라진 점은 width와 height를 지정했다는 것입니다. 만약 진짜로 배경에서만 몰래(?) 음악이 흐르게 하려면 높이와 폭을 모두 0으로 만들어주면 됩니다. 그러나 시각적인 디자인을 최우선적으로 하는 곳이 아니고, 일반적인 목적(예를 들면 음성 강의)에서라면 위와 같이 너비와 폭을 지정해줌으로써 사용자가 조절할 수 있는 컨트롤이 표시됩니다. 이 컨트롤은 마이크로소프트사의 윈도우즈 미디어가 나타날 수도 있고, 애플사의 퀵타임이 나타날 수도 있고, 또는 리얼네트웍스사의 리얼 미디어가 나타날 수도 있습니다. 그것은 웹 서버에서 또는 브라우저에서 audio/mpeg이라는 MIME-Type을 어떻게 처리하도록 해놓았느냐에 따라 다를 것입니다.

그러나 불행하게도 위의 방법대로 곧이곧대로 하기에는 아직 난관이 많이 있습니다. 우선 서버 관리자가 웹 서버의 설정을 제대로 해놓아야 합니다. 이것에 대해서는 이 글의 범위를 넘어가므로, 한글 Mozilla 프로젝트 사이트에 나온 Mozilla에서 동영상 서비스를 위한 가이드를 참조하십시오. 인터넷 익스플로러 5.5SP2 이상에서는 이상한 보안 경고 메시지를 뿌려줍니다. 그래서 윈도우즈용 인터넷 익스플로러를 위해 ActiveX 컨트롤을 삽입해주게 됩니다. 아래의 예는 최신 윈도우즈 미디어 플레이어 컨트롤(7.0)을 삽입한 예입니다.

<object id="Player" width="239" height="45" 
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="music.mp3" />
<param name="autoStart" value="true" />
</object>

대충 눈으로 보시면 무슨 뜻인지 짐작이 가실 것입니다. 여기에서 CLASSID에 들어가는 값은 Microsoft에서 고유하게 부여한 번호로 반드시 그대로 삽입해야 정확하게 윈도우즈 미디어 컨트롤이 나타납니다. 그리고 param 요소들을 통해 여러가지 컨트롤의 속성을 조절할 수 있습니다. 물론 반드시 넣어야 할 속성은 URL입니다. 위에서는 autoStart 속성값을 true로 해놓음으로써 페이지가 열리면 자동으로 음악이 흐르게 해놓았습니다. 별로 좋은 방법은 아니지만, 많은 분들이 사용하는 방법이어서... 그리고 역시 width와 height를 0으로 놓으면, 컨트롤이 시각적으로 완전히 사라지고 그야말로 '배경 음악'이 나옵니다만, 웬만해서는 권장하고 싶지 않습니다.

그런데 여전히 문제가 있습니다. ActiveX 컨트롤을 삽입하면 기타 브라우저들(오페라 7.23, 모질라 1.6, 넷스케이프 7.1 등)에서 지원을 해주지 않습니다. 그래서 할 수 없이 아래와 같이 어정쩡한 타협을 할 수 밖에 없습니다.

<object id="Player" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="239" height="45" title="Playing Music">
<param name="URL" value="music.mp3" />
<param name="autoStart" value="true" />

<embed src="music.mp3" type="application/x-mplayer2"
width="239" height="45"
pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/">
<noembed>Music to be played</noembed>
</object>

위의 예에서는 인터넷 익스플로러를 위해 object 안에 ActiveX 컨트롤을 삽입하였습니다. 그리고, 안쪽에다는 엄격히 표준에 맞는 object를 쓰고 싶지만, 그렇게 하면 인터넷 익스플로러에 보안 경고창이 뜨기 때문에 할 수 없이, 또 비표준인 embed 요소를 사용하였습니다. 원래는 object안에 또 object가 들어있으면 해석을 하지 않아야 합니다. 그리고 멀티미디어가 제대로 나오지 않을 것에 대비해서 object 요소 안에 title 속성을 삽입하였고, 맨 마직막에는 대체 텍스트(Music to be played)가 삽입되었습니다.

만약 윈도우즈 미디어 플레이어는 윈도우즈에서만 작동하므로 보다 보편적으로 음악을 삽입하려면 Real Player를 넣는 것도 방법입니다. 아래와 같이 리얼 플레이어에 맞는 classid를 넣어주면 됩니다.

<object id="Player" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
width="239" height="45" title="Playing Music">
<param name="SRC" value="music.mp3" />
<param name="autoStart" value="true" />
<embed name="player" type="audio/x-pn-realaudio-plugin"
height="45" width="239" autostart="true" src="music.mp3">
<noembed>Music to be played</noembed>
</object>

또, 애플의 QuickTime Player를 사용하고자 한다면 아래와 같이 해주면 됩니다.

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
WIDTH="160"HEIGHT="144"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="music.mp3">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="false">
<EMBED SRC="music.mp3" WIDTH="160" HEIGHT="144"
AUTOPLAY="true" CONTROLLER="false"
PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
<noembed>Music to be played</noembed>

출처: 신승식의 다른 생각

자, 이렇게 해서 (배경) 음악을 삽입하고자 할 때에 HTML 코드를 어떻게 작성해야 하는지 살펴보았습니다. 완벽하게 모든 플랫폼에서 작동하는 동영상과 음악을 웹 페이지 안에 삽입하는 것은 아직 어려운 문제인 것 같습니다. 그러나 적어도 bgsound같은 요소를 사용하는 것보다는 object와 embed를 적절하게 사용하고, 멀티미디어에 대한 대체물(equivalents 또는 alternatives)을 제공해주며, 사용자에게 제어할 수 있는 권한을 충분히 주는 것이 좋을 것 같습니다. 마지막으로, 웹에 삽입된 이런 객체들은 불행하게도 키보드를 통한 제어가 아직 완벽하지 않습니다. 윈도우즈 미디어 정도가 스페이스바(재생, 일시 정지), 마침표(완전 정지) 등을 이용한 일부 제어가 가능하지만 독립적인 플레이어보다 제어 가능성이 훨씬 떨어집니다. 따라서 상업적으로 디자인해야 하는 경우가 아니고, 개인 홈페이지나, 보안이 중요하지 않은 홈페이지라면 웹 내부에 플레이어를 삽입하는 것보다는 독립적인 플레이어를 호출하도록 하는 것이 안전하고 확실한 방법인 것 같습니다.



Tags: HTML BGSOUND html 배경음악 Share on Facebook Share on X

◀ PREVIOUS
나잡아 봐~라...
▶ NEXT
유괴
  댓글 0
로그인을 하시면 댓글을 등록 할 수 있습니다.
SIMILAR POSTS

무료 음악 듣기 - 배경음악 공유 (created at 2007-06-29)

강력한 소스 보호 (created at 2007-01-28)

textbox의 입력문자 제어하기(영문/한글) (created at 2006-12-22)


OTHER POSTS IN THE SAME CATEGORY

거짓말에 속아 38시간 - 휴대폰 쇼크 (created at 2007-12-03)

마지막 잎세 (created at 2007-11-25)

이런것으로 유혹하지 말란말여... (created at 2007-11-25)

무슨 과외인지 아시는분? (created at 2007-11-25)

모하는겨 !? (created at 2007-11-25)

간만에 상큼하게 레이싱걸 샷 (created at 2007-11-25)

한국 여자 vs 일본 여자 (created at 2007-11-25)

라면머리 (created at 2007-11-25)

참 맛있겠다... 우워어~ (created at 2007-11-25)

버클리 대학생의 티셔츠 (created at 2007-11-20)

한가인이 뭐라고 그랬을까요? (created at 2007-11-20)

그 여자가 무서워 (created at 2007-11-20)

쏘우 (created at 2007-11-14)

그렇게 보고 싶은가? (created at 2007-11-14)

유괴 (created at 2007-11-14)

나잡아 봐~라... (created at 2007-11-12)

아이비 안티는 아니지만... (created at 2007-11-12)

추억의 자료 (created at 2007-11-12)

친구들 술자리 (created at 2007-11-12)

(created at 2007-11-12)

정신 줄 놓은 소희 (created at 2007-11-12)

자신들의 종족은 ? (created at 2007-11-12)

저의 남편이 바람을 피웠어요... 이제 뭘해야되죠 !? (created at 2007-11-12)

국민연금 강제 징수 및 체납처분 이유 (created at 2007-11-09)

알뜰 주부 변액연금보험으로 1억 만들기 (created at 2007-11-09)

미쓰발의 구라동화 (created at 2007-11-08)

사탕만한 강아지 (created at 2007-11-08)

송은이의 굴욕 (created at 2007-11-08)

수퍼히어로의 정체는 !? (created at 2007-11-08)

가로채기 (created at 2007-11-08)

UPDATES

자리 마음에 안든다고 6급 공무원 패는 농협 조합장 (created at 2024-03-26)

85세 딸 짜장면 사주는 102세 어머니 (created at 2024-03-26)

1990년대 감각파 도둑 (created at 2024-03-26)

치매에 걸린 69살의 브루스 윌리스가 전부인 데미무어를 보고 한 말 (updated at 2024-03-22)

일제강점기가 더 살기 좋았을지도 모른다는 조수연 국민의힘 후보 - 친일파? (updated at 2024-03-14)

성일종 인재육성 강조하며 이토 히로부미 언급 - 인재 키운 선례? (updated at 2024-03-13)

경제는 대통령이 살리는 것이 아닙니다 라던 윤석열대통령 - 상황 안좋아지자 여러 전략을 펼쳤지만, 부작용 속출했던 2024년의 봄 (updated at 2024-03-13)

극빈의 생활을 하고 배운것이 없는 사람은 자유가 뭔지도 모를 뿐 아니라 왜 개인에게 필요한지에 대한 필요성을 못느낀다는 윤석열 대통령 (updated at 2024-03-08)

조선일보를 안본다는 사람들이 말하는 그 이유 - 천황폐하, 전두환 각하, 김일성 장군 만세? (created at 2024-03-07)

광폭타이어를 장착하면 성능이 좋아질거라는 착각 (updated at 2024-03-03)

면허시험장에서 면허갱신하면 하루만에 끝나나? (updated at 2024-03-03)

신한은행/신한투자증권 금융거래 종합보고서 다운로드 방법 (updated at 2024-02-26)

100년 된 일본 장난감 회사가 내놓은 변신 기술에 난리난 과학계 (created at 2024-02-26)

알리에서 발견한 한글 지원하는 가성비 쩌는 무선 기계식키보드 (updated at 2024-02-25)

쌍팔년도가 1988년인줄 알았던 1인 (updated at 2024-02-23)

이쁜 색으로 변신한 테슬라 사이버트럭 (created at 2024-02-23)

2024년 카타르 아시안컵 4강전 전날 한국 대표팀 내부에 있었던 이강인의 폭주 (updated at 2024-02-21)

강릉 맛집 지도 (updated at 2024-02-20)

간이 안좋을 때 나타나는 증상 20가지 (updated at 2024-02-20)

배설물을 이용하여 일본에 저항했던 독립운동가 조명하 (updated at 2024-02-20)

요건 몰랐지롱? 이순신을 사랑한 외국인 (created at 2024-02-20)

원빈도 머리빨 (created at 2024-02-19)

대표적인 대한민국의 미남배우 중 하나인 원빈 (created at 2024-02-19)

백제의 건국 시조 온조왕 (updated at 2024-02-19)

700년동안 대한민국 고대국가의 한축이었던 백제시대 (created at 2024-02-19)

대머리들에게 주는 대머리의 조언 (created at 2024-02-17)

일본의 여성 락그룹 프린세스 프린세스의 "다이아몬드" (created at 2024-02-17)

결혼식 직전 연락두절된 신랑 (created at 2024-02-17)

대한민국 축구팀 파문으로 인해 중국 소셜미디어까지 등장한 탁구 전도사 이강인 (updated at 2024-02-16)

조국의 반격으로 흥미진진하게 흘러가는 한국의 정치판 - 데뷰와 동시에 한동훈 장관에게 던진 4개의 질문 (updated at 2024-02-15)

2024년 카타르 아시안컵 4강전 전날 내분사태로 갑자기 회자되는 이승우선수의 친화력 (created at 2024-02-15)

카카오뱅크 금융거래종합보고서/잔액증명서/거래내역서 발급 방법 (created at 2024-02-14)

아이가 최고의 스승이었다 (created at 2024-02-13)

이제는 국민 유행어로 등극한 한동훈의 "싫으면 시집가" (updated at 2024-02-13)

설 연휴 잔소리 메뉴판 - 이제 잔소리 하기전에 요금부터... (updated at 2024-02-10)

로버트 드니로의 70년 전 모습 (created at 2024-02-08)

카메라 어플로 만들어본 슈퍼걸 - 엄... 최종 작품은 왠지... (created at 2024-02-08)

앞트임 하고 새롭게 태어난 대한민국의 젊은 용사 (created at 2024-02-08)

비가 억수로 내리던 2024년의 2월 어느날 캘리포니아의 밤 카니예 웨스트와 그의 아나 비앙카 센소리 (updated at 2024-02-08)

스케방형사 1화 - 수수께끼의 전학소녀사키 (created at 2024-02-05)

백제와 일본의 교류가 가장 활발했던 시기는 근초고왕 시대 (created at 2024-02-05)

일에 찌들은 아빠가 꿈에서 깨어나지 않자 구출해주는 짱구 (created at 2024-02-03)

이제는 할아버지가 된 휴 그랜트(Hugh Grant)가 블랙핑크 콘서트에 다녀온 후 소감 (created at 2024-02-03)

다시 한번 감상해보는 추억의 날리면 패러디 (updated at 2024-02-01)

25년간 노예로 살다가 돌아온 남동생 (created at 2024-02-01)

가까우면서도 멀게 느껴지는 나라 일본 (created at 2024-02-01)

친구와 비교하다가 이혼하게 된 부부 (created at 2024-02-01)

요꼬 미나미노의 바람의 마도리걸(風のマドリガル) (created at 2024-01-30)

옛날 어린이들이 신문을 챙겨봤던 이유 (created at 2024-01-30)

Remaster된 요꼬 미나미노(南野陽子)의 판도라의 연인(パンドラの恋人) (updated at 2024-01-30)