Angular 2 中的 WebAudio 的 ScriptProcessor

Question

我需要在 Angular 2 中动态生成音频，我找到了一个使用 WebAudio 但在 JS 中的工作示例。在 JS 中一切正常，我今天可以为 TS (Angular 2) 播放一些声音（例如随机噪声）。问题是我需要访问我服务中的一个变量，但是来自脚本处理器事件 (onaudioprocess)。下面有一个示例代码。

这可能吗？在 JS 中，我有全局变量并且工作得很好。

进口...

@Injectable()
export class SomeService {
    variable: any;
  constructor()
  {
    this.variable = new Variable();
    this.initWebAudio();
  }

   initWebAudio(): void
    {
         try {
            this.context = new ((<any>window).AudioContext || (<any>window).webkitAudioContext)();
            this.context.SampleRate = this.sample_rate;

            this.masterGainNode = this.context.createGain();
            this.masterGainNode.gain.value = 0.5;
            this.masterGainNode.connect(this.context.destination);

            this.startJSProcessor();
          }
          catch(e) {
            alert('Web Audio API is not supported in this browser');
          }     
    }

    startJSProcessor(): void
     {      
        if(this.context.createScriptProcessor)
        {
            this.jsProcessor = this.context.createScriptProcessor(4096, 1, 2);
            //alert("Chrome Desktop/Android");
        }
         else if(this.context.createJavaScriptNode)
         {
            this.jsProcessor= this.context.createJavaScriptNode(4096,1,2);
            //alert("Safari");
        }
         else
        {
            alert("No way");
        }           
        this.jsProcessor.onaudioprocess = this.generateSounds;
        this.jsProcessor.connect(this.masterGainNode);
     }

     generateSounds(event: any): void
     {       
        var outputR = event.outputBuffer.getChannelData(0);
        var outputL = event.outputBuffer.getChannelData(1);     

        //"this" is undefined here...       
        var something = this.variable.something;
      }

Answer 1

这与困扰 JS 人员多年的问题相同。您不能直接使用 this.generateSounds 作为回调，因为它会丢失 this 绑定。试试这个：

this.jsProcessor.onaudioprocess = this.generateSounds.bind(this);

或（等效）：

this.jsProcessor.onaudioprocess = (event: any) => {
  this.generateSounds(event);
};

Angular 2 中的 WebAudio 的 ScriptProcessor

WebAudio's ScriptProcessor in Angular 2

typescript

angular2-routing

angular2-services

web-audio-api