Use @synesthesia-project/precise-audio instead of Audio

PreciseAudio provides an API for gapless playback, and presents
mostly the same interface as Audio, so switching to this library
didn't require too many changes, and paves the way for martpie#31

PreciseAudio also uses an AudioContext internally,
and makes the audio graph available for mutation via
getAudioNodes(), which will allow for features such as
equalizers (martpie#127) or visualizers / analyzers.

Fixes martpie#128

package.json

@@ -31,6 +31,7 @@
     "package:checksums": "bash scripts/checksum.sh"
   },
   "dependencies": {
+    "@synesthesia-project/precise-audio": "^0.2.3",
     "bluebird": "3.7.2",
     "chardet": "0.8.0",
     "classnames": "2.2.6",

src/ui/lib/player.ts

@@ -1,4 +1,5 @@
 import * as app from './app';
+import PreciseAudio from '@synesthesia-project/precise-audio';
 
 interface PlayerOptions {
   playbackRate?: number;
@@ -8,7 +9,7 @@ interface PlayerOptions {
 }
 
 class Player {
-  private audio: HTMLAudioElement;
+  private audio: PreciseAudio;
   private durationThresholdReached: boolean;
   public threshold: number;
 
@@ -21,11 +22,9 @@ class Player {
       ...options
     };
 
-    this.audio = new Audio();
+    this.audio = new PreciseAudio();
 
     this.audio.defaultPlaybackRate = mergedOptions.playbackRate;
-    // eslint-disable-next-line
-    // @ts-ignore
     this.audio.setSinkId(mergedOptions.audioOutputDevice);
     this.audio.playbackRate = mergedOptions.playbackRate;
     this.audio.volume = mergedOptions.volume;
@@ -81,8 +80,6 @@ class Player {
   }
 
   async setOutputDevice(deviceId: string) {
-    // eslint-disable-next-line
-    // @ts-ignore
     await this.audio.setSinkId(deviceId);
   }