speech synthesis

app.js

@@ -294,8 +294,8 @@ loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
     loadingDiv.style.display = "flex"
 }
 
-const stats     = new Stats()
 const settings  = new Settings()
+const stats     = new Stats(settings)
 const scene = new TetraScene(settings, loadingManager)
 const controls = new CameraControls(scene.camera, renderer.domElement)
 

jsm/Stats.js

@@ -24,7 +24,8 @@ const DELAY = {
   
   
 class Stats {
-    constructor() {
+    constructor(settings) {
+        this.settings = settings
         this.clock = new Clock(false)
         this.timeFormat = new Intl.DateTimeFormat("fr-FR", {
             hour: "numeric",
@@ -70,6 +71,7 @@ class Stats {
         if (level <= 20) this.fallPeriod = 1000 * Math.pow(0.8 - ((level - 1) * 0.007), level - 1)
         if (level > 15) this.lockDelay = 500 * Math.pow(0.9, level - 15)
         messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>NIVEAU<br/>${this.level}</h1>` })
+        speak(`Niveau ${level}`, this.settings.sfxVolume);
     }
 
     get level() {
@@ -178,10 +180,26 @@ class Stats {
             this.b2b = -1
         }
 
+        if (speechSynthesisAvailable) {
+            if (tSpin) speak(tSpin, this.settings.sfxVolume);
+            if (nbClearedLines == 4) speak(`Tétra`, this.settings.sfxVolume);
+            else if (nbClearedLines) speak(CLEARED_LINES_NAMES[nbClearedLines], this.settings.sfxVolume);
+        }
+
         this.goal -= awardedLineClears
-        if (this.goal <= 0) this.level++
+        if (this.goal <= 0) return this.level++
     }
 }
 
 
+const speechSynthesisAvailable = 'speechSynthesis' in window;
+function speak(text, volume=1) {
+    if (!speechSynthesisAvailable) return;
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.lang = 'fr-FR';
+    utterance.volume = volume;
+    speechSynthesis.speak(utterance);
+}
+
+
 export { Stats }