발생일: 2013.03.06 키워드: Audio, 오디오 문제: 예전에 오디오 라이브러리를 만들면서 HTML5 Audio에 대해 리서치했던 내용이다.정리한 지 좀 된 내용이긴 하지만, 노트를 정리하다 발견해서 옮겨둔다. :) 해결책: - 지원 범위http://caniuse.com/#search=Audio - 오디오 태그는 아래와 같이 사용한다. - 음원을 불러와 재생한다.new Audio("chime.wav").play(); - 재생할 수 있는가? canPlayType(타입) 예) audio.canPlayType('audio/wav'); 재생이 가능하면, "maybe" 또는 "probably"를 반환한다.재생할 수 없으면 빈 문자열을 반환한다. 문자열을 리턴하는 것은, 근본적으로 오디오와 비디오 코덱이 ..
발생일: 2013.06.18 문제: HTML5의 WebStorage API 중 하나인 Local Storage에 대해 살펴봤다. 해결책: 개요 HTML5에서는 클라이언트에 데이터를 저장하는 2개의 객체를 제공한다.하나의 세션 단위로 데이터를 저장하는 SessionStorage 와,만료 기간이 없는 LocalStorage 가 있다. 두 가지 모두 key/value 쌍으로 저장하며, 사용 방법은 거의 비슷하다.여기서는 Local Strorage 에 대해 자세히 살펴보려고 한다. 간단 사용법 사용법은 정말 간단하다.전역으로 할당되어 있는 localStorage의 메서드를 사용하며, 데이터는 key/value 쌍으로 구성된다. 아래와 같이 setItem() 과 getItem()으로 값을 저장하거나 가져올 수 있..
발생일: 2013.02.22 문제:요새 HTML5 Web Audio API를 파보고 있다. 스펙을 살펴보다 보니 deprecated 된 메서드가 있는데,튜토리얼의 대부분은 스펙이 변경되기 이전에 작성된 것들이 많아 이전 메서드를 기반으로 소개하고 있다. 당장 사용하는 데 있어서는 문제가 될 것 같지 않지만, 참고 차 정리해둔다. 해결책: 아래는 각 노드에서 변경된 메서드 목록이다. AudioBufferSourceNode noteOn() ---> start() noteGrainOn() ---> start() noteOff() ---> stop() AudioContext createGainNode() ---> createGain() createDelayNode() ---> createDelay() creat..
발생일: 2011.10.12 문제: 버튼을 클릭하면 오디오가 재생되고, 오디오 재생 상태에 따라 버튼의 모양을 변경하려고 한다. 엘리먼트의 onplay / onended 이벤트를 컨트롤 해서, 재생될 때 아이콘의 모양을 변경하면 간단히 해결될 것 같았다. 대상이 되는 audio 엘리먼트에 간단하게 아래와 같이 이벤트를 할당했다. audio.addEventListener("play", function () { // 재생 모양으로 아이콘 변경 }, false); audio.addEventListener("ended", function () { // 대기 모양으로 아이콘 변경 }, false); 음.. 헌데,.. 최초로 버튼을 클릭했을 땐 play 이벤트가 잘 호출되는데, 두 번째 클릭(또는 두 번째 재생)부..
발생일: 2011.09.08 문제: 진행 중인 미니 프로젝트에서는, 캔버스에 드로잉하고 캔버스를 resize 하는 스펙이 있다. resize 할 때에는, 그려진 데이터는 (좌측 상단을 기준으로) 고정하고 캔버스만 늘리려고 한다. jquery를 이용해서 구현하고 있던 터라, 캔버스 엘리먼트를 담고 아래와 같이 크기를 변경했다. $("canvas").width(w).height(h); 캔버스 크기만 변경되길 기대했는데, 그려진 픽셀까지 함께 확대가 된다. 왜 그럴까? 해결책: 캔버스의 실질적인 크기는 canvas 태그의 속성으로 설정해야 한다. (속성을 정의하지 않을 경우 기본으로 300, 150 크기를 가진다) 만약 css 속성으로 캔버스 사이즈를 변경할 경우엔, 속성에 기재된 값과 css 속성값의 비율에..
발생일: 2011.08.22 문제: 가벼운 팀 프로젝트로, 웹소켓과 캔버스를 이용해 동시에 그림을 그릴 수 있는 그림판 같은 걸 만들어보고 있다. 중간에 접속한 유저가 기존에 그려진 데이터를 뿅~ 받아볼 수 있는 동기화 기능이 필요했다. 이미 그려진 캔버스를 복사하려면 어떻게 하지? 해결책: 아래와 같은 순서로 처리하면 된다. 1. base64로 인코딩 된 데이터를 가져온다. 2. 이미지 객체를 만들어서, 이미지 문자열을 src에 할당한다. 3. 이미지 로드가 완료되면 로드된 이미지로 캔버스를 그린다. 이미지 로드가 완료되기 전 복사를 시도하면, 빈 이미지로 캔버스를 그리는 것과 같게 되기 때문에 아무 일도 일어나지 않으니 주의한다. 샘플 코드: // 이미지 데이터를 가져온다. var imageData ..
HTML5
발생일: 2010.03.11 문제: 얼마 전에 파이어폭스를 업데이트 받았는데, video 태그를 지원한다고 하더군요. 오픈비디오 타입으로 태그를 구현하면, 플러그인 추가 없이 바로 재생이 가능한 태그라는 설명입니다. 요게 아마 소문으로만 듣던 HTML5 가 아닐까 하는 생각이 들었습니다. HTML5 에서는 AJAX 도 스크립팅 없이 태그로 바로 구현되지 않을까, Comet 같은 서버 푸시형 요청이나 스트리밍 통신 같은 것도 지원되지 않을까 하는 생각이 문득 들었습니다. HTML5 의 정확한 스펙이 뭘까요. 해결책: 스티브잡스가 '어도비 너네 이제 맘에 안들어. 플래시 안 쓸 거야. 대신 HTML5 쓸 거야.' 이런 이후로, HTML5 에 대한 관심이 더 커졌다고 합니다. HTML5 에 대한 좋은 포스트가..