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을 사용하지 않고 우회하는 방안을 열심히 찾아보았는데, 다행스럽게도 해결이 가능했습니다.
해당 문제가 수정된 파일은 다음의 링크에서 받으실 수 있습니다.
https://app.box.com/s/aeu2virtiqn9jt215eql
상세한 내용은 다음과 같습니다.
감사합니다. ^_^
참고자료
주석
[1] https://www.xpressengine.com/index.php?mid=download&package_srl=20673638
[2] http://kolber.github.io/audiojs/
[3] https://github.com/kolber/audiojs/issues/67, 2012.08.29에 작성된 ronansprake의 댓글
[4] 위 [3]를 보면 IE9도 그러는 것 같다.
게시판에서 음성 파일을 첨부한 후, 게시물에 삽입하면, 다른 웹 브라우저에서는 음성 파일이 잘 재생되나, 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을 사용하지 않고 우회하는 방안을 열심히 찾아보았는데, 다행스럽게도 해결이 가능했습니다.
해당 문제가 수정된 파일은 다음의 링크에서 받으실 수 있습니다.
https://app.box.com/s/aeu2virtiqn9jt215eql
상세한 내용은 다음과 같습니다.
- audio.min.js: 해당 문제 수정. 영어로 된 에러메시지를 한국어로 번역. (※ 파일명은 audio.min.js 입니다.)
- html5audio_flash.addon.php: 해당 문제 수정을 위한 처리. (수정할 필요가 없을 수도 있으나, 자세히 확인해보지는 못했습니다.)
감사합니다. ^_^
참고자료
- innerText/HTML, outerText/HTML 설명: http://opencode.co.kr/bbs/board.php?bo_table=javascript_tips&wr_id=32
- 특정 노드 앞에 새로운 노드 삽입하기 (insertBefore 함수): http://www.w3schools.com/js/js_htmldom_nodes.asp
- 특정 노드 안의 모든 자식 요소 삭제하기: http://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
- 노드 교체 힌트를 얻은 곳: http://webreflection.blogspot.kr/2008/12/outerhtml-for-almost-every-browser-if.html
주석
[1] https://www.xpressengine.com/index.php?mid=download&package_srl=20673638
[2] http://kolber.github.io/audiojs/
[3] https://github.com/kolber/audiojs/issues/67, 2012.08.29에 작성된 ronansprake의 댓글
[4] 위 [3]를 보면 IE9도 그러는 것 같다.
댓글
댓글 쓰기