Safari being Safari

index.html

@@ -71,5 +71,12 @@
   </body>
 
   <!-- Main -->
-  <script async src="./dist/bundle.js"></script>
+  <!-- <script async src="./dist/bundle.js"></script> -->
+  <script>
+    setTimeout(() => {
+      var bundleTag = document.createElement('script');
+      bundleTag.src = './dist/bundle.js';
+      document.body.appendChild(bundleTag);
+    }, 1);
+  </script>
 </html>

src/models/Track.ts

@@ -26,7 +26,8 @@ export default class Track {
   filterFrequency = 1;
   filterQuality = 0;
 
-  audioCtx = new AudioContext();
+  audioCtx: AudioContext = new ((window as any).AudioContext ||
+    (window as any).webkitAudioContext)();
   gainNode = this.audioCtx.createGain();
   filterNode = this.audioCtx.createBiquadFilter();
 

src/services/MpkController.ts

@@ -119,7 +119,13 @@ class MpkController {
     this.runIntroAnimBinded = this.runIntroAnim.bind(this);
 
     // Check if the user already granted access
-    (<any>navigator).permissions.query({ name: 'midi', sysex: true }).then(
+    const permissions = (<any>navigator).permissions;
+    if (!permissions || !permissions.query) {
+      this.setStatus(MpkStatus.incompatible);
+      return;
+    }
+
+    permissions.query({ name: 'midi', sysex: true }).then(
       (status: any /* PermissionStatus */) => {
         if (status.state === 'granted') {
           this.accessDevice();