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

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

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)을 제공해주며, 사용자에게 제어할 수 있는 권한을 충분히 주는 것이 좋을 것 같습니다. 마지막으로, 웹에 삽입된 이런 객체들은 불행하게도 키보드를 통한 제어가 아직 완벽하지 않습니다. 윈도우즈 미디어 정도가 스페이스바(재생, 일시 정지), 마침표(완전 정지) 등을 이용한 일부 제어가 가능하지만 독립적인 플레이어보다 제어 가능성이 훨씬 떨어집니다. 따라서 상업적으로 디자인해야 하는 경우가 아니고, 개인 홈페이지나, 보안이 중요하지 않은 홈페이지라면 웹 내부에 플레이어를 삽입하는 것보다는 독립적인 플레이어를 호출하도록 하는 것이 안전하고 확실한 방법인 것 같습니다.