HTML5를 활용한 블로그 BGM (?) 테스트~

HTML5로 블로그의 BGM 형태의 모델도 가능할 것 같아서 걍 한번 만들어 봤습니다. 

지난번에 설명한 <audio> 태그를 활용했구요.. 
자동 재생하도록 설정하고 제어 컨트롤을 숨겨봤습니다. ^^

구글 크롬, 파이어폭스, 사파리에서 사운드를 켜시면 음악이 재생되는 것을 들을 수 있을 겁니다.
음악은 현재 "짝"이라는 프로그램에서 사용하는 류이치 사카모토의 rain이란 곡입니다. 

당연히 HTML5의 audio 태그를 지원하는 브라우저에서만 재생이 됩니다. 
기존의 IE8 이하에서는 멀뚱한 텍스트만 보이겠죠.. 

지난번 HTML5 강좌에서도 한번 설명한 것이기는 하지만 소스를 간단히 한번 보시죠.. 
아래 소스는 제어 컨트롤이 보이고 반복되도록 구성해 봤습니다. 

<audio autoplay="autoplay" loop="loop" controls="controls"> <source src="rain.mp3" type="audio/mpeg" /> <source src="rain.ogg" type="audio/ogg" /> </audio>

모바일에서도 테스트 해봤습니다. 
안드로이드에서는 자동재생까지 깔끔하게 됩니다. 
제어 컨트롤을 숨기고 뭔가 다른 소개 하면서 BGM으로 음악을 재생하는 형태의 서비스도 괜찮을 것 같습니다. 

다만, 아이폰에서는 HTML5를 지원하기는 하지만 자동재생이 안됩니다. 
찾아보니 애플 측에서는 속도나 성능 때문에 반드시 사용자의 클릭이 있어야만 자동 재생할 수 있도록 되어 있다고 합니다. 
자바스크립트를 통해 될 수 있나 이것 저것 해봤는데 역시 안되는군요. 

윈도우 모바일 7 망고폰에서도 역시 재생이 안되네요. 
음악 제어 컨트롤은 나타나는데 재생이 안되네요. 헐~

음... 웹은 전반적으로 HTML5를 지원하고 있어 그럭저럭 모델이 나올 듯 한데.. 
모바일에서는 아직 어려울 듯 하네요.. ^^