undefined is not a constructor (evaluating 'new window.AudioContext') on Safari

the error is TypeError: undefined is not a constructor (evaluating 'new window.AudioContext')

Steps to Reproduce

I reproduced using a fresh clone of the example-ts-webpack, and tested with both 0.21.0 and 0.22.0 versions of excalibur. Start the running the project and press the play button and error will appear and the game will not start.

More specifically the error comes from calling ex.AudioContextFactory.create(); the create function does not properly set the audio context if the case is webkit.

Expected Result

Expect for the audio context to be defined or gracefully fail

Actual Result

Error is thrown and execution halts.

Environment

• browsers and versions: Safari 12.1 (14607.1.40.1.4)
• operating system: OSX
• Excalibur versions: 0.21.0, 0.22.0

Current Workaround

Its possible to redefine the static create method to return the webkitAudioContext

ex.AudioContextFactory.create = () => new (<any>window).webkitAudioContext();

which would allow at least for the game to load.

Possible Solution

possible fix might be something like:

public static create(): AudioContext {
    if (!this._INSTANCE) {
      if ((<any>window).AudioContext) {
        this._INSTANCE = new (<any>window).AudioContext();
      } else if (<any>window).webkitAudioContext) {
         this._INSTANCE = new (<any>window).webkitAudioContext();
      }
    }
    return this._INSTANCE;
  }

[magnusandy]

Interesting, I didn’t even think of the build process. I tried messing around here with the webpack config to try get the polyfill to be applied earlier without much success (but I am not too familiar with webpack). I think your proposed code and solution makes more sense in the long run, as it doesn’t rely on tweaking the build process to work properly.

Thanks for the speedy response! I have really been enjoying building with Excalibur 😄

[eonarheim]

Minification seems to have re-ordered the definition of the polyfill. We can address this in 2 ways, export a polyfill applier function that can be called (currently it’s a side effecting import in Engine.ts), update webpack configuration to produce the correct ordering.