자바스크립트 예제: 특정 주파수의 소리 재생 + 음악 평균율 주파수 테이블

 

자바에서 주파수를 재생하는 글 자바 예제: 특정 주파수의 소리 재생 을 자바스크립트로 바꾼 예제입니다. 외부 온라인 소스나 라이브러리 필요 없이 자바스크립트 자체 엔진으로 소리를 재생합니다.

절차

1) AudioContext 인스턴스 생성

var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var osc, gn;

사파리 등 모바일 브라우저에서는 웹킷 접두어가 붙은 webkitAudioContext만 인식하므로 이 부분도 추가합니다. osc, gn은 오실레이터, 게인노드 인스턴스에서 사용할 변수명입니다.

 

2) 변수 osc, gn 선언 및 연결

osc = audioCtx.createOscillator() // 오실레이터 생성
osc.type = "sine" // 그래프 타입 설정 (sine(기본값), saw, triangle 등)
osc.frequency.value = 440 // 주파수(Hz) 입력

gn = audioCtx.createGain() // 게인노드 생성
osc.connect(gn) // 오실레이터와 게인노드 연결
gn.connect(audioCtx.destination) // 게인노드를 추상화된 출력장치(스피커 등)에 연결

 

3) 재생 및 정지

osc.start() // 오실레이터 스타트(음 재생)

// 1초간 재생 후 페이드아웃하면서 정지 (마지막의 튀는 음을 방지하기 위함)
setTimeout(function() {
  gn.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + 0.04)
}, 1000)

브라우저에 따라서 osc.start()는 사용자의 이벤트 행동에 의해서만 (마우스 클릭, 키보드 버튼 누름 등) 동작하도록 되어있는 경우도 있습니다. 재생의 정지는 osc.stop()으로도 가능하지만 마지막에 튀는 음을 방지하기 위해 위와 같은 방법을 사용하였습니다. (참고 사이트)

 

4) stop후 다른 이벤트를 통해 다른 음을 재생하고자 하는 경우 

if (osc && gn) {
  gn.disconnect(audioCtx.destination)
  osc.disconnect(gn)
}

// 다시 인스턴스 생성
osc = audioCtx.createOscillator()

디스커넥트 후 osc 인스턴스를 다시 생성해야 합니다. 기존의 osc 인스턴스를 재활용하려고 한다면 에러가 발생하면서 작동하지 않습니다. (참고 사이트)

 

예제: 음악의 평균율 주파수 테이블 (JQuery 포함)

자바스크립트를 이용해 C1 ~ B7까지 각 노트의 주파수가 얼마인지 계산한 테이블입니다. 테이블의 행을 클릭하면 위의 방법을 이용한 해당 주파수의 소리가 납니다. (아이폰의 경우 무음 해제해야 함)