크롬 버전 19 까지는 embed 태그를 잘 사용해왔는데, 최근에 크롬버전 24 로 업그레이드 한 이후에 또다시 embed 태그가 제대로 동작하지 않는 문제가 발생했다.
크롬은 HTML5 태그를 지원하기 때문에 손쉽게 audio 태그를 사용하면 되지만, 블로그에 접속하는 브라우저의 종류가 여러 종류이기 때문에 무작정 audio 태그를 사용할수는 없는 문제가 발생한다.
살펴본바에 의하면, 윈도우XP 가 설치할 수 있는 최종 브라우저 버전인 IE8 까지는 HTML5 가 정상지원되지 않는다.
윈도우7 에 기본 설치되어 있는 IE9 버전에서는 audio 태그가 정상작동한다.
요즘 새로 조립되어 판매되는 컴퓨터에는 윈도우7 홈 프리미엄이 설치되기 때문에 audio 태그를 사용하는 것이 문제없지만, 여전히 윈도우XP 사용자가 많은 현재 상황에서 무작정 audio 태그를 이용하여 음악을 재생하도록 할수는 없는 문제다.
직접 코드를 짜서 만드는 홈페이지라면 접속자의 브라우저 버전이나 브라우저 종류에 따라 그에 대응하는 태그를 선택적으로 사용하도록 코드를 작성하면 되지만, 블로그 처럼 스크립트 사용이 제한되는 곳에서는 이런 방법을 사용할 수 없다.
현재 사용중인 mp3 재생을 위한 태그는 아래와 같다.
<embed type="video/x-ms-wmv" src="링크주소" width="400" height="120" autostart="0"></embed>
위의 태그는 테스트 당시 크롬 버전 19 와 IE8 까지에서 문제없이 동작하였다.
IE 브라우저에서 접속했을 경우에는 브라우저의 상단 또는 하단에 알림메세지로 뜨는 링크에서 플러그인을 설치하는 간단한 과정을 거치면 되고, 크롬에서는 약간 복잡한 과정을 통해 HTML5 용 플러그인을 별도로 설치해주면 정상적으로 재생이 되었다.
위에서 사용한 type="video/x-ms-wmv" 옵션은 autostart="0" 옵션이 정상적으로 실행되는 유일한 타입이었기 때문이다.
다른 타입들은 autostart 옵션이 제대로 제어되지 않아서 페이지 로드시 바로 mp3 파일이 재생되는 문제가 발생했다.
이와 관련한 지난 포스팅:
IE9, 크롬(Chrome) 버전 19 설치 후, embed 태그에서 mp3 재생할 때 플러그인 설치하기
(Chrome,win7) Windows Media Player HTML5 Extension for Chrome 설치하기(웹 미디어 재생기 설치)(embed 태그)
IE(Internet Explorer) 는 플러그인 설치가 매우 단순해서 별다른 어려움이 없지만, 크롬 브라우저는 그 설치과정이 다소 복잡하여 일부 사용자들은 설치를 포기할수도 있는 정도의 수준.
크롬에서 플러그인 설치가 다소 어렵기는 해도, 일단 설치가 되면 음악 재생에 문제가 없었지만, 그마저도 이번에 크롬 브라우저의 버전이 24 로 업데이트 되면서 음악이 재생되지 않는 문제가 발생하고 있다.
(개체는 생성되지만, 음악이 재생이 안됨)
따라서, 이전부터 고민해오던 이 문제에 대해 다시 원초적으로 접근을 해보았다.
기존에 사용하던 embed 태그는 IE 브라우저에서 접속하면 아래와 같은 메세지가 뜬다.
IE8 까지는 브라우저 상단에 메세지가 뜨고, IE9 부터는 브라우저 하단에 이런 메세지가 뜨는데, 이때 '허용' 을 클릭하면 플러그인이 설치되어 embed 태그가 정상적으로 동작하게 된다.
크롬의 경우에는 아래와 같이 상단에 알림 메세지가 뜬다.
이와 관련한 자세한 내용은 위에 링크한 관련 포스팅의 내용을 참조하기 바란다.
크롬의 경우에는 버전 19 까지는 별도의 'Windows Media Player HTML5 Extension for Chrome' 를 설치하면 embed 태그를 그대료 이용하는 것이 가능했다.
하지만, 이번 업데이트인 버전 24 부터는 embed 객체는 불러와서 플레이어 모양은 뜨지만, 재생을 눌러도 음악이 재생되지 않는 문제가 발생했다.
어떻게 해야할까?
일단, HTML5 에서 지원하는 audio 태그를 이용하면 IE9 (윈도우7) 와 크롬 브라우저에서 그 모양이 다르기는 해도 재생기가 정상적으로 생성되고 동작하였다. 별도의 설치과정도 필요없다.
하지만, 윈도우XP 를 사용하는 사용자들은 IE8 이하의 브라우저 버전을 이용해서 접속할 가능성이 있고, 이런 경우 audio 태그가 작동하지 않는다.
그때에는 기존에 사용하던 embed 태그를 그대로 사용하도록 해줘야 한다.
(IE 와 크롬 외의 브라우저에서 어떻게 지원할것인가에 대한 문제는 논외로 하겠다.)
현재, audio 태그가 지원하는 파일 포맷 및 각 브라우저별 지원형태는 위와 같다.
audio 태그에 관한 설명은 아래의 링크를 참조(영문).
HTML audio tag(w3schools)
이 글에서 다루는 음악파일은 mp3 이다.
파이어폭스와 오페라 등에서는 지원이 안되기 때문에 문제가 될 수 있지만, 그렇다고 IE9 에서 지원하지 않는 ogg 포맷을 쓸수도 없고, 덩치가 큰 wav 포맷을 쓸수도 없다.
따라서, 파이어폭스와 오페라에서 접속하는 경우는 안타깝지만 무시하기로 한다.
이제 남은 문제는 스크립트를 작성할 수 없는 블로그에서 어떻게 브라우저 별로 embed 나 audio 태그를 선별적으로 제공하느냐 하는 것이다.
이 문제는 의외로 쉽게 풀 수 있다.
audio 태그 자체에 이런 기능을 손쉽게 사용할 수 있는 구조가 마련되어 있다.
아래와 같이 태그를 작성한다.
<audio id="audioid" src="1.mp3" controls="">
<embed type="video/x-ms-wmv" src="1.mp3" width="400" height="120" autostart="0"></embed>
</audio>
만약, 1.mp3 라는 파일을 재생하려고 할때, 위와 같이 audio 태그 안에 embed 태그를 작성한다.
audio 태그가 지원되지 않는 브라우저라면, audio 태그 사이에 작성된 embed 태그가 동작하게 된다.
audio 태그를 작성하는 방법은 여러가지가 있지만, 위에서처럼 단순하게 사용하는 것이 보기에도 편하다.
<audio id="audioid" src="1.mp3" controls />
<audio id="audioid" src="1.mp3" controls="true"></audio>
위의 두 태그는 같은 의미이다.
controls 태그는 재생기의 콘트롤 부분이 화면에 보이게 하는 역할을 한다.
controls 라는 태그는 기본적으로 true 값을 가지기 때문에 넣어주기만 하면 콘트롤박스 부분이 화면에 나타난다.
태그를 넣기만 하면 작동하고, 만약 빼려면 해당 태그를 넣지 않으면 되는데, 이 태그를 빼면 화면에 아무것도 나타나지 않는다.
자동재생과 관련된 autoplay 태그 역시, 기본값이 true 이기 때문에, 태그를 넣어주면 음악이 자동으로 재생된다.
만약, 자동으로 재생되지 않게 하려면 autoplay 태그를 작성하지 않고 빼준다.
autoplay 라고만 작성해도 되고, autoplay="true" 라고 작성해도 똑같이 자동재생된다.
volume 을 지정하는것 역시 지원이 되기는 하지만, 기본 태그에는 들어가지 않는다.
주로 자바스크립트를 통해서 별도로 제어를 하는데, 플레이어 아이디와 volume 를 지정해서 볼륨을 0.0~1.0 사이의 값으로 지정하면 된다.
기본태그에서는 volume 를 지원하지 않기 때문에, 스크립트를 사용할 수 없는 이글루스 등의 블로그에서는 사실 플레이어 시작시 볼륨을 작게해서 실행하도록 제어할 방법은 없다.
브라우저 별로 태그를 다르게 적용하고 싶다면, 아래와 같은 태그를 사용할수도 있다.
<!--[if IE 9]>
test
<![endif]-->
IE 9 버전인 경우에는 test 라는 글자가 화면에 나타난다.
즉, 스크립트가 아니라 태그만으로 브라우저에 따라 다른 태그를 사용할 수 있다.
그러나, 이 방법을 사용할 경우, 같은 태그를 여러번 작성해야 하는 번거로움이 발생한다.
또한, IE 브라우저만 구분한다는 원초적 문제가 있다.
그냥, embed 태그와 audio 태그를 별도로 작성할수도 있다.
위 화면은, IE9 에서 접속한 경우, embed 태그와 audio 태그가 동시에 보여진 경우다.
위 태그는 크롬(버전24)으로 접속한 경우, embed 태그와 audio 태그가 모두 보여진 경우다.
이런 방식을 쓸수도 있지만, 애시당초 제안했던것처럼, audio 태그 안에 embed 태그를 넣어서 기본적으로 audio 태그를 이용하고, 만약 브라우저가 HTML5 를 지원하지 않으면 embed 태그를 이용하게 하는 방법이 가장 효율적으로 보인다.
embed 태그의 경우, 볼륨값을 한번 지정해 두면 그 값으로 계속 불러와 지지만, audio 태그를 사용할 경우, 매번 페이지를 열때마다 최고 볼륨으로 열린다.
위에서 언급했듯이, audio 태그의 볼륨을 조절하기 위해서는 스크립트를 이용해야 하지만, 이글루스에서는 스크립트를 막고 있기 때문에, 볼륨을 조절해서 적정 볼륨으로 지정할 방법이 없다.
볼륨이 너무 커서 음악을 재생할때 이용자들이 깜짝깜짝 놀랄 상황이 생긴다.
결국, 브라우저 별로 선택해서 열수 있도록 아래와 같이 별도로 두개의 태그를 삽입해서 사용하기로 결정했다.
윈도우7 에서 크롬으로 접속한 화면이다.
IE9 이하의 브라우저로 접속하면, 하단의 크롬용 플레이어는 보이지 않을 것이고, 상단의 embed 용 플레이어도 플러그인을 설치하라고 뜰수 있다.
태그 내용은 아래와 같다.
IE용 플레이어
<embed type="video/x-ms-wmv" src="링크주소" width="400" height="120" autostart="0">
<br>크롬용 플레이어
<audio id="audioid" src="링크주소" controls="">브라우저가 HTML5 audio 태그를 지원하지 않습니다.</audio>
<br>
덧글
mp3로 audio 태그를 걸면 안되는 경우가 왕왕 있습니다.
2013/02/19 12:20 # 답글 
비공개 덧글입니다.
2013/06/27 11:47 # 삭제 답글 
비공개 덧글입니다.그런데 기존 IE에 들어가서도.. 크롬 음악 플레이어의 크기를 width="400" height="120"조정처럼 크롬에서도 사이즈 크기가 조정 안되나요 크롬으로 접속하면 뮤직플레이어 사이즈가 적정한데 다시 ie로 접속하면 음악 플레이어가 너무 크게 나와서요 방법 있으면 부탁드립니다 감사합니다 버전은 윈도우10 PRO 20H2 가장 최신버전 이용중입니다
<audio controls style="width: 400px;">
<source src="파일 링크 주소" type="audio/mpeg">
</audio>