[ Javascript ] 웹 API

WEB API

웹 브라우저는 음악을 재생하는 기능, 동영상을 재생하는 기능, 그림을 그리는 기능, 미디어를 제어하는 기능, 사용자 카메라를 다루는 기능, 게임 패드를 다루는 기능 등도 제공하며, 자바스크립트를 사용하면 이런 기능들을 모두 활용할 수 있습니다. 이러한 기능을 웹 API라고 부릅니다.

웹 API 문서 바로가기

 

Audio 객체

HTML5부터는 플래시와 같은 플러그인을 사용하지 않아도 audio 태그를 사용해서 음악을 재생할 수 있게 되었습니다. (단, 음악 재생은 HTML5를 지원하는 웹 브라우저에서만 사용할 수 있습니다. 따라서 인터넷 익스플로러 8 이하의 웹 브라우저에서는 사용할 수 없습니다. )

 

Audio 객체 생성 1

var audio = new Audio('test.mp3');

Audio 객체는 위 코드처럼 생성합니다. Audio의 매개변수에는 audio 태그의 src 속성에 대응하는 문자열을 입력합니다.

src 속성을 지정해줄 필요 없이 아래 코드처럼 별도로 지정해도 됩니다.

 

Audio 객체 생성 2

var audio = new Audio();
audio.src = 'test.mp3';

 

Audio 객체의 기본 속성

속성	설명
src	재생하려는 음악 파일 경로
volume	음악의 음량
currentTime	음악의 현재 위치 ( 초 단위 )

 

Audio 객체의 기본 메서드

메서드	설명
play()	음악을 재생합니다.
pause()	음악을 일시 정지합니다.

Audio 객체에는 stop() 메서드가 없습니다. 음악을 정지하고 처음의 위치로 이동하고 싶을 때는 pause() 메서드를 사용하고 currentTime속성을 0으로 바꿔야 합니다.

 

간단한 음악 재생 프로그램 예

JS

var audio = new Audio('./pages/test.mp3');

 

HTML

<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
<input type="number" onchange="audio.currentTime=this.value" />
<input type="number" onchange="audio.volume=this.value" />

위치, 음량

코드를 실행하면 위치럼 위치와 음량을 입력하고 play를 누르면, 간단한 음악 재생 프로그램이 완성됩니다.

 

 

모바일 장치 구분

핸드폰으로 naver.com에 접속하면 자동으로 m.naver.com으로 이동됩니다. 네이버 페이지가 접속한 기기를 확인해서 핸드폰이면 m.naver.com으로 이동시켜주기 때문입니다. 

핸드폰을 확인하는 방법은 크게 '서버에서 확인하는 방법'과 '클라이언트에서 확인하는 방법'이 있습니다. 두 가지 모두 userAgent를 확인하면 됩니다. userAgent 속성은 현재 웹 페이지를 실행하는 웹 브라우저의 정보를 나타냅니다.

 

userAgent 속성 확인

var userAgent = navigator.userAgent;
console.log(userAgent); // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

웹 브라우저의 userAgent 속성에는 브라우저를 구분할 수 있는 고유 문자열이 있습니다. 안드로이드는 Android, 아이폰이라면 iPhone을 쓰고 있다는 것을 알 수 있습니다.

 

키워드를 사용하면 모바일 장치를 구분할 수 있습니다.

• iPhone: 아이폰
• iPod: 아이팟
• iPad: 아이패드
• Android: 안드로이드
• WebOS: 웹 OS

:: 카카오톡, 페이스북에서 링크를 클릭하면 KAKAOTALK등의 글자가 찍힙니다.

 

스마트폰 구분 예

var smartPhones = ['iphone', 'ipod', 'android'];

for(var i in smartPhones) {
    if(navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[i]))) {
        console.log('스파트폰 페이지로 이동');
        location = 'http://m.naver.com';
    }
}

 

window.orientation 속성 ( 모바일 장치의 방향 )

window.orientation 속성은 모바일 장치에만 있는 속성으로 현재 모바일 장치의 방향을 나타냅니다.

:: 0과 180일 때는 세로방향, 90과 -90일 때는 가로방향

 

모바일 장치 방향 확인 예

if(window.orientation == 0 || window.orientation == 180) {
    console.log('세로 방향');
} else if(window.orientation == 90 || window.orientation == -90) {
    console.log('가로 방향');
}