scriptProcessorNode.onaudioprocess 无法访问全局变量答案

【问题标题】：scriptProcessorNode.onaudioprocess not able to access global variablesscriptProcessorNode.onaudioprocess 无法访问全局变量
【发布时间】：2015-05-25 20:08:06
【问题描述】：

我正在围绕 scriptProcessorNode 振荡器构建类。我已将onaudioprocess 事件处理程序包装在函数Gendy.prototype.process 中。我可以从这个包装函数中访问全局变量和函数，但不能从 onaudioprocess 函数中访问它们。

我为这些属性设计了一个变通方法，在包装函数中重新定义它们，但是当尝试使用this.walk() 调用另一个方法（随机游走方法）时，这不起作用。

这是我的代码：

Gendy.prototype.process = function(){
    var point = 0;
    var index = 0;
    var y = 0;
    var breakpoint = this.breakpoint;
    var freq = this.freq;

    var walk = this.walk();

    this.scriptNode.onaudioprocess = function(audioProcessingEvent){

        var outputBuffer = audioProcessingEvent.outputBuffer;
        var outputData = outputBuffer.getChannelData(0);

        for(var j = 0; j < outputData.length;j++){
            // linearly interpolate between the new breakpoint positions
            // get the interp point by comparing index to the x distance
            var lerp = (index - breakpoint[point].x) / (breakpoint[point+1].x - breakpoint[point].x);

            y = lerp * (breakpoint[point+1].y - breakpoint[point].y) + breakpoint[point].y;
            if(point < breakpoint.length && index >= breakpoint[point+1].x) {
                point++;
            }

            outputData[j] = y;
            index+=freq; 
            if(index >= breakpoint[breakpoint.length-1].x){
                index = 0;
                point = 0;
                walk(); 
            }  
        }
    }

}

这会发出声音，但会返回错误：

Uncaught TypeError: walk is not a function

几行，然后

Uncaught TypeError: undefined is not a function

永远。

这是 scriptProcessorNode 的错误吗？任何见解将不胜感激！

【问题讨论】：

你能多显示一点你的代码吗，我认为问题出在this 范围内，但如果不查看Gendy.prototype.process 和this.scriptNode 的声明/使用位置，就无法真正判断...
完整源代码在 github 上。我想我用 .bind(this) 解决了它。这听起来不对，但范围之谜解决了。

标签： javascript audio signal-processing web-audio-api scriptprocessor

【解决方案1】：

scriptProcessorNode 中没有错误，问题在于以下行：

this.scriptNode.onaudioprocess = function(audioProcessingEvent){

onaudioprocess 中的this 变量默认引用this.scriptNode 对象，您可以通过以下两种方式之一进行处理：

使用bind（正如您在回答中所做的那样）：

this.scriptNode.onaudioprocess = function(audioProcessingEvent){
    ...
}.bind(this)

使用局部变量来保存this 的值，并使用该局部变量代替this：

var self = this;
this.scriptNode.onaudioprocess = function(audioProcessingEvent){
    ...

【讨论】：

【解决方案2】：

我可以通过将.bind(this) 附加到onaudioprocess 函数中来访问this。

代码如下：

Gendy.prototype.process = function(){

    this.scriptNode.onaudioprocess = function(audioProcessingEvent){

        var outputBuffer = audioProcessingEvent.outputBuffer;
        var outputData = outputBuffer.getChannelData(0);

        for(var j = 0; j < outputData.length;j++){
            // linearly interpolate between the new breakpoint positions
            // get the interp point by comparing index to the x distance
            var lerp = (this.index - this.breakpoint[this.point].x) / (this.breakpoint[this.point+1].x - this.breakpoint[this.point].x);

            this.y = lerp * (this.breakpoint[this.point+1].y - this.breakpoint[this.point].y) + this.breakpoint[this.point].y;
            if(this.point < this.breakpoint.length && this.index >= this.breakpoint[this.point+1].x) {
                this.point++;
            }

            outputData[j] = this.y;
            this.index+=this.freq; 
            if(this.index >= this.breakpoint[this.breakpoint.length-1].x){
                this.index = 0;
                this.point = 0;
                this.walk(); 
            }  
        }
    }.bind(this);
}

【讨论】：