Introduce Gapless Playback

package.json

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

src/ui/actions/AppActions.ts

@@ -43,6 +43,7 @@ const init = async () => {
 
   // Bind player events
   // Audio Events
+  Player.getAudio().addEventListener('next', PlayerActions.next);
   Player.getAudio().addEventListener('ended', PlayerActions.next);
   Player.getAudio().addEventListener('error', PlayerActions.audioError);
   Player.getAudio().addEventListener('timeupdate', async () => {

src/ui/actions/PlayerActions.ts

@@ -7,11 +7,11 @@ import types from '../constants/action-types';
 import SORT_ORDERS from '../constants/sort-orders';
 
 import * as app from '../lib/app';
-import * as utils from '../utils/utils';
 import Player from '../lib/player';
 import { sortTracks, filterTracks } from '../utils/utils-library';
 import { shuffleTracks } from '../utils/utils-player';
 import { TrackModel, PlayerStatus, Repeat } from '../../shared/types/interfaces';
+import { updatePlayerTrackQueue } from '../reducers/player';
 import * as ToastsActions from './ToastsActions';
 
 const { ipcRenderer } = electron;
@@ -71,7 +71,7 @@ export const start = async (queue?: TrackModel[], _id?: string) => {
     }
   }
 
-  const { shuffle } = state.player;
+  const { shuffle, repeat } = state.player;
 
   const oldQueue = [...newQueue];
   const trackId = _id || newQueue[0]._id;
@@ -83,11 +83,6 @@ export const start = async (queue?: TrackModel[], _id?: string) => {
 
   // If a track exists
   if (queuePosition > -1) {
-    const uri = utils.parseUri(newQueue[queuePosition].path);
-
-    Player.setAudioSrc(uri);
-    await Player.play();
-
     let queueCursor = queuePosition; // Clean that variable mess later
 
     // Check if we have to shuffle the queue
@@ -98,6 +93,13 @@ export const start = async (queue?: TrackModel[], _id?: string) => {
       queueCursor = 0;
     }
 
+    updatePlayerTrackQueue({
+      queue: newQueue,
+      queueCursor,
+      repeat
+    });
+    await Player.play();
+
     store.dispatch({
       type: types.PLAYER_START,
       payload: {
@@ -156,13 +158,13 @@ export const next = async () => {
       newQueueCursor = queueCursor + 1;
     }
 
-    const track = queue[newQueueCursor];
-
     // tslint:disable-next-line strict-type-predicates
-    if (track !== undefined) {
-      const uri = utils.parseUri(track.path);
-
-      Player.setAudioSrc(uri);
+    if (queue[newQueueCursor] !== undefined) {
+      updatePlayerTrackQueue({
+        queue,
+        queueCursor: newQueueCursor,
+        repeat
+      });
       await Player.play();
       store.dispatch({
         type: types.PLAYER_NEXT,
@@ -184,7 +186,7 @@ export const previous = async () => {
   const currentTime = Player.getCurrentTime();
 
   // TODO (y.solovyov | martpie): calling getState is a hack.
-  const { queue, queueCursor } = store.getState().player;
+  const { queue, queueCursor, repeat } = store.getState().player;
   let newQueueCursor = queueCursor;
 
   if (queueCursor !== null && newQueueCursor !== null) {
@@ -194,13 +196,13 @@ export const previous = async () => {
       newQueueCursor = queueCursor - 1;
     }
 
-    const newTrack = queue[newQueueCursor];
-
     // tslint:disable-next-line
-    if (newTrack !== undefined) {
-      const uri = utils.parseUri(newTrack.path);
-
-      Player.setAudioSrc(uri);
+    if (queue[newQueueCursor] !== undefined) {
+      updatePlayerTrackQueue({
+        queue,
+        queueCursor: newQueueCursor,
+        repeat
+      });
       await Player.play();
 
       store.dispatch({

src/ui/actions/QueueActions.ts

@@ -3,18 +3,22 @@ import types from '../constants/action-types';
 
 import * as app from '../lib/app';
 import Player from '../lib/player';
-import * as utils from '../utils/utils';
 
 import { Track } from '../../shared/types/interfaces';
+import { updatePlayerTrackQueue } from '../reducers/player';
 
 /**
  * Start audio playback from the queue
  */
 export const start = async (index: number) => {
-  const { queue } = store.getState().player;
-  const uri = utils.parseUri(queue[index].path);
+  // TODO (y.solovyov | martpie): calling getState is a hack.
+  const { queue, repeat } = store.getState().player;
 
-  Player.setAudioSrc(uri);
+  updatePlayerTrackQueue({
+    queue,
+    queueCursor: index,
+    repeat
+  });
   await Player.play();
 
   store.dispatch({

src/ui/lib/player.ts

@@ -1,3 +1,4 @@
+import PreciseAudio from '@synesthesia-project/precise-audio';
 import * as app from './app';
 
 interface PlayerOptions {
@@ -8,7 +9,7 @@ interface PlayerOptions {
 }
 
 class Player {
-  private audio: HTMLAudioElement;
+  private audio: PreciseAudio;
   private durationThresholdReached: boolean;
   public threshold: number;
 
@@ -21,11 +22,12 @@ class Player {
       ...options
     };
 
-    this.audio = new Audio();
+    this.audio = new PreciseAudio();
 
+    // Disable gapless for any songs longer than 10 minutes
+    // TODO: allow user configuration of this
+    this.audio.thresholds.basicModeThresholdSeconds = 60 * 10;
     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,15 +83,14 @@ class Player {
   }
 
   async setOutputDevice(deviceId: string) {
-    // eslint-disable-next-line
-    // @ts-ignore
     await this.audio.setSinkId(deviceId);
   }
 
-  setAudioSrc(src: string) {
+  setTracks(srcs: string[]) {
+    console.log('setTracks', srcs);
     // When we change song, need to update the thresholdReached indicator.
     this.durationThresholdReached = false;
-    this.audio.src = src;
+    this.audio.updateTracks(...srcs);
   }
 
   setAudioCurrentTime(currentTime: number) {