발생일: 2013.03.06 키워드: Audio, 오디오 문제: 예전에 오디오 라이브러리를 만들면서 HTML5 Audio에 대해 리서치했던 내용이다.정리한 지 좀 된 내용이긴 하지만, 노트를 정리하다 발견해서 옮겨둔다. :) 해결책: - 지원 범위http://caniuse.com/#search=Audio - 오디오 태그는 아래와 같이 사용한다. - 음원을 불러와 재생한다.new Audio("chime.wav").play(); - 재생할 수 있는가? canPlayType(타입) 예) audio.canPlayType('audio/wav'); 재생이 가능하면, "maybe" 또는 "probably"를 반환한다.재생할 수 없으면 빈 문자열을 반환한다. 문자열을 리턴하는 것은, 근본적으로 오디오와 비디오 코덱이 ..
발생일: 2013.03.28 문제: 라이선스 문제로 각 브라우저에서 지원하는 비디오 태그의 코덱이 다르다고 알고 있다.자세히 살펴보자. 해결책: 비디오 형식은 매우 다양하며, 어떤 것은 무료지만 어떤 것을 라이선스 비용을 내야 한다.HTML5 비디오 태그와 관련된 비디오 형식에는 .ogg, .mp4, .webm 가 있다. 각 비디오 형식은 한 가지 또는 여러 가지 코덱을 사용해서비디오 또는 오디오를 압축하거나 압축을 푼다. 코덱을 사용하면 큰 용량의 비디오 데이터를 작은 크기의 파일로 압축해서 이용할 수 있기 때문에비디오 형식에 있어 매우 중요하다. 1. 테오라 + 보비스 = .ogg 테오라(Theroa, http://theora.org)는 Xiph.org에서 만든 무료 오픈소스 비디오 코덱이다.보비스(..
발생일: 2011.10.12 문제: 버튼을 클릭하면 오디오가 재생되고, 오디오 재생 상태에 따라 버튼의 모양을 변경하려고 한다. 엘리먼트의 onplay / onended 이벤트를 컨트롤 해서, 재생될 때 아이콘의 모양을 변경하면 간단히 해결될 것 같았다. 대상이 되는 audio 엘리먼트에 간단하게 아래와 같이 이벤트를 할당했다. audio.addEventListener("play", function () { // 재생 모양으로 아이콘 변경 }, false); audio.addEventListener("ended", function () { // 대기 모양으로 아이콘 변경 }, false); 음.. 헌데,.. 최초로 버튼을 클릭했을 땐 play 이벤트가 잘 호출되는데, 두 번째 클릭(또는 두 번째 재생)부..