WebオーディオAPIを使用してフーリエ変換を使用します

Web Audio APIは、JavaScriptプログラマーにサウンド処理と合成に簡単にアクセスできるようになります。この記事では、カスタムオシレーターに光を当てます。これは、ブラウザで独特のサウンドエフェクトを合成するためにフーリエ変換を簡単に配置できるようにするWebオーディオAPIのあまり知られていない機能です。

キーテイクアウト

• Web Audio APIを使用すると、JavaScriptプログラマーは、カスタムオシレーターとフーリエ変換の使用を含むサウンド処理と合成を利用して、ブラウザにユニークなサウンドエフェクトを作成します。
フーリエ変換は、複雑な信号を分離周波数の個別の正弦波曲線に分解するために使用される数学的ツールであり、現実的なサウンド生成に最適です。この方法は、mp3などのオーディオ圧縮標準で使用されます。 WebオーディオAPIのカスタムオシレーターを使用して、フーリエ変換を使用して波形を生成するために独自の波形を定義できます。この機能により、警察のサイレンや独特のホーンサウンドなどの複雑なトーンの合成が可能です。 Fourier TransformsとCustom Oscillatorsを使用したSound Synthesisは、WebオーディオAPIでオーディオサンプルを使用するよりも柔軟性があり、開発者がカスタムエフェクトを完全に自動化し、複雑なトーンを合成できるようにします。
Webオーディオオシレーター
• Web Audio APIを使用すると、音声を作成するオーディオ要素のグラフを作成できます。オシレーターは、そのような要素の1つです。これは、純粋なオーディオ信号を生成するサウンドソースです。その周波数とそのタイプを設定することができます。これは、正弦、正方形、鋸歯状、または三角形ですが、私たちが見ようとしているように、強力なカスタムタイプもあります。 まず、標準のオシレーターを試してみましょう。ミュージシャンがA4ノートとして認識する440 Hzに周波数を設定するだけで、Sine、Square、Sawtooth、Triangleの波形の違いを聞くためのタイプセレクターを含めます。 codepenのSeb Molines（@clafou）によるペンWebオーディオオシレーターを参照してください。カスタムオシレーターを使用すると、これらの組み込みタイプの代わりに独自の波形を定義できますが、ひねりを加えて、フーリエ変換を使用してこの波形を生成します。これにより、リアルなサウンド生成に理想的に適しています。

  フーリエ変換の例

  フーリエ変換は、他の多くのアプリケーションの中でも、MP3などのオーディオ圧縮標準で使用される数学ツールです。逆フーリエ変換は、個々のトーンを知覚するために人間の耳を処理するように、信号をその構成周波数に分解します。 高レベルでは、フーリエ変換は、複雑な信号を増分周波数の個別の正弦波曲線に分解できるという事実を活用します。係数のテーブルを使用して動作し、それぞれが基本周波数の倍数に適用されます。テーブルが大きいほど、近似が近づきます。興味をそそられましたか？ Wikipediaページは見る価値があり、信号の分解を離散サイン曲線に視覚化するのに役立つアニメーションが含まれています。 しかし、理論を掘り下げるのではなく、シンプルな連続音を解体することによってこれを実践しましょう：エアホーン。

  ホーンの合成

  この記事では、警察のサイレンとホーンのこの録音を使用します。オープンソースオーディオエディターAudacityを使用して作成されたホーンサウンドのスペクトログラフは、ここに示されています。 それは、さまざまな強度の多数のラインを明確に示しており、すべて等しい間隔で間隔を置いています。よく見ると、この間隔は約160Hzです。 フーリエ変換は、基本的な周波数（f と呼びましょう）とその倍音で動作します。基本的なFとして160Hzを選択すると、320Hz（2 x F）のラインは最初の倍音、2番目の倍音480Hz（3 x F）のラインなどです。 スペクトログラフは、すべての線がFの倍数にあることを示しているため、Fの各倍数で観察される強度の配列は、記録された音のまともな模倣を表すのに十分です。 Fourier係数からカスタム波形を作成するCreatePerioDicWaveのWebオーディオAPIドキュメントは、これを示しています。

  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.
  

  画像もあります この例では、フェーズが無関係であるため無視できるパラメーター。 したがって、これらの係数の配列を作成しましょう（それらを0.4、0.4、1、1、1、0.3、0.7、0.6、0.5、0.9、0.8と推定します。次に、このテーブルからカスタムオシレーターを作成し、結果のサウンドを合成します。

  <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>

  Pen Custom Oscillator：Horn by Seb Molines（@CodePen）を参照してください。まさに落ち着いたサウンドではありませんが、録音されたサウンドに非常に近いです。もちろん、音の合成はスペクトルだけをはるかに超えています。特に、封筒は音色の同様に重要な側面です。 信号データからフーリエテーブルへの

  私たちがちょうど行ったように手作業でフーリエ係数を作成することは珍しいことです（そして、ハーモニックな部分、つまりFの倍数で構成されるホーンサウンドほど簡単な音はほとんどありません）。通常、フーリエテーブルは、実際の信号データを逆FFT（高速フーリエ変換）アルゴリズムにフィードすることにより計算されます。 クロムリポジトリ内のサウンドの選択のためのフーリエ係数を見つけることができます。

  ペンカスタムオシレーター：セブモリーヌによるオルガン（@codepen（@clafou）を参照してください。 DSP.JSオープンソースライブラリを使用すると、独自のサンプルデータからそのようなフーリエ係数を計算できます。これを実証して、特定の波形を生成します。

  低周波発振器：警察のサイレントーン

  米国の警察のサイレンは、低頻度と高頻度の間で振動します。 2つの発振器を接続することにより、WebオーディオAPIを使用してこれを実現できます。 1つ目（低周波発振器、またはLFO）は、それ自体が可聴音波を生成する2番目の周波数を変調します。 本物を解体するために、前と同じように、同じ録音から警察のサイレンサウンドの分光器を撮ります。

  水平線ではなく、サイレンのリズミカルなトーン変調を表すサメのフィン型の波形が見られます。標準の発振器は、正弦、正方形、鋸歯状、三角形の波形のみをサポートするため、この特定の波形を模倣するためにそれらに頼ることはできません。しかし、カスタムオシレーターを再び作成できます。 まず、目的の曲線を表す値の配列が必要です。次の関数はそのような値を生成し、それをSharkFinvaluesと呼ばれる配列に詰めます。

  CodepenのSeb Molines（@Clafou）によるサイレントーン変調については、PEN波形関数を参照してください。次に、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の出力を増幅するために、2番目の発振器を作成し、LFOをその周波数に接続します。私たちのスペクトログラフは、波形が約380ミリ秒続くことを示しているため、LFOの周波数を1/0.380に設定します。また、サイレンの基本的なトーンは、約750Hzから約750Hzの高さ（中央値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）によるペンサイレンを参照してください。 よりリアリズムのために、ホーンサウンドで示されたように、2番目の発振器にカスタム波形を適用することもできます。

  結論

  フーリエ変換により、カスタムオシレーターは、Webオーディオ開発者に複雑なトーンを合成し、実証したサイレン波形などのカスタム効果を完全に自動化する簡単な方法を提供します。 サウンド合成は、オーディオサンプルを使用するよりもはるかに柔軟です。たとえば、このモバイルアプリにドップラーシフトを追加するために行ったように、このサイレンエフェクトを上回って効果を追加するのは簡単です。 「使用できますか」Specは、IEを除き、WebオーディオAPIが幅広いブラウザーサポートを楽しんでいることを示しています。すべてのブラウザが最新のW3C標準を備えた最新であるわけではありませんが、クロスブラウザーコードの作成を支援するモンキーパッチを利用できます。 Android Lは、WebオーディオAPIサポートをWebViewに追加します。これは、バージョン6以来IOSが行ってきました。実験を開始するのに最適な時期です。 WebオーディオAPIを使用してフーリエ変換を使用することに関するよくある質問（FAQ）

  Web Audio APIとは何ですか？どのように機能しますか？
  Web Audio APIは、Webアプリケーションでオーディオを処理および合成するための高レベルのJavaScript APIです。開発者は、オーディオソースを選択したり、オーディオに効果を追加したり、オーディオの視覚化を作成したり、空間効果（パンニングなど）を適用したりすることができます。さまざまなオーディオノードを作成して接続してオーディオルーティンググラフを形成できるオーディオコンテキストを作成することで機能します。各ノードは、音の生成、ボリュームの変更、オーディオ効果の適用など、特定のオーディオ関数を実行します。

  フーリエ変換は、Web Audio APIでどのように機能しますか？

  フーリエ変換は、時間、信号の関数を周波数の関数に変換する数学的方法です。 Web Audio APIのコンテキストでは、オーディオ信号に存在する周波数を分析するために使用されます。これは、リアルタイムの周波数および時間領域解析情報を提供するAnalySernodeインターフェイスを使用して行われます。フーリエ変換は、時間領域データを頻度ドメインデータに変換するために使用されます。これは、オーディオビジュアライゼーションの作成などのさまざまな目的に使用できます。 [>>

  Web Audio APIのFFTSizeプロパティは、周波数ドメインを決定するために使用される高速フーリエ変換（FFT）のサイズを設定するために使用されます。これは、フーリエ変換を実行するときに使用されるサンプルの数を決定する2つの値のパワーです。値が高いほど、周波数ビンが増え、周波数データが​​より詳細になります。ただし、より高い値はまた、より多くの計算能力が必要であることを意味します。
  WebオーディオAPIを使用してオーディオ視覚化を作成するにはどうすればよいですか？そして、そのデータを使用して視覚表現を作成します。これは通常、リアルタイムの周波数および時間領域解析情報を提供するAnalySernodeインターフェイスを使用して行われます。このデータを使用して、波形グラフや周波数スペクトルグラフなどの視覚化を作成できます。視覚化を作成する特定の方法は、作成する視覚化の種類と、グラフィックを作成するために使用しているライブラリまたはツールに依存します。 ？
  Web Audio APIは、オーディオに効果を適用するために使用できるさまざまなノードを提供します。これらには、ボリュームの変更のためのゲインノード、さまざまなフィルター効果を適用するためのBiquadFilternode、リバーブなどの畳み込み効果を適用するためのコンバルノードなどが含まれます。これらのノードは、オーディオコンテキストから作成し、オーディオルーティンググラフで接続してオーディオに目的の効果を適用します。 WebオーディオAPIは、一般的にWebアプリケーションのさまざまな目的に使用されます。これらには、オーディオの再生と制御、ゲームへの効果音の追加、オーディオの視覚化の作成、仮想現実アプリケーションのオーディオへの空間効果の適用などが含まれます。 Webアプリケーションでオーディオを使用するための強力で柔軟な方法を提供します。

  Web Audio APIを使用してオーディオの再生を制御するにはどうすればよいですか？

  Web Audio APIは、オーディオの再生を制御するためのいくつかの方法を提供します。これには、オーディオを開始および停止し、再生率を調整し、オーディオのさまざまな部分を求める機能が含まれます。これは通常、メモリのオーディオデータで構成されるオーディオソースを表すAudioBufferSourcenodeインターフェイスを使用して行われます。強力で柔軟に、いくつかの制限があります。たとえば、APIをサポートする最新のブラウザが必要であり、より高度なオーディオ処理タスクに使用するのは複雑です。さらに、それは高レベルのAPIであるため、低レベルのAPIと比較して特定のアプリケーションに必要なコントロールのレベルを提供しない場合があります。

  はい、WebオーディオAPIを使用してオーディオを記録できますが、これは主要な目的ではありません。これは通常、メディアストリーム（マイクやその他のオーディオ入力デバイスなど）で構成されるオーディオソースを表すMediaStreamAudioSourcenodeインターフェイスを使用して行われます。 🎜>

  WebオーディオAPIについて詳しく知るために利用できるリソースがたくさんあります。 Mozilla Developer Network（MDN）は、ガイドやチュートリアルなど、APIに包括的なドキュメントを提供しています。また、Codecademy、Udemy、CourseraなどのWebサイトで利用できるオンラインチュートリアルやコースもたくさんあります。さらに、Boris Smusによる「Web Audio API」など、このテーマに関する本がいくつかあります。

以上がWebオーディオAPIを使用してフーリエ変換を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。