AudioContext issue on Safari

Question

I'm trying to use AudioContext in my typescript file for an Angular 5 app. It works great on Chrome, doesn't work on Safari. Everything I see by googling says to use window.webkitAudioContext but that immediately blows up when the typescript compiler runs saying that it doesn't exist on type Window.

let context = new AudioContext();
let source = context.createBufferSource();
context
    .decodeAudioData(event.body)
    .then(x => {
        source.buffer = x;
        source.connect(context.destination);
        source.start(0);
    });

Answer 1

You should extend the Window interface and then augment the window object.

Asuming you're using angular-cli, add the following to your typings.d.ts file:

declare interface Window {
  AudioContext: AudioContext;
}

Then inside your polyfills.ts file you could set the AudioContext attribute:

window.AudioContext = window.AudioContext || window.webkitAudioContext;

Answer 2

You could just cast window to any:

(window as any).AudioContext = (window as any).AudioContext || (window as any).webkitAudioContext;
let context = new AudioContext();

Answer 3

You have to add the desired properties to the Window interface in the global namespace.

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

const context = new (window.AudioContext || window.webkitAudioContext)();