sound fix

src/lib/game/game.ts

@@ -79,6 +79,8 @@ export class Game extends Container {
   }
 
   public async play() {
+    this.audio.isEnabled = true;
+
     // setInterval(() => {
     //   console.log("FPS", this.app.ticker.FPS)
     //   console.log("Objects", this.children.length)

src/lib/game/utils/audioManager.ts

@@ -20,6 +20,8 @@ type SoundName =
   | "YEAH"
 
 export class AudioManager {
+  public isEnabled = false
+
   private chop1 = new Howl({
     src: chop1Audio,
   })
@@ -80,7 +82,7 @@ export class AudioManager {
   }
 
   private play(audios: Howl[]) {
-    if (!audios.length) {
+    if (!audios.length || !this.isEnabled) {
       return
     }
 
@@ -90,10 +92,6 @@ export class AudioManager {
     }
 
     randomAudio.play()
-
-    randomAudio.once("playerror", () => {
-      randomAudio.stop()
-    })
   }
 
   public playSound(name: SoundName) {

src/routes/+page.svelte

@@ -6,14 +6,18 @@
 
   export let data: PageServerData
 
+  let game = new Game()
   let gameElement: HTMLElement
+  let showSoundSwitch = true
 
-  onMount(() => {
-    let game = new Game()
+  const handleSoundSwitchClick = () => {
+    showSoundSwitch = !showSoundSwitch
+    game.play()
+  }
 
+  onMount(() => {
     const initGame = async () => {
       await game.init()
-      void game.play()
 
       gameElement?.appendChild(game.app.canvas)
       game.app.resizeTo = gameElement
@@ -43,6 +47,9 @@
 
 <div class="game-block">
     <div id="game-canvas" bind:this={gameElement}/>
+    <div class="buttons-block">
+        <button on:click={handleSoundSwitchClick} class="sound-switch" hidden={!showSoundSwitch}>Включить звук</button>
+    </div>
 </div>
 
 <section>
@@ -57,13 +64,25 @@
     #game-canvas {
         width: 100%;
         height: 28em;
+        touch-action: none;
     }
 
     .game-block {
+        position: relative;
         width: 100%;
         padding: 4em 0;
     }
 
+    .game-block .buttons-block {
+        margin-top: 1em;
+        display: flex;
+        justify-content: center;
+    }
+
+    .buttons-block .sound-switch {
+        background: var(--color-background);
+    }
+
     section {
         text-align: center;
         padding: 2em 1em;