如何使用JavaScript應用基本音頻過濾器

Question

我正在努力讓基本的音頻過濾器工作。 我想評估至少3-4個例子。

這是一個我正在評估並嘗試工作的JS代碼：

var QUAL_MUL = 30;

function FilterSample() {
  this.isPlaying = false;
  loadSounds(this, {buffer: 'techno.wav'});
};

FilterSample.prototype.play = function() {
  // Create the source.
  var source = context.createBufferSource();
  source.buffer = this.buffer;
  // Create the filter.
  var filter = context.createBiquadFilter();
  filter.type = filter.LOWPASS;
  filter.frequency.value = 5000;
  // Connect source to filter, filter to destination.
  source.connect(filter);
  filter.connect(context.destination);
  // Play!
  source.start(0);
  source.loop = true;
  // Save source and filterNode for later access.
  this.source = source;
  this.filter = filter;
};

FilterSample.prototype.stop = function() {
  this.source.stop(0);
};

FilterSample.prototype.toggle = function() {
  this.isPlaying ? this.stop() : this.play();
  this.isPlaying = !this.isPlaying;
};

FilterSample.prototype.changeFrequency = function(element) {
  // Clamp the frequency between the minimum value (40 Hz) and half of the
  // sampling rate.
  var minValue = 40;
  var maxValue = context.sampleRate / 2;
  // Logarithm (base 2) to compute how many octaves fall in the range.
  var numberOfOctaves = Math.log(maxValue / minValue) / Math.LN2;
  // Compute a multiplier from 0 to 1 based on an exponential scale.
  var multiplier = Math.pow(2, numberOfOctaves * (element.value - 1.0));
  // Get back to the frequency value between min and max.
  this.filter.frequency.value = maxValue * multiplier;
};

FilterSample.prototype.changeQuality = function(element) {
  this.filter.Q.value = element.value * QUAL_MUL;
};

FilterSample.prototype.toggleFilter = function(element) {
  this.source.disconnect(0);
  this.filter.disconnect(0);
  // Check if we want to enable the filter.
  if (element.checked) {
    // Connect through the filter.
    this.source.connect(this.filter);
    this.filter.connect(context.destination);
  } else {
    // Otherwise, connect directly.
    this.source.connect(context.destination);
  }
};

如果有人可以解釋或更好地提供使用JS應用過濾器的簡單工作示例，那將是非常好的。

先感謝您。

Answer 1

（ 在這里演示）

讓我們從創建源開始（這是HTML，非常簡單）

<audio controls="" preload="" src="add/src/here" autoplay=""></audio>

你應該在add/src/here插入一個音頻文件url。 例如，將文件放在Dropbox上並將其添加到那里。

現在我們要創建audiocontext並將<audio>標記連接到webAudio節點：

context = new AudioContext();
source = context.createMediaElementSource(document.getElementsByTagName('audio')[0]);

這是一些基本的audioAPI編程。 現在我們要創建一個過濾節點，並將源連接到過濾器，然后將過濾器連接到揚聲器：

filter = context.createBiquadFilter();
source.connect(filter);
filter.connect(context.destination);

現在，您應該選擇所需的過濾器。 您可以在此處找到所有過濾器（基本上所有有關biquadFilter的信息） 。 請注意，有8種不同的過濾器類型：

“低通”，“高通”，“帶通”，“低架”，“高架”，“高峰”，“缺口”，“全通”

您可以通過獲取其數值來設置這些類型中的這些類型。 根據上面的列表，Lowpass為0，highpass為1，依此類推。 如果您不知道，只需在<#biquadFilter>對象上調用名稱為caps的函數，如下所示： filter.LOWPASS 。 這將返回0.現在讓我們告訴過濾器它應該是一個lowshelf。 這是類型3：

 filter.type = 3; 

編輯：定義類型的標准已經改變了幾次，顯然你現在可以直接使用字符串。 https://www.w3.org/TR/webaudio/#the-biquadfilternode-interface

現在，lowshelf意味着：將給定的增益增強/減小應用於包含和低於給定頻率的所有頻率。 所以，如果我給過濾器的頻率為95：

filter.frequency.value = 95;

濾波器將增益添加到95以下的所有頻率。還要注意.value 。 這是因為有更多函數，如filter.frequency.linearRampToValueAtTime() 。 如果您希望頻率斜坡到某個值，或者一次設置該值，這些功能很方便。 如果您想了解更多信息，請隨時提出。 我想告訴你它，因為我知道它需要花費很多時間來研究它是如何工作的。 沒有關於此的信息，但至少我得到了它的工作。

現在我們想要實際設置增益，這也是一個.value ：

filter.gain.value = 30;

並非所有過濾器都需要增益。 例如，低通意味着讓低於給定頻率的所有頻率通過，並且不做任何特殊的事情。 lowshelf會增強/衰減，因此您需要指定多少。

某些過濾器還需要Q值。 這決定了截止峰值（頻段結束的地方）。 由於我不善於解釋這一點，我直接從w3.org得到了這個：

控制響應在截止頻率處達到峰值的程度。 較大的值會使響應更加尖銳。 請注意，對於此濾波器類型，此值不是傳統的Q值，而是以分貝為單位的諧振值。

現在讓我們說我們實際上想要用斜坡做點什么。 我想在10秒內將頻率從0增加到120。 由於這仍然是實驗性的，它並不像你期望的那樣工作。 讓我們首先使用時間初始化設置值。 我們只是在當前時間將頻率值設置為0：

filter.frequency.setValueAtTime(0.0, context.currentTime);

現在我們希望它在10秒后達到120：

filter.frequency.linearRampToValueAtTime(120.0, context.currentTime+10);

聽到頻率增加非常清楚。 （但它聽起來並不清楚......）。 你可以在這里找到一個小的演示

也可以使用腳本處理器中的數學函數自己進行所有編輯，但這只是一件痛苦的事情，因為支持它是如此實驗性的鉻版本腳本處理器工作是稀缺的。

我希望這可以幫助您過濾器的工作原理。 請注意，使用大量過濾器會使您的輸出聽起來很奇怪。 最后添加一個壓縮器可以規范化所有事情。

如果您還需要了解其他信息，請隨時提出。