Property 'AudioContext' does not exist on type 'Window'.

[deepakbandela]

I'm using Ionic2 with Typescript. Unfortunately I couldn't use the cordova plugin version as type definitions are not available yet.

Running the JS version into my Ionic2 project. After following though the installation steps, I see following error.

Property 'AudioContext' does not exist on type 'Window'. Cannot find name 'webkitAudioContext'.

How do we fix this?

[bgoetzmann]

I got the same problem with my Ionic 2 project, in TTSRequest.ts, and used a work around.

I changed the TTSRequest.ts in this way:

declare var AudioContext, webkitAudioContext: any; // ADDED

export class TTSRequest extends Request {

  private static RESPONSE_TYPE_ARRAYBUFFER = "arraybuffer";

  private static audioContext: AudioContext;

  constructor(protected apiAiClient: ApiAiClient, options: IRequestOptions = {}) {
    super(apiAiClient, options);
    // this.requestMethod = XhrRequest.Method.GET;
    this.uri = ApiAiConstants.DEFAULT_TTS_HOST;    
    //const AudioContext = window.AudioContext || webkitAudioContext;
    const _AudioContext = AudioContext || webkitAudioContext;

    if (!TTSRequest.audioContext) {      
      //TTSRequest.audioContext = new AudioContext();
      TTSRequest.audioContext = new _AudioContext();
    }
  }
...
}

But it's not sufficient because of a missing ApiAiClient.js.map; but, by changing tsconfig.json of my Ionic project for the target key, by using es6 instead of es5, the build generated .mapfiles!

Now I can invoke my API.AI agent!

[webnugget]

Same Issue within my Angular4 Application.

ERROR in /.../node_modules/api-ai-javascript/ts/Request/TTSRequest.ts (18,33): Property 'AudioContext' does not exist on type 'Window'.
/.../node_modules/api-ai-javascript/ts/Request/TTSRequest.ts (18,49): Cannot find name 'webkitAudioContext'.

Managed to get it working by modifying the sourcefiles in node_modules directly, as mentioned above, but this isn't a real solution I think.

In case it matters:

ApiAi-Version:

apiai-javascript-client@beta.19

Angular Version:

@angular/cli: 1.0.0
node: 7.8.0
os: darwin x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

[kloncentaur8]

same issue here.

[Gugic]

I think 'AudioContext' is missing if the target is 'es5', correct me if I am wrong.

Actually sdk defines "@types/webaudioapi" as a dependency but you probably can try to install it manually and make sure that your tsconfig respects type definitions.

[bgoetzmann]

I found the solution!

Like in typescript-project demo application, just use "typeRoots": ["./node_modules/@types"] in tsconfig.json (under "compilerOptions"). I have "@types/webaudioapi" under my node_modules folder (sorry, I don't remember if I installed it manually). Last precision: in tsconfig.json file, under "compilerOptions", I kept "target": "es5".

[Alberto2686]

As @Gugic wrote "@types/webaudioapi" is actually set as a dependency of this package so it is automatically downloaded into your node_packages/@types folder when you "npm install" your project.

That types definitions is obsolete: if you open index.d.ts you will see

// DEPRECATED: use TypeScript 1.5.3.

Why is it deprecated? Because some of the definitions (ChannelCountMode, ChannelInterpretation, PanningModelType, DistanceModelType, BiquadFilterType, OverSampleType, OscillatorType) are already defined in Typescript lib.dom.d.ts. Moreover it defines types like webkitaudiocontext which is deprecated and should not be used be used by this package.

So in brief:

1. This package should not have "@types/webaudioapi" as a dependency.
2. When point 1 will be completed and is just include (at least) lib.dom.d.ts in tsconfig.json. For example: "lib": ["es2015", "dom"]

[RavishankarR]

Does this mean that this issue will not be solved until an ES6 version of this client is released?

[Alberto2686]

@RavishankarR no: I think it can be fixed right now.

As a temporary workaround you can delete duplicated typings from @types/webaudioapi (ChannelCountMode, ChannelInterpretation, PanningModelType, DistanceModelType, BiquadFilterType, OverSampleType, OscillatorType) and put "dom" in your typescript config "lib" array. It seems that those definitions are part of lib.dom.d.ts since TS 2.3 or so, therefore it is also possible to keep @types/webaudioapi and remove the "duplicate error" by pinning TS to 2.2.X.

As a solution I created a PR where I did the following: Moved not-duplicated definitions of "@types/webaudioapi" to declarations.d.ts. Removed "@types/webaudioapi" dependency and updated tsconfig(s). Updated typescript dependency version to 2.3.2 (and webpack as well to produce a little smaller build).

I can build everything without errors but I was unable to test it on the demo (but I wasn't able to test the upstream version as well so this doesn't mean anything I guess). Maybe you can check it, @Gugic and let me know.

[Gugic]

@Alberto2686 thank you, i approved your PR, in few days i will try to update demo apps, check everything and deploy new release to npm.

[Alberto2686]

@Gugic thanks, when the npm package is ready I will try on my app as a double check.

[Gugic]

Published new version finally. Do not forget to call npm prune to remove unneded dependencies from project.

[Alberto2686]

Thanks, works like a charm! I guess you can close a couple of open issues :)

[CharlesT100]

I encountered this issue recently - I believe a combination of updating to beta21, removing/reinstalling node_modules worked for me.

[mohamedelmancy]

just remove window and it will work

[Satish-Lakhani]

@mohamedelmancy , What about webkitAudioContext?