홈페이지에 배경음악을 HTML로 넣는 방법 | |||
| |||
홈페이지를 멋지게 만들고 싶을 때, 그리고 뭔가 멀티미디어적인 요소를 주고자 할 때, 배경 음악을 넣습니다. 그런데 사용자가 원하지 않는 배경 음악을 자동으로 나오게 하는 것은 제 생각에, 특수한 경우를 제외하면, 썩 좋은 생각은 아닌 것 같습니다.
그래서 배경 음악을 넣을 때에는 다음 몇 가지를 꼭 지키는 것이 좋을 것 같습니다.
이거 말은 쉽지요. 그러나 멀티미디어를 웹에 삽입하는 것은 접근성에 앞서 우선 상호운용성과 제대로 된 동작을 보장하는 것부터 상당히 신경을 써야 합니다. 아래와 같이 배경 음악이 잘못 삽입된 예를 몇 개 들고, 그것을 어떻게 고쳐야 하는지를 나열해보았습니다.
여러 가지 브라우저와 OS 환경을 지원하고, 일반 사용자에게 멀티미디어를 중단하거나 줄일 수 있는 어느 정도의 조절 권한을 주고, 또, 멀티미디어를 재생할 수 없는 사용자에게는 대체 텍스트를 제공해주려면 어떻게 해야 할까요? 가장 이상적인 방법은 W3C의 표준에 엄격하게 맞는 object 요소를 사용하는 것입니다. <object data="mozart.mp3" 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에 들어가는 값은 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" 위의 예에서는 인터넷 익스플로러를 위해 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" 또, 애플의 QuickTime Player를 사용하고자 한다면 아래와 같이 해주면 됩니다. <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 자, 이렇게 해서 (배경) 음악을 삽입하고자 할 때에 HTML 코드를 어떻게 작성해야 하는지 살펴보았습니다. 완벽하게 모든 플랫폼에서 작동하는 동영상과 음악을 웹 페이지 안에 삽입하는 것은 아직 어려운 문제인 것 같습니다. 그러나 적어도 bgsound같은 요소를 사용하는 것보다는 object와 embed를 적절하게 사용하고, 멀티미디어에 대한 대체물(equivalents 또는 alternatives)을 제공해주며, 사용자에게 제어할 수 있는 권한을 충분히 주는 것이 좋을 것 같습니다. 마지막으로, 웹에 삽입된 이런 객체들은 불행하게도 키보드를 통한 제어가 아직 완벽하지 않습니다. 윈도우즈 미디어 정도가 스페이스바(재생, 일시 정지), 마침표(완전 정지) 등을 이용한 일부 제어가 가능하지만 독립적인 플레이어보다 제어 가능성이 훨씬 떨어집니다. 따라서 상업적으로 디자인해야 하는 경우가 아니고, 개인 홈페이지나, 보안이 중요하지 않은 홈페이지라면 웹 내부에 플레이어를 삽입하는 것보다는 독립적인 플레이어를 호출하도록 하는 것이 안전하고 확실한 방법인 것 같습니다. Tags: HTML BGSOUND html 배경음악 | |||
| |||
| |||
로그인을 하시면 댓글을 등록 할 수 있습니다. |
SIMILAR POSTS 무료 음악 듣기 - 배경음악 공유 |
OTHER POSTS IN THE SAME CATEGORY 거짓말에 속아 38시간 - 휴대폰 쇼크 |