[ HTML | JS ] 음표 만들기

HTML

[ HTML | JS ] 음표 만들기

Suil_bear 2023. 9. 30. 00:06

728x90

web audio API를 사용하여 주파수를 통해서 음을 만들어 보려고 한다.

window.AudioContext 또는 window.webkitAudioContext 사용하여 오디오 켄텍스트를 생성을 할 수 있다.

오디오 콘텍스트는 Web Audio API에서 중요한 개념으로, 오디오 신호를 생성, 처리 및 조작하는 데 사용된다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piano</title>
    <style>
        .piano-key {
            width: 40px;
            height: 150px;
            background-color: white;
            border: 1px solid #000;
            margin-right: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="piano">
        <div class="piano-key" data-note="C"></div>
        <div class="piano-key" data-note="D"></div>
        <div class="piano-key" data-note="E"></div>
        <div class="piano-key" data-note="F"></div>
        <div class="piano-key" data-note="G"></div>
        <div class="piano-key" data-note="A"></div>
        <div class="piano-key" data-note="B"></div>
    </div>
</body>
</html>

// Web Audio API 초기화
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 피아노 음을 생성하는 함수
function playPianoSound(note) {
    const oscillator = audioContext.createOscillator();
    oscillator.type = 'sine'; // 사인파 설정
    oscillator.frequency.setValueAtTime(getNoteFrequency(note), audioContext.currentTime);
    oscillator.connect(audioContext.destination);
    oscillator.start();
    oscillator.stop(audioContext.currentTime + 0.5); // 0.5초 후에 중지
}

// 음표를 주파수로 변환하는 함수
function getNoteFrequency(note) {
    const noteMap = {
        'C': 261.63,
        'D': 293.66,
        'E': 329.63,
        'F': 349.23,
        'G': 392.00,
        'A': 440.00,
        'B': 493.88
    };
    return noteMap[note] || 0;
}

// 피아노 키 클릭 이벤트 처리
const pianoKeys = document.querySelectorAll('.piano-key');
pianoKeys.forEach((key) => {
    key.addEventListener('click', () => {
        const note = key.getAttribute('data-note');
        if (note) {
            playPianoSound(note);
        }
    });
});

클릭을 하면 기계음이 재생되는 것을 들을 수 있다.

더 다양한 음과 기능을 다음에 된다면 추가하려고 한다.