로그인 창 전체 방문자 수 → 홈페이지 오늘 방문자 수 → 방문통계 어제 방문자 수 →

'브라우저_공통_음악태그'에 해당되는 글 1건

  1. 2017.05.17 크롬이든 IE든 모두에서 작동하는 음악태그엔 Audio가 적격이었군~

크롬이든 IE든 모두에서 작동하는 음악태그엔 Audio가 적격이었군~

 

여태는 음악태그에 EMBED가 최곤 줄 알았습니다.

해서 음악이 들어간 곳 모두에는 언제나 주로 그것만을 써왔거든요.

그랬는데 요것 IE에서나 유용했지 크롬을 비롯한 다른 브라우저에선 오히려 독이었을 줄은 꿈에도 몰랐답니다.

 

왜냐면 제가 크롬을 병행해서 썼긴 써왔지만, IE에서 너무 느리거나 재생하지 못했던 동영상 재생(드라마 다시 보기 등등)의 대용으로만 IE를 대신해서 크롬으로 열었으니까 EMBED로 넣은 음악이 설마하니 제대로 재생하지 못했을 줄은 전혀 짐작하지 못했거든요.

그랬는데 어느 날 아주 우연한 기회에 크롬에서 음악이 들어간 페이지를 누르게 되었답니다.

거기 서른 몇 곡 넣었는데 노래마다 IE에선 재생 버튼을 눌러야만 재생하게끔 짠 그 페이지에서 와글와글 그것 서른 몇 곡이 동시에 작동하니까 정신이 하나도 없었답니다.

그날 혼이 쏙 빠졌습니다.

 

그 당장은 어떻게 해보지도 못하고 며칠이 지난 어느 날 '크롬에서의 음악태그' 등등으로 검색해서 찾아봤답니다.

그랬더니 HTML5 버전에서는 Audio 태그가 좋다는 정보가 여러 군데서 발견되더군요.

 

그걸 확인하면서 전 너무나도 기뻤습니다. 그냥 기뻤다기보다는 들떴답니다.

그것 자세히 보지도 않고 얼른 EMBED 부분을 Audio로 바꿔봤지요.

아^ 그랬는데 브라우저에선 아무런 반응도 없는 겁니다.

 

그래서 다시 아까와 똑같은 내용으로 인터넷 검색해서 그 정보를 주의 깊게 훑었답니다.

그랬더니 단순히 바꾸는 거로 풀릴 게 아니라 <Audio로 열고 그 안엔 반드시 controls라는 태그와 오디오 타입을 넣고서 닫은 뒤(>) 그 맨 끝에 Audio 태그 전체를 닫는 </Audio>도 들어가야 작동한다는 걸 이해하게 됐습니다.

 

또 태그 안에서는 그 크기(width 또는 height)를 지정해 봐야 페이지 안에서 가장 넓게 열렸을 뿐 무용지물이었기에 그 부분은 넣지 않고 아예 페이지 HEAD에서 STYLE로 지정했더니 잘 먹혔던 것도 경험했답니다.

그런 식으로 잤는데 드디어 음악태그가 정상으로 작동하데요.

한데, 같은 페이지를 IE에서 볼 때와 크롬에서 열었을 때의 그 모양새가 조금은 달리 보입니다.

모르는 사람이 봤을 땐 태그 자체가 다른 줄 알 거 같아요.

아래 그림 좀 보세요! 여러분 눈에도 달라 보이지요?

 

~ Audio가 들어간 음악태그를 IE에서 보면 ~

 

 

~ Audio가 들어간 음악태그를 크롬에서 보면 ~

 

노래가 들어간 페이지 이런 식으로 짜였습니다.

먼저 스타일에서 음악재생기(Audio)의 크기를 설정(넓이185픽셀에 높이30픽셀)했고요, 본문에서는 Audio를 열고(<) 닫은 뒤(>) 그 안에 controls과 음악 주소(src) 그리고 오디오의 타입(type=Audio/mp3-여기선 mp3니까)까지만 넣었답니다.

 

~ Audio가 들어간 음악태그 이렇게 짜였다 ~

 

우리의 EMBED 그동안 수고가 많았습니다. 물론 아직도 플래시 파일을 부르는 등 여러 군데서 여전히 써먹는 중이지만…

 

 

Posted by 류중근
,