Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AudioContext and webkitAudioContext missing in Window definition in lib.dom.d.ts #31686

Closed
jonsadka opened this issue May 31, 2019 · 16 comments
Closed
Assignees
Labels
Needs Investigation This issue needs a team member to investigate its status.

Comments

@jonsadka
Copy link

jonsadka commented May 31, 2019

For most modern browsers, there exists some type of AudioContext on the window, however the current definition for Window has neither of these.

  • In some browsers, the audio context exists at window.AudioContext
  • In some browsers, the audio context exists at window.webkitAudioContext

I would expect the definition of Window in lib.dom.d.ts too look something similar to this:

interface Window extends EventTarget, WindowTimers, WindowSessionStorage, WindowLocalStorage, WindowConsole, GlobalEventHandlers, IDBEnvironment, WindowBase64, GlobalFetch, WindowOrWorkerGlobalScope, WindowEventHandlers {
    AudioContext?: typeof AudioContext;
    webkitAudioContext?: typeof AudioContext;
    ...

Search Terms:
AudioContext, webkitAudioContext , audio context missing in window

Code

window.AudioContext
window.webkitAudioContext

Expected behavior:
AudioContext and webkitAudioContext are defined on the window object

Actual behavior:
AudioContext and webkitAudioContext are not defined on the window object

Playground Link:
https://www.typescriptlang.org/play/#src=window.AudioContext%0Awindow.webkitAudioContext

@jonsadka jonsadka changed the title AudioContext and webkitAudioContext missing in lib.dom.d.ts AudioContext and webkitAudioContext missing in Window definition in lib.dom.d.ts May 31, 2019
@RyanCavanaugh RyanCavanaugh added the Needs Investigation This issue needs a team member to investigate its status. label Jun 13, 2019
@rtmalone
Copy link

For anyone else running into this, in the meantime you can extend the window in your declarations.d.ts file like so:

interface Window {
  webkitAudioContext: typeof AudioContext
}

I've had to take this approach a handful of times when vendor prefixed APIs aren't included in lib.dom.d.ts

@arathore-gaming
Copy link

I am also facing this issue, any update on this?

@Eisenspalter
Copy link

me too! AudioContext is defined webkitAudioContext is still missing

@jcleefw
Copy link

jcleefw commented May 30, 2020

webkitAudioContext is old naming conventions in the Web Audio which is now the AudioContext.

which i think nothing will be done anytime soon.

The way around is to add

declare global {
  interface Window {
    webkitAudioContext: typeof AudioContext
  }
}

remember to make sure your declaration files are added into you tsconfig.json

"files": ["./declarations.d.ts"],```

@ssrm
Copy link

ssrm commented Jun 7, 2020

Any update on this?

@jonsadka
Copy link
Author

jonsadka commented Jun 9, 2020

@sandersn any thoughts on this? Pinging you because I see you as assigned on the issue

@sandersn
Copy link
Member

@jcleefw is right. AudioContext is the standard name, and you can add an alias on window using interface merging. If you're not using modules to import/export, you don't even need the declare global wrapper.

@fatcerberus
Copy link

Why is this closed? Window['AudioContext'] still doesn't exist, and until it does I still need a ts-ignore here:
https://github.com/fatcerberus/oozaru/blob/master/src/audialis.ts#L37-L38

@sandersn
Copy link
Member

@fatcerberus Try just AudioContext. Both the type and the value are global, and since window: Window & typeof globalThis the value appears as a property of window as well. But that's not true of the type.

You might open a new issue for mirroring global types into Window, but I personally don't think it's a good idea.

@fatcerberus
Copy link

How do I write/type this function if the globals don't exist on Window?
https://github.com/fatcerberus/oozaru/blob/master/src/prefix.ts#L37-L45

@sandersn
Copy link
Member

replace Window with typeof globalThis and window with globalThis.

@fatcerberus
Copy link

Hmm, isn’t globalThis recent? I wouldn’t expect that to work when e.g. "target": "es2015". I’ll need to try it

@sandersn
Copy link
Member

sandersn commented Jun 16, 2020

It's not flagged -- if you use it as a value, you're expected to bring your own shim.

@fatcerberus
Copy link

fatcerberus commented Jun 16, 2020

Hmm, I guess that’s convenient, but inconsistent with how other ES-defined globals are treated so I wouldn’t have guessed on my own that that was the case. Thanks.

More to the point though: Why are Window and typeof globalThis not the same type? Is there ever a case in practice where they differ at runtime?

@sandersn
Copy link
Member

I'm not sure whether Window has properties that aren't defined globally, but for backward compatibility, it's important to keep code like this working:

interface Window {
  browserSpecific: number
}

gdstrong added a commit to pytchlang/pytch-webapp that referenced this issue Feb 18, 2021
Safari doesn't implement window.AudioContext, but it does have
the Web Audio API with a vendor prefix. Older versions of Chrome
need this too, I hear.

I think the 'as any' declaration could be avoided by including
a type definition for webkitAudioContext in the window interface
(see microsoft/TypeScript#31686 )
and I believe these are in some community definitions somewhere?
@fresonn
Copy link

fresonn commented Jan 25, 2023

webkitAudioContext is old naming conventions in the Web Audio which is now the AudioContext.

which i think nothing will be done anytime soon.

The way around is to add

declare global {
  interface Window {
    webkitAudioContext: typeof AudioContext
  }
}

remember to make sure your declaration files are added into you tsconfig.json

"files": ["./declarations.d.ts"],```

Thanks it still helps

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Investigation This issue needs a team member to investigate its status.
Projects
None yet
Development

No branches or pull requests

10 participants