为一组Web Audio API节点创建一个简单的构造函数

Creating a simple constructor for a grouping of Web Audio API nodes

本文关键字：一个 简单 构造函数 创建 Audio 一组 Web API 节点      更新时间：2023-09-26

我有一批Web Audio API节点，如下面的代码所示。我想把它抽象成一个简单的构造函数，但是我遇到了麻烦。我不确定我做错了什么。最终结果应该类似于

function filterTemplate(name,freqVal){
     this.name = context.createBiquadFilter();
     this.name.type = 5;    
     this.name.gain.value = null;    
     this.name.Q.value = 1;                  
     this.name.frequency.value = this.freqVal;      // freqVal is here
}

当我调用函数时:

var filter = new filterTemplate("theName",200);  //Uncaught TypeError: Cannot call method 'createBiquadFilter' of undefined

我改变了方法，看起来像这样，错误被删除了

this.name = function(){return context.createBiquadFilter()};

但是对于不同的属性值

我又得到了一个错误
//Uncaught TypeError: Cannot set property 'value' of undefined

我真的很困惑，如何使用内置的浏览器方法和属性来创建一个普通的构造函数。

我想把下面的代码抽象成类似于上面的代码

filter1 = context.createBiquadFilter();
filter1.type = 5;    
filter1.gain.value = null;    
filter1.Q.value = 1;                  
filter1.frequency.value = 80;              // Changes
filter2 = context.createBiquadFilter();
filter2.type = 5;    
filter2.gain.value = 0;    
filter2.Q.value = 1;                  
filter2.frequency.value = 240;            // Changes
filter3 = context.createBiquadFilter();
filter3.type = 5;    
filter3.gain.value = 0;    
filter3.Q.value = 1;                  
filter3.frequency.value = 750;            // Changes
filter4 = context.createBiquadFilter();
filter4.type = 5;    
filter4.gain.value = 0;    
filter4.Q.value = 1;                  
filter4.frequency.value = 2200;            // Changes
filter5 = context.createBiquadFilter();
filter5.type = 5;    
filter5.gain.value = 0;    
filter5.Q.value = 1;                  
filter5.frequency.value = 6000;           // Changes

构建器模式非常适合这种情况。尤其是当你可以设置很多属性的时候。

http://jsfiddle.net/yw8Fm/

您可以像这样创建一个简单的FilterTemplate类。

function FilterTemplate(builder) {
    this.context = builder._context;
    this.context.type = builder._type;    
    this.context.gain.value = builder._gainValue;    
    this.context.Q.value = builder._qValue;                  
    this.context.frequency.value = builder._frequencyValue;
}

它接受一个构造器对象作为构造函数参数。这是Builder。

FilterTemplate.Builder = function () {
    this._context = context.createBiquadFilter();
    this._type = 5;    
    this._gainValue = null;    
    this._qValue = 1;                  
    this._frequencyValue = 80;
    this.context = function (val) { 
        this._context = val; return this; 
    };
    this.type = function (val) { 
        this._type = val; return this; 
    };
    this.gainValue = function (val) { 
        this._gainValue = val; return this; 
    };
    this.qValue = function (val) { 
        this._qValue = val; return this; 
    };
    this.frequencyValue = function (val) { 
        this._frequencyValue = val; return this; 
    };
};

您可以根据需要进一步扩展这个示例。现在您可以轻松创建FilterTemplates。

var filter1 = new FilterTemplate(
    (new FilterTemplate.Builder()).frequencyValue(80)
);
var filter2 = new FilterTemplate(
    (new FilterTemplate.Builder()).frequencyValue(80).qValue(2)
);

你的问题是你的上下文变量的范围。

var filter = new filterTemplate("theName",200);  //Uncaught TypeError: Cannot call method 'createBiquadFilter' of undefined

…意味着上下文变量在您试图访问它的地方(在filterTemplate构造函数中)不可用。

this.name = function(){return context.createBiquadFilter()};

…而是将函数赋值给this.name，在函数运行之前，它不会尝试访问上下文，因此错误被删除。实际发生的情况是，你在this.name中没有过滤器，而是一个函数，而函数没有增益属性，因此当你试图设置this.name.gain.value时，你会得到一个错误。

您应该查找的是定义上下文的位置，并确保可以从filterTemplate中访问该变量。

相关文章：