기본 콘텐츠로 건너뛰기

12월, 2014의 게시물 표시

XE v1.7에서 음성 파일 재생 불가 문제 해결법.

   XE 1.7을 사용하고 있는 사이트에서 문제가 발생했습니다.   게시판에서 음성 파일을 첨부한 후, 게시물에 삽입하면, 다른 웹 브라우저에서는 음성 파일이 잘 재생되나, IE8(혹은 그 이하)에서는 음성 파일이 재생되지 않는 문제였습니다.   아마도 XE가 업데이트되면서 음성 파일 처리에 HTML5 태그인 audio 태그를 쓰도록 수정된 것 같습니다. 하지만, 다행히도 audio 태그를 플래시 플레이어로 변환시켜 주는 애드온이 있었습니다. 그 애드온의 이름은 "HTML5 AUDIO to FLASH"입니다.[1] 이 애드온 덕분에 문제를 잘 해결할 수 있었습니다. ... 이걸로 끝이면 좋았겠지만, 적용해놓고 보니, 정작 중요한 IE8에서는 플레이어가 나타나지 않는 것이었습니다. (산 넘어 산...)   이상한 것은 해당 애드온의 바탕이된 자바스크립트를 개발한 사이트[2]에 가서 데모를 구동해봤는데, IE8에서 플레이어도 잘 보이고, 재생도 잘 되었습니다. 그래서 저는 애드온을 의심하고,코드를 낱낱이 살펴보았습니다. 하지만 특별한 문제점은 없었습니다.. 다음으로는 jQuery나, html5.js와의 충돌을 의심했으나, 모두 아니었습니다.   그러다가 놀라운 글을 발견했습니다.[3] 결론부터 말씀드리자면, p 태그 안에 audio 태그가 있으면, 그런 오류가 발생한다는 것입니다. 그리고 실제로, 게시물에서 p태그를 제거하자 음성 파일이 잘 재생되었습니다.   몇 가지 연구 끝에 IE8[4]에서는 node.outerHTML, innerHTML 함수가 태그에 따라서 안먹히는 경우가 있기 때문에, 이런 문제가 발생했다는 것을 알게 되었습니다. 그렇다면 게시글에서 p 태그만 지우면 되는데, 중요한 문제는 게시판의 WYSIWYG 편집기가 자동으로 p 태그를 입력해버린다는 것이었습니다. 그래서 audio.js (애드온이 사용하는 라이브러리)에서 outerHTML, innerHTML을 사용하지 않고 우회하는 방안을 열심히 찾아보았는데,