자바스크립트로 악기 연주하는 애니메이션 만들기

18 Oct 2023

javascript

안녕하세요! 이번에는 자바스크립트를 사용하여 악기 연주하는 애니메이션을 만들어보겠습니다. 이 애니메이션은 웹 페이지에 악기 키를 누르면 해당하는 소리가 나오고, 키에 맞는 그림이 나타나는 기능을 가지고 있습니다.

필요한 기술 및 도구

이 프로젝트를 구현하기 위해 다음과 같은 기술과 도구가 필요합니다.

HTML: 웹 페이지의 구조를 작성하기 위해 사용합니다.
CSS: 애니메이션의 스타일링 및 디자인을 담당합니다.
JavaScript: 악기 연주와 애니메이션 기능을 구현하기 위해 필요합니다.

프로젝트 구조

프로젝트를 시작하기 전에 웹 페이지의 구조를 설계해야 합니다. 다음은 예시로 작성된 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>악기 애니메이션</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="keyboard">
        <div class="key" id="C"></div>
        <div class="key" id="D"></div>
        <div class="key" id="E"></div>
        <div class="key" id="F"></div>
        <div class="key" id="G"></div>
        <div class="key" id="A"></div>
        <div class="key" id="B"></div>
    </div>
    <audio id="audioC" src="sounds/C.wav"></audio>
    <audio id="audioD" src="sounds/D.wav"></audio>
    <audio id="audioE" src="sounds/E.wav"></audio>
    <audio id="audioF" src="sounds/F.wav"></audio>
    <audio id="audioG" src="sounds/G.wav"></audio>
    <audio id="audioA" src="sounds/A.wav"></audio>
    <audio id="audioB" src="sounds/B.wav"></audio>
    <script src="script.js"></script>
</body>
</html>

위의 코드에서는 악기 키를 표현하기 위해 <div> 요소를 사용하였고, 각 키에는 고유한 ID가 부여되어 있습니다. 또한, 각 키에 해당하는 소리를 재생하기 위해 <audio> 요소가 사용되었습니다.

자바스크립트 코드

위에서 작성한 HTML 코드에는 자바스크립트 파일인 script.js가 포함되어 있습니다. 이 파일에서는 악기 키를 누르면 해당 소리를 재생하고, 애니메이션을 처리하는 기능을 구현합니다. 다음은 예시로 작성된 script.js의 코드입니다.

document.addEventListener("keydown", function(event) {
    // 키보드 이벤트 감지
    var key = event.key.toUpperCase();
    // 눌린 키의 대문자 값을 가져옴

    var audio = document.getElementById("audio" + key);

    if (audio) {
        // 해당 키에 소리 파일이 존재하는 경우
        audio.currentTime = 0;
        audio.play();

        var keyElement = document.getElementById(key);
        keyElement.classList.add("active");

        setTimeout(function() {
            keyElement.classList.remove("active");
        }, 300);
    }
});

위의 코드에서는 document.addEventListener("keydown", function(event) { ... })로 키보드 이벤트를 감지하고, 이벤트가 발생할 때마다 해당 소리를 재생하고 애니메이션 효과를 처리하는 기능을 구현합니다. 키에 해당하는 소리 파일은 getElementById()를 사용하여 가져온 후, play() 메서드를 호출하여 재생합니다. 또한, 애니메이션 효과를 위해 해당 키의 요소에 active 클래스를 추가한 후, 300ms 이후에 active 클래스를 제거합니다.

프로젝트 실행

프로젝트를 실행하기 위해서는 위에서 작성한 HTML, CSS, JavaScript 파일을 모두 함께 사용하여 웹 서버 또는 로컬 환경에서 실행해야 합니다.

위에서 작성한 코드를 포함하는 적절한 디렉토리에 파일을 생성한 후, 브라우저에서 해당 HTML 파일을 열거나, 로컬 개발환경에서 실행하여 악기 연주하는 애니메이션을 즐길 수 있습니다.

마치며

위의 예제 코드를 기반으로 자신만의 악기 연주하는 애니메이션을 만들어 보세요! 자바스크립트의 이벤트 처리와 애니메이션 기능을 활용하여 다양한 응용이 가능합니다. 즐겁게 프로젝트를 진행하고, 창의적인 아이디어를 더해보세요!

자바스크립트 공식 문서 HTML 공식 문서 CSS 공식 문서 프론트엔드 개발자로 성장하기: 유용한 자료와 도구

hashtags: #javascript #webdevelopment