Rev. 2.73

최근 Ajax의 활용범위가 확대되면서 슬라이더, 드래그앤 드롭, 소트에이블, 백그라운드 업로더, 드래그 선택영역, 오토 컴플리케이션 등 부수적인 웹 인터페이스가 자바스크립트로 속속들이 구현되고 있다. 마우스 버튼은 물론 키보드까지 DHTML로 제어하는 이 시점에서 마우스 인풋없는 웹서핑은 상상조차 할 수 없게 되었다. 이러한 가운데 Adomas Paltanavicius는 자바스크립트를 이용하여 휠을 제어하는 자바스크립트 코드까지 공개하였다. IE와 파이어폭스 등의 브라우저에서 작동하며 테스트 페이지에서 작동하는 모습을 확인할 수 있다.(뭔가 재미있는 생각이 떠오르지 않는가?)

/* This is high-level function. */
function handle(delta) {
var s = delta + ": ";
if (delta < 0) s += "down";
else s += "up";
document.getElementById('delta').innerHTML = s;
}

/* Event handler for mouse wheel event. */
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) delta = -event.detail/3;
if (delta) handle(delta);
}

/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

Comments

Javascript Sound Kit은 플래시8의 사운드 오브젝트 액션스크립트를 이용하여 자바스크립트에서 사운드를 제어할 수 있도록해주는 사운드 API이다. 이것을 이용하면 자바스크립트 이벤트 또는 Ajax 이벤트에 사운드를 효과음을 손쉽게 사용할 수 있게된다. 뿐만아니라 자바스크립트 MP3 플레이어로도 사용할 수있다.

코드 사용방법 :

var mysound = new Sound();
mysound.loadSound("http://www.archive.org/download/Behind/SyncFilmicoBehind.mp3", true);
mysound.setVolume(30);

예제 :

Javascript MP3 플레이어 데모
API 테스트 페이지

테스트 MP3(Ship of fools) :

loadSound ,
stop | start ,
setPan | setVolume
setDuration | setPosition
getId3 | getPan | getTransform| getVolume | getDuration | getPosition | getBytesLoaded | getBytesTotal

사운드 트레이서

Comments

이 곳의 상단에 적용되어 있는 프로그레스 바입니다. 자바스크립트의 양이 많이지면서 CPU의 처리과정이 다소 길어짐에 따라 진행상황을 시각적으로 표시하기 위해 만들어 보았습니다. 이 처리과정 중에서도 아래의 스크립트는 이미지의 로딩현황만을 체크하여 진행상황을 표시하는 역할을 합니다. IE와 파이어폭스에서 정상작동하는 것을 확인하였습니다. 이 스크립트는 Prototype 프레임웍 기반으로 코딩되었습니다.

// Progress Bar
// Developer: FireJune(http://firejune.com)

var Progress = {
bar:function(value){
Element.setStyle('progress', {width:value+'px'});
Element.update('imgCnt', Math.ceil(100-((100/this.bSize)*value))+'%');
},
init:function(){
this.imgs = $$('IMG');
this.bSize = Element.getWidth('progress');
this.gSize = this.bSize/this.imgs.length;
this.loaded = 0;
for(n=0;n<this.imgs.length;n++) this.check(n);
},
draw:function(){
this.loaded++;
this.bar(Math.ceil(this.bSize-(this.gSize*this.loaded)));
if(this.imgs.length<=this.loaded)
setTimeout('Element.hide("progress");new Effect.Fade("progress_text");', 500);
},
check:function(n){
(this.imgs[n].complete)? this.draw():setTimeout('Progress.check('+n+')', 500);
}
}

// 사용하기
Event.observe(window. 'load', Progress.init);

// HTML 노드
<div id="progress_text">
processing...
<div id="imgCnt">0%</div>
</div>
<div id="progress"></div>

// 스타일시트
#progress {position:absolute; width:700px; height:144px; z-index:98; right:0;
border-left:2px solid #999; background:#fff}
#progress_text {position:absolute; font:bold 25px HY견고딕, Dotum;
color:#fff; right:260px; top:45px; z-index:99}

- 페이지 전체 이미지 수
- 그래프의 너비파악 및 계산
- 개개 이미지의 로딩완료 여부 파악
- 로딩이 완료되지 않은 이미지는 0.5초후 다시 파악
- 로딩 완료된 순서로 그래프 드로잉
- 이미지 로딩이 모두 완료되면 그래프 숨김

Comments