웹 오디오 API를 사용하여 10 밴드 이퀄라이저 만들기

Question

웹 오디오 API를 사용하여 내 머리를 감싸고
Winamp의 10 밴드 이퀄라이저를 다시 만들려고합니다. 내가 무엇을 수집 할 수 있습니다에서

, 나는 10 Biquad Filters를 만들 수 있고, 자신의 type에 2 (for a Bandpass filter)을 설정하고 각각 자신의 frequency[60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000]에 설정합니다. 일단 내가 (그리고 조금 혼란스러워지고있는 곳에서) 이것을 수행하면 각 주파수 "밴드"에 대해 별도의 Gain Node을 만들고 그 값을 슬라이더에 바인딩합니다. 그 모두가 올바른 가정

<input id="someFreqBand" type="range" min="-12" max="12" step="0.1" value="0" onchange="slide()"/> 

후 유일하게 남아있는 단계는 내가 10 개의 주파수 "대역"을 받아 믹스/함께 그들을 다시 동기화됩니다 상상 오디오 문맥 destination (모든 10 개 게인 노드를 연결하는 것입니다). 웹 오디오 10 밴드 이퀄라이저를 만드는 것이 올바른 방법일까요?

내가 혼란스러워하는 주요한 점은 모든 노드가 단일 입력 또는 출력 (목적지 포함)을 가지고 있기 때문에 소스를 10 개의 주파수 대역 필터 (+ 관련 이득 노드)에 "연결"하는 방법입니다. .

Answer 1

매트 D가 말했듯이 동일한 대상에 필터를 연결해도 문제가 없습니다.

그러나 필자는 필터가 5 번 (피킹) 인 필터를 사용하고 싶다고 말하고 싶습니다.이 필터는 각 주파수를 통과시키고 각각의 filter.frequency.value를 설정 한 빈도로만 증폭/축소합니다. 따라서 10 개의 별도 오디오 경로가 필요 없도록 필터를 직렬로 연결할 수 있습니다. 첫 번째 필터로 로우 쉘프 (low-shelf) 필터를 사용하고, 10 번째로 하이 - 쉘프 (hi-shelf) 필터를 사용하는 것도 고려해 볼 수 있습니다. Winamp가하는 일인지 기억이 안납니다.

마지막으로 피킹 필터를 직렬로 연결하면 각 주파수마다 별도의 게인 노드가 필요하지 않으므로 특정 필터에 대해 filter.gain.value 만 설정하면됩니다.

Answer 2

내가 헷갈리는 주요한 점은 모든 노드가 단일 입력 또는 출력 만 가지므로 (예 : 관련 이득 노드) 10 개의 주파수 대역 필터에 소스를 "연결"하는 방법입니다. 목적지).

사실이지만 다른 물리적 입력에만 연결할 수있는 실제 출력처럼 생각하지 마십시오. Web Audio 노드의 단일 출력은 여러 노드에 연결될 수 있으며 노드는 여러 입력을 수신 할 수도 있습니다. 예를 들어 5 개의 필터를 통해 입력 노드를 병렬로 연결 한 다음 다시 결합하려고한다고 가정 해 봅시다. 당신이 뭔가를 할 수 있습니다 :

source.connect(filter1); 
source.connect(filter2); 
source.connect(filter3); 
source.connect(filter4); 
source.connect(filter5); 

filter1.connect(context.destination); 
filter2.connect(context.destination); 
filter3.connect(context.destination); 
filter4.connect(context.destination); 
filter5.connect(context.destination); 

여기서 중요한 통찰력을 여러 번 .connect 호출하면 다른 노드로 출력을 전환하지 않지만 단순히 추가 출력 연결을 추가 할 것입니다. 즉, "팬 아웃/팬 인"시스템입니다.

Answer 3

대상을 가진 모든 필터를 연결하여 5 개의 경로 (경로)를 만들면 원본 사운드가 5 배 증폭됩니다. 올바른 방법이 아닙니다. 각 필터를 한 줄에 연결해야합니다.

source.connect(filter1); 
filter1.connect(filter2); 
filter2.connect(filter3); 
filter3.connect(filter4); 
filter4.connect(filter5); 
filter5.connect(context.destination);