remove Howler, use HTML Audio directly

public/javascripts/music/orchestra.js

@@ -1,49 +1,43 @@
 function lichessOrchestra() {
 
-  var soundDir = lichess.assetUrl('sound/instrument/', {noVersion: true});
+  const soundDir = lichess.assetUrl('sound/instrument/', {
+    noVersion: true
+  });
 
-  var makeSoundPair = function(sound) {
-    return [soundDir + sound + '.ogg', soundDir + sound + '.mp3'];
-  };
+  const load = (instrument, index, filename) =>
+    lichess.soundBox.load(
+      `orchestra.${instrument}.${index}`,
+      `${soundDir}${instrument}/${filename}.ogg`
+    );
 
-  var instruments = {
-      celesta: [],
-      clav: [],
-      swells: []
+  const volumes = {
+      celesta: 0.3,
+      clav: 0.2,
+      swells: 0.8
     },
     noteOverlap = 15,
     noteTimeout = 300,
-    currentNotes = 0,
     maxPitch = 23;
 
+  let currentNotes = 0;
+
   // load celesta and clav sounds
-  for (var i = 1; i <= 24; i++) {
+  for (let i = 1; i <= 24; i++) {
     if (i > 9) fn = 'c0' + i;
     else fn = 'c00' + i;
-    instruments.celesta.push(new Howl({
-      src: makeSoundPair('celesta/' + fn),
-      volume: 0.3
-    }));
-    instruments.clav.push(new Howl({
-      src: makeSoundPair('clav/' + fn),
-      volume: 0.2
-    }));
+    load('celesta', i - 1, fn);
+    load('clav', i - 1, fn);
   }
   // load swell sounds
-  for (var i = 1; i <= 3; i++) {
-    instruments.swells.push(new Howl({
-      src: makeSoundPair('swells/swell' + i),
-      volume: 0.8
-    }));
-  }
+  for (let i = 1; i <= 3; i++) load('swells', i - 1, `swell${i}`);
 
-  var play = function(instrument, pitch) {
+  const play = (instrument, pitch) => {
     pitch = Math.round(Math.max(0, Math.min(maxPitch, pitch)));
     if (instrument === 'swells') pitch = Math.floor(pitch / 8);
     if (currentNotes < noteOverlap) {
       currentNotes++;
-      instruments[instrument][pitch].play();
-      setTimeout(function() {
+      lichess.soundBox.play(`orchestra.${instrument}.${pitch}`, volumes[instrument]);
+      setTimeout(() => {
         currentNotes--;
       }, noteTimeout);
     }

ui/site/gulpfile.js

@@ -103,7 +103,6 @@ function makeDependencies(filename) {
   '../../public/javascripts/vendor/jquery.min.js',
   './dist/jquery.fill.js',
   './dep/powertip.min.js',
-  './dep/howler.min.js',
   './dep/mousetrap.min.js',
   './dist/consolemsg.js',
   ...(abFile ? ['./dist/ab.js'] : []),

ui/site/src/index.ts

@@ -1,5 +1,7 @@
 import './standalones/util';
 import './timeago';
+import './soundbox';
+import './sound';
 import './standalones/trans';
 import './socket';
 import './main';

ui/site/src/main.js

@@ -501,141 +501,6 @@
     });
   });
 
-  lichess.sound = (function() {
-    var api = {};
-    var soundSet = $('body').data('sound-set');
-
-    var speechStorage = lichess.storage.makeBoolean('speech.enabled');
-    api.speech = function(v) {
-      if (typeof v == 'undefined') return speechStorage.get();
-      speechStorage.set(v);
-      collection.clear();
-    };
-    api.volumeStorage = lichess.storage.make('sound-volume');
-    api.defaultVolume = 0.7;
-
-    var memoize = function(factory) {
-      var loaded = {};
-      var f = function(key) {
-        if (!loaded[key]) loaded[key] = factory(key);
-        return loaded[key];
-      };
-      f.clear = function() {
-        loaded = {};
-      };
-      return f;
-    };
-
-    var names = {
-      genericNotify: 'GenericNotify',
-      move: 'Move',
-      capture: 'Capture',
-      explode: 'Explosion',
-      lowtime: 'LowTime',
-      victory: 'Victory',
-      defeat: 'Defeat',
-      draw: 'Draw',
-      tournament1st: 'Tournament1st',
-      tournament2nd: 'Tournament2nd',
-      tournament3rd: 'Tournament3rd',
-      tournamentOther: 'TournamentOther',
-      berserk: 'Berserk',
-      check: 'Check',
-      newChallenge: 'NewChallenge',
-      newPM: 'NewPM',
-      confirmation: 'Confirmation',
-      error: 'Error'
-    };
-    for (var i = 0; i <= 10; i++) names['countDown' + i] = 'CountDown' + i;
-
-    var volumes = {
-      lowtime: 0.5,
-      explode: 0.35,
-      confirmation: 0.5
-    };
-    var collection = new memoize(function(k) {
-      var set = soundSet;
-      if (set === 'music' || speechStorage.get()) {
-        if (['move', 'capture', 'check'].includes(k)) return {
-          play: $.noop
-        };
-        set = 'standard';
-      }
-      var baseUrl = lichess.assetUrl('sound', {
-        noVersion: true
-      });
-      return new Howl({
-        src: ['ogg', 'mp3'].map(function(ext) {
-          return [baseUrl, set, names[k] + '.' + ext].join('/');
-        }),
-        volume: volumes[k] || 1
-      });
-    });
-    var enabled = function() {
-      return soundSet !== 'silent';
-    };
-    Object.keys(names).forEach(function(name) {
-      api[name] = function(text) {
-        if (!enabled()) return;
-        if (!text || !api.say(text)) {
-          Howler.volume(api.getVolume());
-          var sound = collection(name);
-          if (Howler.ctx && Howler.ctx.state == "suspended") {
-            Howler.ctx.resume().then(() => sound.play());
-          } else {
-            sound.play();
-          }
-        }
-      }
-    });
-    api.say = function(text, cut, force) {
-      if (!speechStorage.get() && !force) return false;
-      var msg = text.text ? text : new SpeechSynthesisUtterance(text);
-      msg.volume = api.getVolume();
-      msg.lang = 'en-US';
-      if (cut) speechSynthesis.cancel();
-      speechSynthesis.speak(msg);
-      console.log(`%c${msg.text}`, 'color: blue');
-      return true;
-    };
-    api.load = function(name) {
-      if (enabled() && name in names) collection(name);
-    };
-    api.setVolume = function(v) {
-      api.volumeStorage.set(v);
-      Howler.volume(v);
-    };
-    api.getVolume = () => {
-      // garbage has been stored stored by accident (e972d5612d)
-      const v = parseFloat(api.volumeStorage.get());
-      return v >= 0 ? v : api.defaultVolume;
-    }
-
-    var publish = function() {
-      lichess.pubsub.emit('sound_set', soundSet);
-    };
-    setTimeout(publish, 500);
-
-    api.changeSet = function(s) {
-      soundSet = s;
-      collection.clear();
-      publish();
-    };
-
-    api.warmup = function() {
-      if (enabled()) {
-        // See goldfire/howler.js#715
-        Howler._autoResume(); // This resumes sound if suspended.
-        Howler._autoSuspend(); // This starts the 30s timer to suspend.
-      }
-    };
-
-    api.set = function() {
-      return soundSet;
-    };
-    return api;
-  })();
-
   lichess.widget('watchers', {
     _create: function() {
       this.list = this.element.find(".list");

ui/site/src/sound.js

@@ -0,0 +1,104 @@
+lichess.sound = (() => {
+  const api = {};
+  let soundSet = $('body').data('sound-set');
+
+  const speechStorage = lichess.storage.makeBoolean('speech.enabled');
+  api.speech = v => {
+    if (typeof v == 'undefined') return speechStorage.get();
+    speechStorage.set(v);
+    collection.clear();
+  };
+  api.volumeStorage = lichess.storage.make('sound-volume');
+
+  function memoize(factory) {
+    let loaded = {};
+    const f = key => {
+      if (!loaded[key]) loaded[key] = factory(key);
+      return loaded[key];
+    };
+    f.clear = () => {
+      loaded = {};
+    };
+    return f;
+  };
+
+  const names = {
+    genericNotify: 'GenericNotify',
+    move: 'Move',
+    capture: 'Capture',
+    explode: 'Explosion',
+    lowtime: 'LowTime',
+    victory: 'Victory',
+    defeat: 'Defeat',
+    draw: 'Draw',
+    tournament1st: 'Tournament1st',
+    tournament2nd: 'Tournament2nd',
+    tournament3rd: 'Tournament3rd',
+    tournamentOther: 'TournamentOther',
+    berserk: 'Berserk',
+    check: 'Check',
+    newChallenge: 'NewChallenge',
+    newPM: 'NewPM',
+    confirmation: 'Confirmation',
+    error: 'Error'
+  };
+  for (let i = 0; i <= 10; i++) names['countDown' + i] = 'CountDown' + i;
+
+  const volumes = {
+    lowtime: 0.5,
+    explode: 0.35,
+    confirmation: 0.5
+  };
+  const collection = new memoize(k => {
+    let set = soundSet;
+    if (set === 'music' || speechStorage.get()) {
+      if (['move', 'capture', 'check'].includes(k)) return $.noop;
+      set = 'standard';
+    }
+    const baseUrl = lichess.assetUrl('sound', {
+      noVersion: true
+    });
+    const path = `${baseUrl}/${set}/${names[k]}`;
+    lichess.soundBox.load(k, `${path}.ogg`).catch(() =>
+      lichess.soundBox.load(k, `${path}.mp3`)
+    );
+    return () => lichess.soundBox.play(k, (volumes[k] || 1) * api.getVolume());
+  });
+  const enabled = () => soundSet !== 'silent';
+  Object.keys(names).forEach(name => {
+    api[name] = text => {
+      if (enabled() && (!text || !api.say(text))) collection(name)();
+    }
+  });
+  api.say = (text, cut, force) => {
+    if (!speechStorage.get() && !force) return false;
+    const msg = text.text ? text : new SpeechSynthesisUtterance(text);
+    msg.volume = api.getVolume();
+    msg.lang = 'en-US';
+    if (cut) speechSynthesis.cancel();
+    speechSynthesis.speak(msg);
+    // console.log(`%c${msg.text}`, 'color: blue');
+    return true;
+  };
+  api.load = name => {
+    if (enabled() && name in names) collection(name);
+  };
+  api.setVolume = api.volumeStorage.set;
+  api.getVolume = () => {
+    // garbage has been stored stored by accident (e972d5612d)
+    const v = parseFloat(api.volumeStorage.get());
+    return v >= 0 ? v : 0.7;
+  }
+
+  const publish = () => lichess.pubsub.emit('sound_set', soundSet);
+  if (soundSet == 'music') setTimeout(publish, 500);
+
+  api.changeSet = s => {
+    soundSet = s;
+    collection.clear();
+    publish();
+  };
+
+  api.set = () => soundSet;
+  return api;
+})();

ui/site/src/soundbox.js

@@ -0,0 +1,51 @@
+// based on https://raw.githubusercontent.com/sbrl/soundbox/master/soundbox.js
+class SoundBox {
+
+  sounds = {}; // The loaded sounds and their instances
+  instances = []; // Sounds that are currently playing
+
+  load(soundName, path) {
+    this.sounds[soundName] = new Audio(path);
+    return new Promise((resolve, reject) => {
+      this.sounds[soundName].addEventListener("canplaythrough", resolve);
+      this.sounds[soundName].addEventListener("error", reject);
+    });
+  };
+
+  play(soundName, volume = 1) {
+    if (!this.sounds[soundName]) {
+      console.error(`Can't find sound ${soundName}`);
+      return false;
+    }
+
+    const soundInstance = this.sounds[soundName].cloneNode(true);
+    this.instances.push(soundInstance);
+    soundInstance.volume = volume;
+
+    soundInstance.play().catch(e => {
+      console.log(e);
+      this.deleteInstance(soundInstance);
+    });
+
+    return new Promise(resolve => soundInstance.addEventListener("ended", () => {
+      this.deleteInstance(soundInstance);
+      resolve();
+    }));
+  };
+
+  deleteInstance = soundInstance => {
+    let index = this.instances.indexOf(soundInstance);
+    if (index != -1) this.instances.splice(index, 1);
+  };
+
+  // stopAll() {
+  //   // Pause all currently playing sounds
+
+  //   // Shallow clone the array to avoid issues with instances auto-removing themselves
+  //   this.instances.slice().forEach(instance => {
+  //     instance.pause();
+  //     instance.dispatchEvent(new Event("ended"));
+  //   });
+  // }
+}
+lichess.soundBox = new SoundBox

ui/tournament/src/sound.ts

@@ -54,8 +54,6 @@ export function countDown(data: TournamentData) {
     doCountDown(performance.now() + 1000 * data.secondsToStart - 100),
     900);  // wait 900ms before starting countdown.
 
-  setTimeout(li.sound.warmup, (data.secondsToStart - 15) * 1000);
-
   // Preload countdown sounds.
   for (let i = 10; i>=0; i--) li.sound.load('countDown' + i);
 }