[英]How to apply basic audio filter using JavaScript
我正在努力让基本的音频过滤器工作。 我想评估至少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,非常简单)
<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);
听到频率增加非常清楚。 (但它听起来并不清楚......)。 你可以在这里找到一个小的演示
也可以使用脚本处理器中的数学函数自己进行所有编辑,但这只是一件痛苦的事情,因为支持它是如此实验性的铬版本脚本处理器工作是稀缺的。
我希望这可以帮助您过滤器的工作原理。 请注意,使用大量过滤器会使您的输出听起来很奇怪。 最后添加一个压缩器可以规范化所有事情。
如果您还需要了解其他信息,请随时提出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.