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);
    });

score 6 · Accepted Answer · answered Feb 23 '18 at 22:27

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;

score 3 · Answer 2 · answered Feb 23 '18 at 21:59

3

You could just cast window to any:

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

answered Feb 23 '18 at 21:59

sakai

163
7

CalMlynarczyk · Answer 3 · 2018-10-28T14:15:05.497

2

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)();

edited Oct 28 '18 at 14:15

answered Oct 28 '18 at 00:57

CalMlynarczyk

705
2
7
12

score 1 · Answer 4 · answered Jul 12 '18 at 01:10

1

I settled on this one-liner:

const audioContext: AudioContext = new (window["AudioContext"] || window["webkitAudioContext"])();

answered Jul 12 '18 at 01:10

Draghon

347
3
9

This looks simple but unfortunately doesn't compile: `Element implicitly has an 'any' type because index expression is not of type 'number'. TS7015` at the second term in the expression. – tromgy Dec 28 '20 at 00:53

AudioContext issue on Safari

4 Answers4