如何使用JavaScript应用基本音频过滤器

如何使用JavaScript应用基本音频过滤器,javascript,html,html5-audio,web-audio-api,Javascript,Html,Html5 Audio,Web Audio Api,我正在尝试让基本的音频过滤器工作。我想评估至少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

我正在尝试让基本的音频过滤器工作。我想评估至少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应用过滤器的简单工作示例,那就太好了

提前感谢您。

(演示)

让我们从创建源代码开始(这是HTML,非常简单)

这是一些基本的audioAPI编程。现在,我们要创建一个过滤器节点,将源连接到过滤器,然后将过滤器连接到扬声器:

filter = context.createBiquadFilter();
source.connect(filter);
filter.connect(context.destination);
现在,您应该选择所需的过滤器。您可以找到所有过滤器。请注意,有8种不同的过滤器类型:

“低通”, “高通”, “带通”, “低货架”, “高货架”, “峰值”, “缺口”, “全通”

您可以通过获取其数值来设置这些类型之一。根据上面的列表,低通为0,高通为1,依此类推。如果您不知道,只需在
对象上使用大写名称调用函数,如下所示:
filter.LOWPASS
。这将返回0。现在,让我们告诉过滤器,它应该是一个低货架。这是类型3:

filter.type = 3;
编辑:定义类型的标准已经更改了好几次,显然您现在可以直接使用字符串

现在低架意味着:将给定的增益提升/降低应用于包含和低于给定频率的所有频率。如果我给滤波器一个95的频率:

filter.frequency.value = 95;
滤波器将增益添加到95以下的所有频率。 还要注意
.value
。这是因为有更多的函数,如
filter.frequency.linearrantovalueattime()
。如果希望频率渐变到某个特定值,或一次设置该值,则这些函数非常方便。如果你想了解更多信息,请随时询问。我想告诉你,因为我知道研究它是如何工作的花费了很多时间。好像没有关于这个的信息,但至少我让它工作了

现在我们要实际设置增益,这也是一个
.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);
很明显听到频率的增加。(但听起来不太清楚…)。 你可以找到它的一个小演示

也可以在ScriptProcessor中使用数学函数自己完成所有编辑工作,但这只是一种痛苦,因为对它的支持是实验性的,所以chrome版本的ScriptProcessor很少使用

我希望这能帮助您了解过滤器的工作原理。请注意,使用过多的过滤器会使您的输出听起来很奇怪。在末端添加一个压缩器可以使一切正常化


如果您还需要了解其他信息,请随时提问。

回答得很好。我认为不是
filter.type=3
filter.type=filter.lowself
现在只需编写
filter.type=“lowself”。另外,对于跨浏览器支持,请使用
var context=new(window.AudioContext | | window.webkitadiocontext)()@JoeRocc是的,他们每次都在更改标准,我会插入。请注意,为chrome添加了前缀webkitAudioContext。但我不知道狩猎。
filter.frequency.setValueAtTime(0.0, context.currentTime);
filter.frequency.linearRampToValueAtTime(120.0, context.currentTime+10);