try to reduce audio latency

app.js

@@ -459,9 +459,7 @@ class Settings {
         this.form = settingsForm
         this.load()
         this.modal = new bootstrap.Modal('#settingsModal')
-        settingsModal.addEventListener('shown.bs.modal', () => {
+        settingsModal.addEventListener('shown.bs.modal', () => resumeButton.focus())
-            resumeButton.focus()
-        })
     }
 
     load() {
@@ -514,10 +512,6 @@ class Settings {
     }
 }
 
-window.onload = function (event) {
-    window.document.selectedStyleSheetSet = stylesheetSelect.value
-}
-
 function changeKey(input) {
     prevValue = input.value
     input.value = ""
@@ -640,19 +634,9 @@ class Stats {
 
         // Sound
         if (sfxVolumeRange.value) {
-            if (nbClearedLines == 4 || (nbClearedLines && tSpin)) {
+            if (nbClearedLines == 4 || (nbClearedLines && tSpin)) playSound(quatuorSound)
-                quatuorSound.currentTime = 0
+            else if (nbClearedLines) playSound(lineClearSound)
-                quatuorSound.volume = sfxVolumeRange.value
+            else if (tSpin) playSound(tSpinSound)
-                quatuorSound.play()
-            } else if (nbClearedLines) {
-                lineClearSound.currentTime = 0
-                lineClearSound.volume = sfxVolumeRange.value
-                lineClearSound.play()
-            } else if (tSpin) {
-                tSpinSound.currentTime = 0
-                lineClearSound.volume = sfxVolumeRange.value
-                tSpinSound.play()
-            }
         }
 
         // Cleared lines & T-Spin
@@ -760,6 +744,12 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat("fr-FR", {
     timeZone: "UTC"
 })
 
+function playSound(audio) {
+    audio.currentTime = 0
+    audio.volume = sfxVolumeRange.value
+    audio.play()
+}
+
 
 /* Game */
 onanimationend = function (event) {
@@ -777,7 +767,14 @@ let holdQueue = new MinoesTable("holdTable")
 let matrix = new Matrix()
 let nextQueue = new NextQueue()
 let playing = false
-let favicon = document.querySelector("link[rel~='icon']")
+let favicon
+
+window.onload = function(event) {
+    document.selectedStyleSheetSet = stylesheetSelect.value
+    favicon = document.querySelector("link[rel~='icon']")
+
+    restart()
+}
 
 function restart() {
     stats.modal.hide()
@@ -789,8 +786,6 @@ function restart() {
     pauseSettings()
 }
 
-restart()
-
 function pauseSettings() {
     scheduler.clearInterval(fall)
     scheduler.clearTimeout(lockDown)
@@ -811,6 +806,12 @@ function newGame(event) {
         settings.form.reportValidity()
         settings.form.classList.add('was-validated')
     } else {
+        const audioContext = new AudioContext()
+        audioContext.createMediaElementSource(hardDropSound).connect(audioContext.destination)
+        audioContext.createMediaElementSource(tSpinSound).connect(audioContext.destination)
+        audioContext.createMediaElementSource(lineClearSound).connect(audioContext.destination)
+        audioContext.createMediaElementSource(quatuorSound).connect(audioContext.destination)
+
         levelInput.name = "level"
         levelInput.disabled = true
         titleHeader.innerHTML = "PAUSE"
@@ -876,11 +877,9 @@ let playerActions = {
 
     hardDrop: function() {
         scheduler.clearTimeout(lockDown)
+        playSound(hardDropSound)
         while (matrix.piece.move(TRANSLATION.DOWN, ROTATION.NONE, "trail-animation")) stats.score +=2
         matrix.table.classList.add("hard-dropped-table-animation")
-        hardDropSound.currentTime = 0
-        hardDropSound.volume = sfxVolumeRange.value
-        hardDropSound.play()
         lockDown()
     },
 

index.html

@@ -56,11 +56,6 @@
                 <div class="col-sm-4"><div class="input-group"><input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5"><div class="input-group-text">ms</div></div></div>
                 <label for="dasInput" class="col-sm-2 col-form-label"><abbr title="Delayed AutoShift : délai initial avant répétition">DAS</abbr></label>
               </fieldset>
-              <fieldset class="row g-2 mb-3 align-items-center text-center">
-                <legend class="text-start">Volume</legend>
-                <label for="sfxVolumeRange" class="col-sm-2 col-form-label">Effets</label>
-                <div class="col-sm-4"><input id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="1"></div>
-              </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center">
                 <legend class="text-start">Interface</legend>
                 <label for="stylesheetSelect" class="col-sm-2 col-form-label">Thème</label>
@@ -71,6 +66,8 @@
                   <option>Électro</option>
                   <option>Rétro</option>
                 </select></div>
+                <div class="col-sm-4"><input id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="1"></div>
+                <label for="sfxVolumeRange" class="col-sm-2 col-form-label">Volume</label>
               </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center">
                 <legend class="text-start">Partie</legend>
@@ -203,13 +200,13 @@
     </div>
 
     <span style="display: none;">
-      <img src="I-0.png"/><img src="I-1.png"/><img src="I-2.png"/><img src="I-3.png"/>
+      <img src="favicons/I-0.png"/><img src="favicons/I-1.png"/><img src="favicons/I-2.png"/><img src="favicons/I-3.png"/>
-      <img src="J-0.png"/><img src="J-1.png"/><img src="J-2.png"/><img src="J-3.png"/>
+      <img src="favicons/J-0.png"/><img src="favicons/J-1.png"/><img src="favicons/J-2.png"/><img src="favicons/J-3.png"/>
-      <img src="L-0.png"/><img src="L-1.png"/><img src="L-2.png"/><img src="L-3.png"/>
+      <img src="favicons/L-0.png"/><img src="favicons/L-1.png"/><img src="favicons/L-2.png"/><img src="favicons/L-3.png"/>
-      <img src="O-0.png"/>
+      <img src="favicons/O-0.png"/>
-      <img src="S-0.png"/><img src="S-1.png"/><img src="S-2.png"/><img src="S-3.png"/>
+      <img src="favicons/S-0.png"/><img src="favicons/S-1.png"/><img src="favicons/S-2.png"/><img src="favicons/S-3.png"/>
-      <img src="T-0.png"/><img src="T-1.png"/><img src="T-2.png"/><img src="T-3.png"/>
+      <img src="favicons/T-0.png"/><img src="favicons/T-1.png"/><img src="favicons/T-2.png"/><img src="favicons/T-3.png"/>
-      <img src="Z-0.png"/><img src="Z-1.png"/><img src="Z-2.png"/><img src="Z-3.png"/>
+      <img src="favicons/Z-0.png"/><img src="favicons/Z-1.png"/><img src="favicons/Z-2.png"/><img src="favicons/Z-3.png"/>
 
       <audio id="hardDropSound"  src="sound/808T_A.wav" preload="auto" type="audio/wav"></audio>
       <audio id="tSpinSound"     src="sound/HIGHQ_A.wav" preload="auto" type="audio/wav"></audio>
@@ -218,7 +215,7 @@
     </span>
     
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
-    <script src="app.js"></script>
+    <script src="app.js" language="Javascript" type="text/javascript"></script>
     <script>
       
     </script>