play move sound everytime a new move is received or a move is selected

frontend/app.ts

@@ -1,4 +1,5 @@
 import {BoardArea} from './board_area';
+import {AudioPlayer, AudioEventType} from './audio';
 import {GameSelection} from './game_selection';
 import {MoveList} from './movelist';
 import {MultiPvView} from './multipv_view';
@@ -28,6 +29,7 @@ export class App implements WebsocketObserver {
   private boardArea: BoardArea;
   private jsHash?: string;
   private gameIsLive: boolean = false;
+  private audioPlayer: AudioPlayer;
 
   constructor() {
     this.gameSelection = new GameSelection(
@@ -42,6 +44,7 @@ export class App implements WebsocketObserver {
     this.multiPvView.addObserver(this);
     this.websocketFeed = new WebSocketFeed();
     this.websocketFeed.addObserver(this);
+    this.audioPlayer = new AudioPlayer();
     window.addEventListener('keydown', (event: KeyboardEvent) => {
       if (event.key === 'Escape') this.moveList.unselectVariation();
     });
@@ -78,8 +81,8 @@ export class App implements WebsocketObserver {
     this.gameSelection.updateGames(games);
   }
   public onPositionReceived(position: WsPositionData[]): void {
-    this.moveList.updatePositions(
-        position.filter(p => p.gameId == this.curGameId));
+    const filteredPositions = position.filter(p => p.gameId == this.curGameId);
+    this.moveList.updatePositions(filteredPositions);
   }
   public onEvaluationReceived(evaluation: WsEvaluationData[]): void {
     let evals = evaluation.filter(
@@ -111,6 +114,7 @@ export class App implements WebsocketObserver {
   public onMoveSelected(
       position: WsPositionData, pos_changed: boolean,
       isOngoling: boolean): void {
+    const currentPly = this.curPly ?? -1;
     this.curPly = position.ply;
     const nextMove = this.moveList.getMoveAtPly(position.ply + 1)?.moveUci;
     this.boardArea.changePosition(
@@ -119,6 +123,11 @@ export class App implements WebsocketObserver {
       this.multiPvView.setPosition(position);
       this.websocketFeed.setPosition(position.ply);
       this.boardArea.resetPvVisualization();
+
+      // Only play move sound when the next move is 1 ply ahead of the current position
+      if (position.ply === currentPly + 1) {
+        this.audioPlayer.playAudio(AudioEventType.MOVE);
+      }
     }
     this.boardArea.updatePosition(position);
   }

frontend/audio.ts

@@ -0,0 +1,65 @@
+export enum AudioEventType {
+  MOVE,
+}
+
+class DebouncedAudioPlayer {
+  private audioContext : AudioContext;
+  private audio: AudioBuffer;
+  private cooldown: number;
+  private lastPlayed: number;
+
+  constructor(context: AudioContext, audio: AudioBuffer, cooldown: number = 0) {
+    this.audioContext = context;
+    this.audio = audio;
+    this.cooldown = cooldown;
+    this.lastPlayed = 0;
+  }
+
+  public play() {
+    const now = Date.now();
+    if (now - this.lastPlayed < this.cooldown) {
+      return;
+    }
+    this.lastPlayed = now;
+
+    this.audioContext.resume();
+    if (this.audioContext.state !== "running") {
+      return;
+    }
+
+    const source = this.audioContext.createBufferSource();
+    source.buffer = this.audio;
+    source.connect(this.audioContext.destination);
+    source.start(0);
+  }
+}
+
+export class AudioPlayer {
+  private sounds: Map<AudioEventType, DebouncedAudioPlayer>;
+
+  constructor() {
+    this.sounds = new Map();
+    const context = new AudioContext();
+    this.addSound(context, AudioEventType.MOVE, 'static/chess_move.mp3');
+  }
+
+  private async addSound(context: AudioContext, eventType: AudioEventType, path: string): Promise<void> { 
+    const moveSound = await this.loadSound(context, path);
+    this.sounds.set(eventType, new DebouncedAudioPlayer(context, moveSound, 50));
+  }
+
+  private async loadSound(context: AudioContext, url: string): Promise<AudioBuffer> {
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+    const audioBuffer = await context.decodeAudioData(arrayBuffer);
+    return audioBuffer;
+  }
+
+  public playAudio(eventType: AudioEventType): void {
+    try {
+      this.sounds.get(eventType)?.play();
+    } catch (e) {
+      // Need user interaction to play audio
+    }
+  }
+}

static/index.template.html

@@ -71,6 +71,7 @@
         <a href="https://commons.wikimedia.org/wiki/User:Cburnett" target="_blank">
             Colin M.L. Burnett
         </a>. Analysis by <a href="https://lczero.org" target="_blank">LCZero</a> engine.
+        <a href="https://freesound.org/people/simone_ds/sounds/366065/">chess pieces.wav</a> by <a href="https://freesound.org/people/simone_ds/">simone_ds</a> (<a href="http://creativecommons.org/publicdomain/zero/1.0/">CC0 licence</a>).
         Source code on <a href="https://github.com/LeelaChessZero/lczero-live" target="_blank">GitHub</a>.
     </div>
     <script src="dist/main.js"></script>