푸리에 사용은 웹 오디오 API와 함께 변환됩니다

Web Audio API는 JavaScript 프로그래머에게 사운드 처리 및 합성에 쉽게 액세스 할 수 있습니다. 이 기사에서는 Web Audio API의 약간 알려진 기능인 Custom Oskillators에 빛을 비추어 브라우저에서 독특한 음향 효과를 합성하기 위해 푸리에 변환을 쉽게 사용할 수 있습니다. 키 테이크 아웃

웹 오디오 API를 사용하면 JavaScript 프로그래머가 맞춤형 발진기 및 푸리에 변환을 포함하여 사운드 처리 및 합성을 활용하여 브라우저에서 고유 한 음향 효과를 생성 할 수 있습니다. 푸리에 변환은 복잡한 신호를 증분 주파수의 개별 정현파 곡선으로 분해하는 데 사용되는 수학적 도구입니다. 따라서 현실적인 사운드 생성에 이상적입니다. 이 방법은 MP3와 같은 오디오 압축 표준에 의해 사용됩니다. 웹 오디오 API의 사용자 정의 발진기를 사용하여 푸리에 변환을 사용하여 파형을 생성하여 자체 파형을 정의하는 데 사용될 수 있습니다. 이 기능은 경찰 사이렌 또는 독특한 혼음과 같은 복잡한 색조를 합성 할 수 있습니다. 웹 오디오 API에서 푸리에 변환 및 사용자 정의 발진기를 사용한 사운드 합성은 오디오 샘플 작업보다 유연하기 때문에 개발자는 사용자 지정 효과를 완전히 자동화하고 복잡한 색조를 합성 할 수 있습니다.

웹 오디오 오실레이터 웹 오디오 API를 사용하면 사운드를 생성하기 위해 오디오 요소 그래프를 작성할 수 있습니다. 발진기는 그러한 요소 중 하나입니다 - 순수한 오디오 신호를 생성하는 음원입니다. 사인, 정사각형, 톱니 또는 삼각형 일 수있는 주파수와 유형을 설정할 수 있지만 강력한 사용자 정의 유형도 있습니다. 먼저 표준 발진기를 사용해 보겠습니다. 우리는 단순히 주파수를 440Hz로 설정하는데, 음악가는 A4 노트로 인식 할 수있는 440Hz로 설정하고 사인, 사각형, 톱니 및 삼각형 파형의 차이를들을 수있는 유형 선택기를 포함합니다. Codepen의 Seb Molines (@clafou)의 펜 웹 오디오 오실레이터를 참조하십시오.맞춤형 발진기를 사용하면 이러한 내장 유형 대신 고유 한 파형을 정의 할 수 있지만 트위스트로 푸리에 변환을 사용 하여이 파형을 생성합니다. 이로 인해 현실적인 사운드 생성에 이상적으로 적합합니다. 푸리에는 예 에 의해 변환됩니다 푸리에 변환은 다른 많은 응용 프로그램 중에서 MP3와 같은 오디오 압축 표준에서 사용하는 수학 도구입니다. 역 푸리에 변환은 인간 귀가 진동을 처리하여 개별 톤을 인식하는 것과 마찬가지로 구성 주파수로 신호를 분해합니다. 높은 수준에서, 푸리에는 복잡한 신호가 증분 주파수의 개별 정현파 곡선으로 분해 될 수 있다는 사실을 악용합니다. 계수 테이블을 사용하여 작동하며 각각은 기본 주파수의 배수에 적용됩니다. 테이블이 클수록 근사치가 가까워집니다. 흥미? Wikipedia 페이지는 볼만한 가치가 있으며 신호의 분해를 개별 사인 곡선으로 시각화하는 데 도움이되는 애니메이션이 포함되어 있습니다. 그러나 이론을 탐구하기보다는 간단한 연속적인 소리, 즉 에어 혼을 해체하여 이것을 실천하자. 혼을 합성합니다 이 기사에서는 경찰 사이렌과 혼의 기록을 사용할 것입니다. 오픈 소스 오디오 편집기 Audacity를 사용하여 만든 Horn Sound의 분광기가 여기에 표시됩니다.

그것은 다양한 강도의 여러 줄을 명확하게 보여줍니다. 우리가 더 자세히 보면이 간격은 약 160Hz입니다. 푸리에는 기본 주파수 (

f

)와 F의 배수 인 오버톤으로 작동합니다. 우리가 기본 F로 160Hz를 선택하면, 320Hz (2 x f)의 선은 첫 번째 오버 톤, 480Hz (3 x f)의 두 번째 오버 톤 등입니다. 분광기는 모든 라인이 F의 배수에 있음을 보여주기 때문에 F의 각 배외에서 관찰되는 강도의 배열은 기록 된 사운드의 괜찮은 모방을 나타 내기에 충분합니다. 푸리에 계수로부터 사용자 정의 파형을 만드는 CreatePeriodicwave의 웹 오디오 API 문서는 다음과 같이 알려줍니다.

이미지도 있습니다 이 예제에는 상당으로 무시할 수있는 매개 변수가 관련이 없습니다. 따라서이 계수의 배열을 만들어 봅시다 (바닥에서 시작하는 분광기의 선의 밝기에 따라 0.4, 0.4, 1, 1, 0.3, 0.7, 0.6, 0.9, 0.8로 추정 해 보겠습니다. 그런 다음이 테이블에서 사용자 정의 발진기를 만들고 결과 사운드를 합성합니다. 펜을 참조하십시오. 커스텀 오실레이터 : 코드 펜의 Seb Molines (@Clafou)의 혼을 참조하십시오.진정 사운드는 아니지만 녹음 된 사운드에 눈에 띄게 가깝습니다. 물론, 소리 합성은 스펙트럼만으로 훨씬 훨씬 뛰어납니다. 특히 봉투는 음색의 똑같이 중요한 측면입니다. 신호 데이터에서 푸리에 테이블로 우리가 방금 한 것처럼 푸리에 계수를 손으로 만드는 것은 드문 일입니다 (그리고 Horn Sound만큼 간단한 소리는 거의 없으며, 이는 고조파 부분, 즉 F의 배수로 구성됩니다). 일반적으로 푸리에 테이블은 실제 신호 데이터를 역 FFT (빠른 푸리에 변환) 알고리즘에 공급하여 계산됩니다. 크롬 저장소에서 사운드를 선택할 수있는 푸리에 계수를 찾을 수 있습니다. Codepen의 Seb Molines (@clafou)의 펜 커스텀 오실레이터 : angoc. DSP.JS 오픈 소스 라이브러리를 사용하면 자체 샘플 데이터에서 이러한 푸리에 계수를 계산할 수 있습니다. 이제 특정 파형을 생성하기 위해 이것을 시연 할 것입니다. 저주파 발진기 : 경찰 사이렌 톤

미국 경찰 사이렌은 낮은 주파수와 고주파 사이에서 진동합니다. 두 개의 발진기를 연결하여 웹 오디오 API를 사용하여이를 달성 할 수 있습니다. 첫 번째 (저주파 발진기 또는 LFO)는 두 번째의 주파수를 조절하여 자체가 가청 사운드 파를 생성합니다. 실제와 마찬가지로, 우리는 이전과 마찬가지로 경찰 사이렌 사운드의 분광기를 동일한 녹음에서 가져옵니다.

우리는 수평선이 아니라 사이렌의 리듬 톤 변조를 나타내는 상어 지느러미 모양 파형을 볼 수 있습니다. 표준 발진기는 사인, 사각형, 톱니 모양 및 삼각형 모양의 파형 만 지원 하므로이 특정 파형을 모방하기 위해 의존 할 수 없습니다. 그러나 다시 한 번 사용자 정의 발진기를 만들 수 있습니다. 먼저 원하는 곡선을 나타내는 값 배열이 필요합니다. 다음 함수는 이러한 값을 생성하며,이 값은 SharkFinValues라는 배열로 넣습니다. Codepen의 Seb Molines (@Clafou)의 사이렌 톤 변조에 대한 펜 파형 기능을 참조하십시오.다음으로 DSP.JS를 사용 하여이 신호 데이터에서 푸리에 계수를 계산합니다. 우리는 LFO를 초기화하는 데 사용하는 실제 및 이미지 어레이를 얻습니다.

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

마지막으로, 우리는 두 번째 발진기를 생성하고 LFO를 게인 노드를 통해 LFO의 출력을 증폭시켜 주파수에 연결합니다. 우리의 분광기에 따르면 파형은 약 380ms이므로 LFO 주파수를 1/0.380으로 설정합니다. 또한 사이렌의 기본 톤은 약 750Hz에서 약 1650Hz (중앙값 1200Hz ± 450Hz)까지 다양하므로 오실레이터의 주파수를 1200으로, LFO의 이득을 450으로 설정합니다. 이제 경찰 사이렌을 들으려면 두 발진기를 모두 시작할 수 있습니다.

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

Codepen의 Seb Molines (@Clafou)의 펜 사이렌 참조. 더 현실감을 위해 Horn Sound와 함께 표시된 것처럼 두 번째 오실레이터에 사용자 정의 파형을 적용 할 수도 있습니다.

결론 푸리에 변환을 사용하면 맞춤형 발진기가 웹 오디오 개발자에게 복잡한 톤을 합성하고 시연 한 사이렌 파형과 같은 사용자 지정 효과를 완전히 자동화하는 방법을 제공합니다. 사운드 합성은 오디오 샘플 작업보다 훨씬 유연합니다. 예를 들어이 모바일 앱에서 도플러 시프트를 추가하기 위해 더 많은 효과를 추가하기 위해이 사이렌 효과를 쉽게 구축 할 수 있습니다. "Can I Wee"사양은 웹 오디오 API가 IE를 제외하고 광범위한 브라우저 지원을 즐기고 있음을 보여줍니다. 모든 브라우저가 최신 W3C 표준으로 최신 브라우저를 최신 상태로 유지하는 것은 아니지만 교차 브라우저 코드를 작성하는 데 도움이되는 원숭이 패치를 사용할 수 있습니다. Android L은 버전 6 이후 iOS가해온 WebView에 웹 오디오 API 지원을 추가 할 것입니다. 이제 실험을 시작하기에 좋은시기입니다! 웹 오디오 API 와 함께 푸리에 변환을 사용하는 것에 대한 자주 묻는 질문 (FAQ) 웹 오디오 API 란 무엇이며 어떻게 작동합니까?

웹 오디오 API는 웹 애플리케이션에서 오디오를 처리하고 합성하기위한 고급 JavaScript API입니다. 이를 통해 개발자는 오디오 소스를 선택하고, 오디오에 효과를 추가하고, 오디오 시각화를 만들고, 공간 효과 (패닝 등) 등을 적용 할 수 있습니다. 다양한 오디오 노드를 생성하고 연결하여 오디오 라우팅 그래프를 형성 할 수있는 오디오 컨텍스트를 작성하여 작동합니다. 각 노드는 사운드 생성, 볼륨 변경 또는 오디오 효과를 적용하는 것과 같은 특정 오디오 기능을 수행합니다. 푸리에 변환은 웹 오디오 API에서 어떻게 작동합니까? 푸리에 변환은 시간의 함수를 주파수의 함수로 변환하는 수학적 메소드입니다. 웹 오디오 API의 맥락에서 오디오 신호에 존재하는 주파수를 분석하는 데 사용됩니다. 이는 실시간 빈도 및 시간 영역 분석 정보를 제공하는 AnalySernode 인터페이스를 사용하여 수행됩니다. 푸리에 변환은 시간 도메인 데이터를 주파수 도메인 데이터로 변환하는 데 사용되며, 오디오 시각화 생성과 같은 다양한 목적으로 사용할 수 있습니다.

웹 오디오 API의 fftsize 속성은 무엇입니까?

웹 오디오 API를 사용하여 오디오 시각화를 어떻게 만들 수 있습니까?

웹 오디오 API를 사용하여 오디오 시각화 생성 오디오 데이터 분석과 관련된 오디오 시각화 그런 다음 해당 데이터를 사용하여 시각적 표현을 만듭니다. 이는 일반적으로 실시간 빈도 및 시간 영역 분석 정보를 제공하는 AnalySernode 인터페이스를 사용하여 수행됩니다. 그런 다음이 데이터를 사용하여 파형 그래프 또는 주파수 스펙트럼 그래프와 같은 시각화를 생성 할 수 있습니다. 시각화를 생성하는 특정 방법은 작성하려는 시각화 유형과 그래픽을 만드는 데 사용하는 라이브러리 또는 도구에 따라 다릅니다.

웹 오디오 API를 사용하여 오디오에 효과를 적용하는 방법 ?

웹 오디오 API는 오디오에 효과를 적용하는 데 사용할 수있는 다양한 노드를 제공합니다. 여기에는 다양한 필터 효과를 적용하기위한 Biquadfilternode, Reverb와 같은 컨볼 루션 효과를 적용하기위한 Convolvernode 등을위한 Gainnode, Biquadfilternode 등이 포함됩니다. 이 노드는 오디오 컨텍스트에서 생성 된 다음 오디오 라우팅 그래프에 연결되어 원하는 효과를 오디오에 적용 할 수 있습니다.

웹 오디오 API의 일반적인 사용은 무엇입니까? 웹 오디오 API는 일반적으로 웹 응용 프로그램에서 다양한 목적으로 사용됩니다. 여기에는 오디오 재생 및 제어, 게임에 음향 효과 추가, 오디오 시각화 생성, 가상 현실 애플리케이션을위한 오디오에 공간 효과를 적용하는 등이 포함됩니다. 웹 애플리케이션에서 오디오를 사용하는 강력하고 유연한 방법을 제공합니다. 웹 오디오 API를 사용하여 오디오 재생을 어떻게 제어 할 수 있습니까?

웹 오디오 API는 오디오 재생을 제어하는 ​​몇 가지 방법을 제공합니다. 여기에는 오디오를 시작하고 중지하고 재생 속도를 조정하며 오디오의 다른 부분을 찾는 기능이 포함됩니다. 이것은 일반적으로 메모리 인 오디오 데이터로 구성된 오디오 소스를 나타내는 Audiobuffersourcenode 인터페이스를 사용하여 수행됩니다.

웹 오디오 API가 웹 오디오 API가있는 동안 웹 오디오 API의 일부 제한 사항은 무엇입니까? 강력하고 유연하며 몇 가지 제한 사항이 있습니다. 예를 들어, API를 지원하는 최신 브라우저가 필요하며 고급 오디오 처리 작업에 사용하는 것이 복잡 할 수 있습니다. 또한, 높은 수준의 API이기 때문에 하위 레벨 API에 비해 특정 응용 프로그램에 필요한 제어 수준을 제공하지 않을 수 있습니다.

웹 오디오 API를 사용하여 오디오를 녹음 할 수 있습니까?

. 예, 웹 오디오 API는 오디오를 녹음하는 데 사용될 수 있지만, 이는 주요 목적은 아닙니다. 이것은 일반적으로 미디어 스트림 (예 : 마이크 또는 기타 오디오 입력 장치)으로 구성된 오디오 소스를 나타내는 MediaStreamaUdioSourcenode 인터페이스를 사용하여 수행됩니다.

웹 오디오 API에 대해 더 많이 배울 수 있습니까? Web Audio API에 대해 더 많이 배울 수있는 많은 리소스가 있습니다. MDN (Mozilla Developer Network)은 가이드 및 자습서를 포함한 API에 대한 포괄적 인 문서를 제공합니다. Codecademy, Udemy 및 Coursera와 같은 웹 사이트에는 많은 온라인 자습서와 코스가 있습니다. 또한 Boris Smus의 "Web Audio API"와 같은 주제에 대해 몇 권의 책이 있습니다.

위 내용은 푸리에 사용은 웹 오디오 API와 함께 변환됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!