[JavaScript] Audio 객체를 이용한 음악 재생[JavaScript] Audio 객체를 이용한 음악 재생

Posted at 2018. 9. 27. 15:47 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 웹 브라우저에서 MP3 음악 틀기




-. HTML5부터는 플래시와 같은 플러그인을 사용하지 않아도 Audio 태그를 사용할 수 있게 되었다.

-. 자바스크립트의 Audio 객체를 이용해서 음악을 플레이해 보자.



# Audio 객체의 속성

속성 이름

설  명

src

 · 재생하려는 음악 파일 경로

volume

 · 음악의 음량

 · 음량조절은 0부터 1까지 소수점 단위로 조절할 수 있다.(예 : 0.5)

currentTime

 · 음악의 현재 위치(초 단위)




# Audio 객체의 메서드

메서드 이름

설  명

play( )

 · 음악을 재생

pause( )

 · 음악을 일시정지




# 정지(STOP) 기능

-. Audio 객체는 정지(STOP) 메서드가 없다.

-. 음악을 정지하고 처음위치로 이동하고 싶을때는 pause( ) 메서드를 사용하고 currentTime 속성을 0으로 바꿔주어야 한다.




# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 음악 재생 ::</title>
<script type="text/javascript">

    // Audio 객체생성 ①
    // var audio = new Audio('./lucky.mp3');

    // Audio 객체생성 ②
    var audio = new Audio();
    audio.src = "./lucky.mp3";


</script>
</head>
<body>
    <input type="button" onClick="audio.play();" value="PLAY"/>
    <input type="button" onClick="audio.pause();" value="PAUSE"/>
    <input type="number" onChange="audio.currentTime=this.value"/>
    <input type="number" onChange="audio.volume=this.value"/>
</body>
</html>




# 출력결과








반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약  (0) 2018.10.12
[JavaScript] email 형식 검사하기  (0) 2018.09.27
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation  (0) 2018.09.13
[JavaScript] 저장소 사용하기  (0) 2018.09.07
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
//

[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation

Posted at 2018. 9. 13. 13:10 | Posted in JavaScript & jQuery/JavaScript
반응형






■ 지오로케이션


-. 지오로케이션은 현재 위치를 찾는 기능이다.
-. 데스크톱의 웹 브라우저를 사용하면 사용자의 IP주소를 사용해서 현재 위치를 찾을 수 있다.
   (현재 데스크톱에서는 인터넷 익스플로러를 제외한 다른 브라우저에서만 사용 가능)
-. GPS가 포함된 스마트폰과 태블릿 PC에서는 GPS를 사용해서 현재 위치를 찾을 수 있다.



 ※ Position 객체의 구조




객체

설명

:: 1단계 객체 ::

 position

 · timestamp, coords 프로퍼티를 가지는 자바스크립트 객체이다.

:: 2단계 객체 ::

 timestamp

 · 위치를 수집한 시간을 표현하는 숫자

 coords

 · 현재의 위치를 정의하는 객체

:: 3단계 객체 ::

 heading

 · 장치가 움직이는 방향을 나타내는 숫자.

 · 이 값은 정북(똑바른 북쪽)에서 벗어난 각을 나타낸다.

 · 0도는 정북향을 나타내며 방향은 시계방향(동쪽은 90도이고, 서쪽은 270도)이다.

 · speed 값이 0이면 heading 값은 NaN이 된다.

 · 장치에서 haeading 정보를 제공할 수 없을 때 이 값은 null 이된다.

 altitude

 · 고도, 해수면을 기준으로 미터 단위

 · null일 수도 있다.

 latitude

 · 위도, 소수점을 포함하는 숫자. (X)

 accuracy

 · 미터로 위도와 경도의 정확도를 나타내는 숫자

 longitude

 · 경도, 소수점을 포함하는 숫자 (Y)

 speed

 · 장치의 속도를 나타내며, 초당 미처 값을 숫자로 나타낸다.

 · 이 값은 null 일 수 도 있다.

 altitudeAccuracy

 · 미터로 고도의 정확도를 나태내는 숫자

 · null일 수도 있다.





# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 지오로케이션 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        // Geolocation 객체를 사용
        if(navigator.geolocation) {
            
            navigator.geolocation.getCurrentPosition(function(position) {
                
                // 위치를 가져오는데 성공할 경우
                jQuery.each(position.coords, function(key, item) {
                    jQuery("<h3></h3>").html("● " + key + " : " + item).appendTo("body");
                });
            }, function(error) {
                
                // 위치를 가져오는데 실패한 경우
                consol.log(error.message);
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body></body>
</html>




# 출력결과











■ 지오로케이션 + 다음 지도 API 연동하기




# 소스코드

<html>
<head>
<title>:: GEOLOCATION + Daum Map API ::</title>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=라이브러리키"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        function getLocation(position) {

            var latitud = position.coords.latitude;
            var longitude = position.coords.longitude;
        
            var mapContainer = document.getElementById("map")    // 지도를 표시할 DIV
            var mapOption = {
                  center : new daum.maps.LatLng(latitud, longitude)    // 지도의 중심좌표
                , level : 3    // 지도의 확대레벨
            };
            
            // 지도를 생성
            var map = new daum.maps.Map(mapContainer, mapOption);

            // 마커가 표시될 위치
            var markerPosition = new daum.maps.LatLng(latitud, longitude);

            // 마커를 생성
            var marker = new daum.maps.Marker({ position:markerPosition });

            marker.setMap(map);
        }

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation, function(error) {
                consol.log(error.message);    
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body>
    <div id="map" style="width:800px;height:400px;"></div>
</body>
</html>




# 출력결과






반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] email 형식 검사하기  (0) 2018.09.27
[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
[JavaScript] 저장소 사용하기  (0) 2018.09.07
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
//

[JavaScript] 저장소 사용하기[JavaScript] 저장소 사용하기

Posted at 2018. 9. 7. 15:51 | Posted in JavaScript & jQuery/JavaScript
반응형





■ localStorage를 사용한 저장소 기능 사용하기



-. 기존의 자바스크립트는 쿠키를 사용하는 방법 이외에도 수많은 방법을 사용해 데이터를 저장하고자 노력했다.

-. 이전에는 플래시 저장소를 사용하거나 각각의 브라우저에 존재하는 특수한 저장소를 사용했다.

-. 데이터를 오래 지속하는 것은 애플리케이션을 만들 때 꼭 필요한 기능이므로 HTML5부터는 저장소 기능을 기본으로 제공한다.

-. 저장소는 웹 브라우저를 삭제하지 않는이상 데이터를 영구적으로 저장한다.



:: 저장소 기능을 지원하는 브라우저 ::

 인터넷 익스플러(Internet Explorer)

 8 이상

 파이어 폭스(Fire Fox)

 3.5 이상

 사파리(Safari)

 4.0 이상

 크롬(Chrome)

 4.0 이상

 오페라(Opera)

 10.5 이상



# 소스코드

<html>
<head>
<title>:: JavaScript 로컬 저장소 ::</title>
<script language="javascript">

    document.addEventListener("DOMContentLoaded", function() {

        if(window.localStorage) {

            // 해당 예제를 실행하기전 이전 clear( ) 메서드를를 사용하여 작성했던 저장소의 내용을 전부 삭제한다.
            localStorage.clear();
        }
        else {
            alert("로컬 저장소를 사용할 수 없는 브라우저입니다.");
        }
    });

    function printLocalStorage() {

        var output = "";

        // div 태그에 로컬 저장소의 내용을 출력한다.
        for(var key in window.localStorage) {
            output += "<p>";


            // getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다.
            output += key + " : " + localStorage.getItem(key);
            output += "</p>";
        }

        document.getElementById("output").innerHTML = output;
    }

    function saveLocalStorage() {

        // 변수를 선언한다.
        var key = document.getElementById("key").value;
        var value = document.getElementById("value").value;

        // setItem( ) 메서드를 이용하여 value값을 로컬 저장소에 저장한다.
        localStorage.setItem(key, value);

        // 데이터를 출력한다.
        printLocalStorage();
    }
</script>
</head>
<body>
    <input type="text" id="key" value=""/>
    <input type="text" id="value" value=""/>
    <input type="button" value="저장" onClick="saveLocalStorage();"/>
    <div id="output">
        <!-- 저장된 내용을 출력할 DIV 엘리먼트 -->
    </div>
</body>
</html>




# 출력결과





※ localStorage 객체의 메서드


메서드 이름

설명

 setItem(key, value)

 · 로컬 저장소에 데이터를 생성한다.

 getItem(key)

 · 로컬 저장소의 데이터를 읽어온다.

 removeItem(key)

 · 로컬 저장소의 지정한 key 값의 데이터를 삭제한다.

 clear()

 · 로컬 저장소의 데이터를 전부 삭제한다.

 key(number)

 · 로컬 저장소의 특정 순서의 데이터를 읽어온다.







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation  (0) 2018.09.13
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
//

[JavaScript] Session 데이터 읽고, 쓰기[JavaScript] Session 데이터 읽고, 쓰기

Posted at 2018. 9. 4. 19:14 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 자바스크립트에서 세션 값 읽어오기



-. 세션은 키와 값이 있는 작은 데이터의 조각이다.
-. 세션은 서버와 클라이언트에서 모두 저장할 수 있다.
-. 세션은 휘발성 데이터로, 브라우저를 종료하는 순간 모든 데이터가 삭제된다.
-. 세션은 같은 브라우저 상에서 동일한 페이지에서 이전 로그인 되었다면, 로그인 정보를 가지고 있는 형식으로 자주 사용된다.






# sessionStorage 객체의 메서드

메서드 이름

설명

 setItem(key, value)

 · 세션에 데이터를 저장한다.

 getItem(key)

 · 세션의 데이터를 읽어온다.

 removeItem(key)

 · 세션에 지정한 key 값의 데이터를 삭제한다.

 clear()

 · 센션의 데이터를 전부 삭제한다.

 key(number)

 · 세션의 특정 순서의 데이터를 읽어온다.





# 소스 코드

<html>
<head>
<title>:: JavaScript Session ::</title>
<script language="javascript">

    document.addEventListener("DOMContentLoaded", function() {


        if(window.sessionStorage) {

            // 해당 예제를 실행하기전 이전 세션의 데이터를 clear( ) 메서드를 사용해 전부 삭제한다.
            sessionStorage.clear();
        }
        else {
            alert("세션을 사용할 수 없는 브라우저입니다.");
        }
    });

    function printSessionStorage() {

        var output = "";

        // div 태그에 로컬 저장소의 내용을 출력한다.
        for(var key in window.sessionStorage) {
            output += "<p>";
            // getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다.
            output += key + " : " + sessionStorage.getItem(key);
            output += "</p>";
        }

        document.getElementById("output").innerHTML = output;
    }

    function saveSessionStorage() {

        // 변수를 선언한다.
        var key = document.getElementById("key").value;
        var value = document.getElementById("value").value;

        // setItem( ) 메서드를 이용하여 key를 지정하고, value값을 세션에 저장한다.
        sessionStorage.setItem(key, value);

        // 데이터를 출력한다.
        printSessionStorage();
    }
</script>
</head>
<body>
    <input type="text" id="key" value=""/>
    <input type="text" id="value" value=""/>
    <input type="button" value="저장" onClick="saveSessionStorage();"/>
    <div id="output">
        <!-- 저장된 내용을 출력할 DIV 엘리먼트 -->
    </div>
</body>
</html>




# 출력결과










연관 포스팅 : [JavaScript] Cookie 생성, 삭제 및 읽어오기









반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation  (0) 2018.09.13
[JavaScript] 저장소 사용하기  (0) 2018.09.07
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입  (0) 2018.08.20
//

티스토리툴바