티스토리 뷰

development/html javascript CSS

[JavaScript] audio

Happyoon ~ 2021. 10. 26. 22:40
728x90
반응형

Step 1. 오디오 객체 생성

//1. 
audio id="one" src="sounds/piano.mp3" controls></audio>
<script>
	let pianoSound=document.querySelector("#one");
//2. 
	let pianoSound2=new Audio("sounds/piano.mp3");
	let laserSound=new Audio("sounds/laser1.wav");
</script>

controls를 넣으면 다음과 같은 재생바가 생긴다.  재생바가 없더라도 재생과 멈춤에는 영향이 없다.

 

전체 코드 실행 모습 및 재생바 모양 확인

 

Step 2. 버튼 클릭 시 소리 재생

//눌러보셈 버튼을 눌렀을때 레이저 소리를 재생해 보세요.
        document.querySelector("#myBtn").addEventListener("click", function(){
            //빠르게 처음부터 다시 재생하고 싶다면 
            laserSound.currentTime=0;
            laserSound.play();
        });

.play() 를 사용하면 재생한다.

하지만, 버튼을 누를 때마다 빠르게 처음부터 소리 재생을 다시하고 싶다면, .currentTime = 0 으로 세팅한다.

currentTime은 재생시점을 말하는데 즉, 클릭될 때마다 빠르게 맨앞으로 돌아가 그곳에서부터 시작함을 뜻하는 코드다. 

 

Step 3. 스페이스 바 클릭 시 소리 재생 

 //스페이스 바를 눌렀을때 레이저 소리를 재생해 보세요.
        document.querySelector("body").addEventListener("keydown", function(e){
            //e 는 key event 객체이다.
            console.log(e);
            if(e.keyCode == 32){
                laserSound.currentTime = 0;
                laserSound.play();
            }
        });

keydown은 키보드 이벤트를 뜻한다. keydown을 사용하려면 querySelector("body")를 해주어야 함을 눈여겨 보자. 

 

따라서, 키보드 이벤트가 발생될 때마다 콘솔은 다음과 같은 형태를 띈다.

 

위의 사진에서 화살표를 눌러 속성을 살펴보자.

 

위의 그림에서 code가 'Enter'이고 keyCode는 13임을 알 수 있다.

 

이렇게 keyCode를 활용해서 코드를 짜보려 한다.

우리가 필요한 keyCode는 스페이스 바의 keyCode이고, 스페이스 바의 키코드도 위와 같은 방법으로 확인해보면 32임을 쉽게 알 수 있다.

 

따라서, 코드는 아래와 같다.

//스페이스 바를 눌렀을때 레이저 소리를 재생해 보세요.
        document.querySelector("body").addEventListener("keydown", function(e){
            //e 는 key event 객체이다.
            console.log(e);
            if(e.keyCode == 32){
                laserSound.currentTime = 0;
                laserSound.play();
            }
        });

 

전체 코드는 다음과 같다. 

 

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step13_audio.html</title>
</head>
<body>
    <h1>오디오 재생연습</h1>
    <audio id="one" src="sounds/piano.mp3" controls></audio>
    <button id="myBtn">눌러보셈</button>
    <script>
        let pianoSound=document.querySelector("#one");

        let pianoSound2=new Audio("sounds/piano.mp3");

        let laserSound=new Audio("sounds/laser1.wav");

        //눌러보셈 버튼을 눌렀을때 레이저 소리를 재생해 보세요.
        document.querySelector("#myBtn").addEventListener("click", function(){
            //빠르게 처음부터 다시 재생하고 싶다면 
            laserSound.currentTime=0;
            laserSound.play();
        });

        //스페이스 바를 눌렀을때 레이저 소리를 재생해 보세요.
        document.querySelector("body").addEventListener("keydown", function(e){
            //e 는 key event 객체이다.
            console.log(e);
            if(e.keyCode == 32){
                laserSound.currentTime = 0;
                laserSound.play();
            }
        });

    </script>
</body>
</html>
반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] Canvas 활용하기 #2 / clearRect(), 배경이미지 넣기 / 마우스 커서 위치 설정하기  (0) 2021.10.26
[JavaScript] Canvas 활용하기  (0) 2021.10.26
[JavaScript] JSON / JSON.parse(), JSON.stringify()  (0) 2021.10.19
[JavaScript] this 복습하기 / EventListener에서의 this  (0) 2021.10.19
[JavaScript] Math 객체 활용하기 / ceil(), round(), floor(), random()  (0) 2021.10.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함