From ac5c736c4ece0cd0794a17d0de52894a3d377b35 Mon Sep 17 00:00:00 2001
From: JessJess <JessJessJade12@gmail.com>
Date: Sun, 5 Apr 2026 16:56:31 +0100
Subject: [PATCH] Add jukebox feature with SpessaSynth MIDI playback

after digging around for a proper .mid player for the web, landed on
spessasynth_lib (AudioWorklet-based SF2 synthesizer). using GeneralUser
GS as the soundfont: https://github.com/mrbumpy409/GeneralUser-GS

SF2 is preloaded on page init and cached in IndexedDB so it's instant
after first visit.
---
 .gitignore                               |   3 +
 index.html                               |  10 +-
 package.json                             |   3 +-
 pnpm-lock.yaml                           |  15 ++
 public/jbox/.gitkeep                     |   0
 src/client/client.ts                     |   4 +
 src/client/events.ts                     |   2 +
 src/controllers/audio-controller.ts      | 121 ++++++++++++++-
 src/controllers/index.ts                 |   1 +
 src/controllers/jukebox-controller.ts    |  25 +++
 src/controllers/mouse-controller.ts      |   5 +
 src/db.ts                                |  72 +++++++--
 src/edf.ts                               |   4 +
 src/handlers/index.ts                    |   2 +
 src/handlers/jukebox.ts                  |  94 +++++++++++
 src/main.ts                              |   4 +
 src/ui/jukebox-dialog/index.ts           |   1 +
 src/ui/jukebox-dialog/jukebox-dialog.css |  34 ++++
 src/ui/jukebox-dialog/jukebox-dialog.ts  | 190 +++++++++++++++++++++++
 src/ui/utils/create-menu-item.ts         |  18 +++
 src/wiring/client-events.ts              |  13 ++
 src/wiring/ui-events.ts                  |   6 +
 22 files changed, 607 insertions(+), 20 deletions(-)
 create mode 100644 public/jbox/.gitkeep
 create mode 100644 src/controllers/jukebox-controller.ts
 create mode 100644 src/handlers/jukebox.ts
 create mode 100644 src/ui/jukebox-dialog/index.ts
 create mode 100644 src/ui/jukebox-dialog/jukebox-dialog.css
 create mode 100644 src/ui/jukebox-dialog/jukebox-dialog.ts
diff --git a/.gitignore b/.gitignore
index 29c755b2..2e164743 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,8 @@ public/sfx*
 public/mfx*
 public/maps
 public/data
+public/jbox/*
+!public/jbox/.gitkeep
+public/soundfonts
 dist
 .DS_Store
\ No newline at end of file
diff --git a/index.html b/index.html
index 8fe8732e..b5a6ad7d 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,8 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="mobile-web-app-capable" content="yes">
   <title>EO Web Client</title>
+  <link rel="preload" href="/soundfonts/GeneralUser-GS.sf2" as="fetch" crossorigin>
+  <link rel="preload" href="/spessasynth_processor.min.js" as="script">
 </head>
 
 <body>
@@ -347,6 +349,12 @@
           <button class="img-btn" type="button" data-id="ok"></button>
         </div>
 
+        <div id="jukebox-dialog" class="hidden">
+          <span class="title"></span>
+          <div class="item-list"></div>
+          <button class="img-btn" type="button" data-id="cancel"></button>
+        </div>
+
         <div id="locker" class="hidden">
           <span class="title"></span>
           <div class="locker-items"></div>
@@ -593,4 +601,4 @@
   <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/package.json b/package.json
index d56859c9..6de7d0e2 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "idb": "^8.0.3",
     "mitt": "^3.0.1",
     "notyf": "^3.10.0",
-    "pixi.js": "^8.17.1"
+    "pixi.js": "^8.17.1",
+    "spessasynth_lib": "^4.2.9"
   },
   "packageManager": "pnpm@10.33.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 42ad59d1..c1b7eac8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       pixi.js:
         specifier: ^8.17.1
         version: 8.17.1
+      spessasynth_lib:
+        specifier: ^4.2.9
+        version: 4.2.9
     devDependencies:
       '@biomejs/biome':
         specifier: 2.4.10
@@ -1179,6 +1182,12 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  spessasynth_core@4.2.7:
+    resolution: {integrity: sha512-+pYsf8ydSMoACv2XTiJHop/u5ouZ4Q57n/hjVDw8lU44xC904Y7KXoXeWOCgl4VYdmPuGrWhEXRwhmMtVPLFBg==}
+
+  spessasynth_lib@4.2.9:
+    resolution: {integrity: sha512-MI1tfXjFj/AnneXItGZqRLoJv+B9Rqi3WzXkO+0ghFc8PL+XFNu7szC8saWy/Dv59HeN33YkI4Af7j1tIAI+og==}
+
   strip-json-comments@5.0.3:
     resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
     engines: {node: '>=14.16'}
@@ -2150,6 +2159,12 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  spessasynth_core@4.2.7: {}
+
+  spessasynth_lib@4.2.9:
+    dependencies:
+      spessasynth_core: 4.2.7
+
   strip-json-comments@5.0.3: {}
 
   supports-color@8.1.1:
diff --git a/public/jbox/.gitkeep b/public/jbox/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/client/client.ts b/src/client/client.ts
index 5f43818e..74165e0f 100644
--- a/src/client/client.ts
+++ b/src/client/client.ts
@@ -50,6 +50,7 @@ import {
   GuildController,
   InventoryController,
   ItemProtectionController,
+  JukeboxController,
   KeyboardController,
   LockerController,
   MapController,
@@ -170,6 +171,7 @@ export class Client {
   commandController: CommandController;
   inventoryController: InventoryController;
   lockerController: LockerController;
+  jukeboxController: JukeboxController;
   mapController: MapController;
   mouseController: MouseController;
   npcController: NpcController;
@@ -272,6 +274,7 @@ export class Client {
     this.drunkController = new DrunkController(this);
     this.inventoryController = new InventoryController(this);
     this.itemProtectionController = new ItemProtectionController();
+    this.jukeboxController = new JukeboxController(this);
     this.lockerController = new LockerController(this);
     this.mapController = new MapController(this);
     this.mouseController = new MouseController(this);
@@ -580,6 +583,7 @@ export class Client {
         playSfxById(SfxId.EnterPkMap);
       }
 
+      this.audioController.stopJukeboxTrack();
       this.audioController.stopAmbientSound();
 
       if (this.map.ambientSoundId) {
diff --git a/src/client/events.ts b/src/client/events.ts
index 6bab63df..efd6e0e6 100644
--- a/src/client/events.ts
+++ b/src/client/events.ts
@@ -60,6 +60,8 @@ export type ClientEvents = {
     details: CharacterDetails;
     questNames: string[];
   };
+  jukeboxOpened: { requestedBy: string | null };
+  jukeboxUpdated: { requestedBy: string | null };
   chestOpened: {
     items: ThreeItem[];
   };
diff --git a/src/controllers/audio-controller.ts b/src/controllers/audio-controller.ts
index 1e98f5b9..b00403c0 100644
--- a/src/controllers/audio-controller.ts
+++ b/src/controllers/audio-controller.ts
@@ -1,15 +1,74 @@
 import { MapTileSpec } from 'eolib';
+import { Sequencer, WorkletSynthesizer } from 'spessasynth_lib';
+import WORKLET_URL from 'spessasynth_lib/dist/spessasynth_processor.min.js?url';
 import type { Client } from '@/client';
+import { getCachedAsset, saveCachedAsset } from '@/db';
 import { getDistance, getVolumeFromDistance, padWithZeros } from '@/utils';
 import type { Vector2 } from '@/vector';
 
+const SOUNDFONT_URL = '/soundfonts/GeneralUser-GS.sf2';
+const SOUNDFONT_CACHE_KEY = 'sf2:GeneralUser-GS';
+
 export class AudioController {
   private client: Client;
   ambientSound: AudioBufferSourceNode | null = null;
   ambientVolume: GainNode | null = null;
+  private ambientContext: AudioContext | null = null;
+  private sequencer: Sequencer | null = null;
+  private jukeboxLoadId = 0;
+  private synthReady: Promise<WorkletSynthesizer> | null = null;
+  private sfBuffer: Promise<ArrayBuffer>;
 
   constructor(client: Client) {
     this.client = client;
+    this.sfBuffer = this.loadSf2();
+
+    const unlock = () => {
+      void this.getSynth();
+    };
+    window.addEventListener('pointerdown', unlock, { once: true });
+    window.addEventListener('keydown', unlock, { once: true });
+  }
+
+  private async loadSf2(): Promise<ArrayBuffer> {
+    const cached = await getCachedAsset(SOUNDFONT_CACHE_KEY);
+    if (cached) return cached;
+
+    const resp = await fetch(SOUNDFONT_URL);
+    if (!resp.ok) {
+      throw new Error(`Failed to load soundfont: HTTP ${resp.status}`);
+    }
+    const buffer = await resp.arrayBuffer();
+    saveCachedAsset(SOUNDFONT_CACHE_KEY, buffer);
+    return buffer;
+  }
+
+  private async getSynth(): Promise<WorkletSynthesizer> {
+    if (!this.synthReady) {
+      this.synthReady = (async () => {
+        const ctx = new AudioContext();
+        const [sfBuffer] = await Promise.all([
+          this.sfBuffer,
+          ctx.audioWorklet.addModule(WORKLET_URL),
+        ]);
+        const synth = new WorkletSynthesizer(ctx);
+        await synth.soundBankManager.addSoundBank(sfBuffer, 'main');
+        await synth.isReady;
+        synth.connect(ctx.destination);
+        return synth;
+      })().catch((error) => {
+        this.synthReady = null;
+        throw error;
+      });
+    }
+    return this.synthReady;
+  }
+
+  private stopCurrentSequencer(): void {
+    if (this.sequencer) {
+      this.sequencer.pause();
+      this.sequencer = null;
+    }
   }
 
   setAmbientVolume(): void {
@@ -19,7 +78,7 @@ export class AudioController {
 
     const playerAt = this.client.getPlayerCoords();
     const sources: { coords: Vector2; distance: number }[] = [];
-    for (const row of this.client.map!.tileSpecRows) {
+    for (const row of this.client.map.tileSpecRows) {
       for (const tile of row.tiles) {
         if (tile.tileSpec === MapTileSpec.AmbientSource) {
           const coords = { x: tile.x, y: row.y };
@@ -31,9 +90,9 @@ export class AudioController {
 
     sources.sort((a, b) => a.distance - b.distance);
     if (sources.length) {
-      const distance = sources[0].distance;
-      const volume = getVolumeFromDistance(distance);
-      this.ambientVolume!.gain.value = volume;
+      this.ambientVolume!.gain.value = getVolumeFromDistance(
+        sources[0]!.distance,
+      );
     }
   }
 
@@ -44,15 +103,18 @@ export class AudioController {
       this.ambientVolume.disconnect();
       this.ambientVolume = null;
     }
+    void this.ambientContext?.close();
+    this.ambientContext = null;
   }
 
   startAmbientSound(): void {
-    if (!this.client.map!.ambientSoundId) {
+    if (!this.client.map?.ambientSoundId) {
       return;
     }
 
     const context = new AudioContext();
-    fetch(`/sfx/sfx${padWithZeros(this.client.map!.ambientSoundId, 3)}.wav`)
+    this.ambientContext = context;
+    fetch(`/sfx/sfx${padWithZeros(this.client.map.ambientSoundId, 3)}.wav`)
       .then((response) => response.arrayBuffer())
       .then((data) => context.decodeAudioData(data))
       .then((buffer) => {
@@ -66,4 +128,51 @@ export class AudioController {
         this.ambientSound.start(0);
       });
   }
+
+  stopJukeboxTrack(): void {
+    this.jukeboxLoadId += 1;
+    this.stopCurrentSequencer();
+  }
+
+  async playJukeboxTrack(trackId: number): Promise<void> {
+    if (!trackId) {
+      return;
+    }
+
+    const loadId = ++this.jukeboxLoadId;
+
+    try {
+      this.stopCurrentSequencer();
+
+      const [synth, midiResp] = await Promise.all([
+        this.getSynth(),
+        fetch(`/jbox/jbox${padWithZeros(trackId, 3)}.mid`),
+      ]);
+
+      if (this.jukeboxLoadId !== loadId) {
+        return;
+      }
+
+      if (!midiResp.ok) {
+        throw new Error(
+          `Failed to load jukebox track: HTTP ${midiResp.status}`,
+        );
+      }
+
+      const midiBuffer = await midiResp.arrayBuffer();
+
+      if (this.jukeboxLoadId !== loadId) {
+        return;
+      }
+
+      synth.stopAll(true);
+      const seq = new Sequencer(synth);
+      seq.loadNewSongList([{ binary: midiBuffer }]);
+      seq.loopCount = -1;
+      this.sequencer = seq;
+      seq.play();
+    } catch (error) {
+      console.error(`Failed to play jukebox track ${trackId}`, error);
+    }
+  }
 }
diff --git a/src/controllers/index.ts b/src/controllers/index.ts
index c54973d9..90d02e8f 100644
--- a/src/controllers/index.ts
+++ b/src/controllers/index.ts
@@ -11,6 +11,7 @@ export { DrunkController } from './drunk-controller';
 export { GuildController } from './guild-controller';
 export { InventoryController } from './inventory-controller';
 export { ItemProtectionController } from './item-protection-controller';
+export { JukeboxController } from './jukebox-controller';
 export { KeyboardController } from './keyboard-controller';
 export { LockerController } from './locker-controller';
 export { MapController } from './map-controller';
diff --git a/src/controllers/jukebox-controller.ts b/src/controllers/jukebox-controller.ts
new file mode 100644
index 00000000..a805c3f5
--- /dev/null
+++ b/src/controllers/jukebox-controller.ts
@@ -0,0 +1,25 @@
+import { Coords, JukeboxMsgClientPacket, JukeboxOpenClientPacket } from 'eolib';
+import type { Client } from '@/client';
+import type { Vector2 } from '@/vector';
+
+export class JukeboxController {
+  private client: Client;
+
+  constructor(client: Client) {
+    this.client = client;
+  }
+
+  open(coords: Vector2): void {
+    const packet = new JukeboxOpenClientPacket();
+    packet.coords = new Coords();
+    packet.coords.x = coords.x;
+    packet.coords.y = coords.y;
+    this.client.bus!.send(packet);
+  }
+
+  requestSong(trackId: number): void {
+    const packet = new JukeboxMsgClientPacket();
+    packet.trackId = trackId;
+    this.client.bus!.send(packet);
+  }
+}
diff --git a/src/controllers/mouse-controller.ts b/src/controllers/mouse-controller.ts
index bf006958..2fccb49a 100644
--- a/src/controllers/mouse-controller.ts
+++ b/src/controllers/mouse-controller.ts
@@ -217,6 +217,11 @@ export class MouseController {
           return;
         }
 
+        if (tileSpec === MapTileSpec.Jukebox) {
+          this.client.jukeboxController.open(this.client.mouseCoords);
+          return;
+        }
+
         if (
           this.client.mapController.isFacingChairAt(this.client.mouseCoords) &&
           !this.client.mapController.occupied(this.client.mouseCoords)
diff --git a/src/db.ts b/src/db.ts
index aa063aa5..08a8f1eb 100644
--- a/src/db.ts
+++ b/src/db.ts
@@ -18,13 +18,18 @@ interface DB extends DBSchema {
     key: number;
     value: Uint8Array;
   };
+  assets: {
+    key: string;
+    value: ArrayBuffer;
+  };
 }
 
 let dbPromise: Promise<IDBPDatabase<DB>>;
+const textDecoder = new TextDecoder();
 
 function getDb(): Promise<IDBPDatabase<DB>> {
   if (!dbPromise) {
-    dbPromise = openDB<DB>('db', 2, {
+    dbPromise = openDB<DB>('db', 3, {
       upgrade(db) {
         if (!db.objectStoreNames.contains('pubs')) {
           db.createObjectStore('pubs');
@@ -35,12 +40,48 @@ function getDb(): Promise<IDBPDatabase<DB>> {
         if (!db.objectStoreNames.contains('edfs')) {
           db.createObjectStore('edfs');
         }
+        if (!db.objectStoreNames.contains('assets')) {
+          db.createObjectStore('assets');
+        }
       },
     });
   }
   return dbPromise;
 }
 
+function isLikelyHtmlDocument(buf: Uint8Array): boolean {
+  const preview = textDecoder
+    .decode(buf.subarray(0, Math.min(buf.length, 512)))
+    .trimStart()
+    .toLowerCase();
+
+  return (
+    preview.startsWith('<!doctype html') ||
+    preview.startsWith('<html') ||
+    preview.startsWith('<head') ||
+    preview.startsWith('<body')
+  );
+}
+
+async function fetchEdfBuffer(id: number): Promise<Uint8Array | null> {
+  const response = await fetch(`/data/dat${padWithZeros(id, 3)}.edf`);
+  if (!response.ok) {
+    return null;
+  }
+
+  const data = new Uint8Array(await response.arrayBuffer());
+  const contentType = response.headers.get('content-type')?.toLowerCase() ?? '';
+
+  if (contentType.includes('text/html') || isLikelyHtmlDocument(data)) {
+    console.warn(
+      `Refusing to cache invalid EDF response for dat${padWithZeros(id, 3)}.edf`,
+    );
+    return null;
+  }
+
+  return data;
+}
+
 export async function getEmf(id: number): Promise<Emf | null> {
   const db = await getDb();
   const buf = await db.get('maps', id);
@@ -63,21 +104,19 @@ export function saveEmf(id: number, emf: Emf) {
 export async function getEdf(id: number): Promise<Edf | null> {
   const db = await getDb();
   const buf = await db.get('edfs', id);
-  if (!buf) {
-    const response = await fetch(`/data/dat${padWithZeros(id, 3)}.edf`);
-    if (!response.ok) {
-      return null;
-    }
-
-    const data = await response.arrayBuffer();
-    const buf = new Uint8Array(data);
 
-    db.put('edfs', buf, id);
+  if (buf) {
+    return Edf.deserialize(buf);
+  }
 
-    return Edf.deserialize(new Uint8Array(data));
+  const data = await fetchEdfBuffer(id);
+  if (!data) {
+    return null;
   }
 
-  return Edf.deserialize(buf);
+  await db.put('edfs', data, id);
+
+  return Edf.deserialize(data);
 }
 
 export async function getEif(): Promise<Eif | null> {
@@ -155,3 +194,12 @@ export function saveEsf(esf: Esf) {
     db.put('pubs', writer.toByteArray(), 'esf');
   });
 }
+
+export async function getCachedAsset(key: string): Promise<ArrayBuffer | null> {
+  const db = await getDb();
+  return (await db.get('assets', key)) ?? null;
+}
+
+export function saveCachedAsset(key: string, buffer: ArrayBuffer): void {
+  getDb().then((db) => db.put('assets', buffer, key));
+}
diff --git a/src/edf.ts b/src/edf.ts
index dceab422..1dec2247 100644
--- a/src/edf.ts
+++ b/src/edf.ts
@@ -7,6 +7,10 @@ export class Edf {
     return this.lines[index];
   }
 
+  getLines(): readonly string[] {
+    return this.lines;
+  }
+
   static deserialize(buf: Uint8Array): Edf {
     const edf = new Edf();
     edf.lines = [];
diff --git a/src/handlers/index.ts b/src/handlers/index.ts
index 71c0dc31..5efdb564 100644
--- a/src/handlers/index.ts
+++ b/src/handlers/index.ts
@@ -19,6 +19,7 @@ import { registerFaceHandlers } from './face';
 import { registerGuildHandlers } from './guild';
 import { registerInitHandlers } from './init';
 import { registerItemHandlers } from './item';
+import { registerJukeboxHandlers } from './jukebox';
 import { registerLockerHandlers } from './locker';
 import { registerLoginHandlers } from './login';
 import { registerMessageHandlers } from './message';
@@ -66,6 +67,7 @@ export function registerAllHandlers(client: Client): void {
   registerDoorHandlers(client);
   registerEffectHandlers(client);
   registerItemHandlers(client);
+  registerJukeboxHandlers(client);
   registerAdminInteractHandlers(client);
   registerQuestHandlers(client);
   registerMusicHandlers(client);
diff --git a/src/handlers/jukebox.ts b/src/handlers/jukebox.ts
new file mode 100644
index 00000000..2cf404e7
--- /dev/null
+++ b/src/handlers/jukebox.ts
@@ -0,0 +1,94 @@
+import {
+  type EoReader,
+  Item,
+  JukeboxAgreeServerPacket,
+  JukeboxOpenServerPacket,
+  JukeboxPlayerServerPacket,
+  JukeboxReplyServerPacket,
+  JukeboxUseServerPacket,
+  PacketAction,
+  PacketFamily,
+} from 'eolib';
+import type { Client } from '@/client';
+import { DialogResourceID } from '@/edf';
+import { playSfxById, SfxId } from '@/sfx';
+
+function getRequestedBy(jukeboxPlayer: string): string | null {
+  const requestedBy = jukeboxPlayer.trim();
+  return requestedBy || null;
+}
+
+function setGoldAmount(client: Client, amount: number) {
+  const gold = client.items.find((item) => item.id === 1);
+
+  if (gold) {
+    gold.amount = amount;
+    return;
+  }
+
+  const goldItem = new Item();
+  goldItem.id = 1;
+  goldItem.amount = amount;
+  client.items.push(goldItem);
+}
+
+function handleJukeboxOpen(client: Client, reader: EoReader) {
+  const packet = JukeboxOpenServerPacket.deserialize(reader);
+  client.emit('jukeboxOpened', {
+    requestedBy: getRequestedBy(packet.jukeboxPlayer),
+  });
+}
+
+function handleJukeboxReply(client: Client, reader: EoReader) {
+  JukeboxReplyServerPacket.deserialize(reader);
+  const strings = client.getDialogStrings(
+    DialogResourceID.JUKEBOX_REQUESTED_RECENTLY,
+  );
+  client.showError(strings[1], strings[0]);
+}
+
+function handleJukeboxAgree(client: Client, reader: EoReader) {
+  const packet = JukeboxAgreeServerPacket.deserialize(reader);
+  setGoldAmount(client, packet.goldAmount);
+
+  client.emit('inventoryChanged', undefined);
+  playSfxById(SfxId.BuySell);
+}
+
+function handleJukeboxUse(client: Client, reader: EoReader) {
+  const packet = JukeboxUseServerPacket.deserialize(reader);
+  void client.audioController.playJukeboxTrack(packet.trackId);
+  client.emit('jukeboxUpdated', { requestedBy: '' });
+}
+
+function handleJukeboxPlayer(_client: Client, reader: EoReader) {
+  JukeboxPlayerServerPacket.deserialize(reader);
+}
+
+export function registerJukeboxHandlers(client: Client) {
+  client.bus!.registerPacketHandler(
+    PacketFamily.Jukebox,
+    PacketAction.Open,
+    (reader) => handleJukeboxOpen(client, reader),
+  );
+  client.bus!.registerPacketHandler(
+    PacketFamily.Jukebox,
+    PacketAction.Reply,
+    (reader) => handleJukeboxReply(client, reader),
+  );
+  client.bus!.registerPacketHandler(
+    PacketFamily.Jukebox,
+    PacketAction.Agree,
+    (reader) => handleJukeboxAgree(client, reader),
+  );
+  client.bus!.registerPacketHandler(
+    PacketFamily.Jukebox,
+    PacketAction.Use,
+    (reader) => handleJukeboxUse(client, reader),
+  );
+  client.bus!.registerPacketHandler(
+    PacketFamily.Jukebox,
+    PacketAction.Player,
+    (reader) => handleJukeboxPlayer(client, reader),
+  );
+}
diff --git a/src/main.ts b/src/main.ts
index a9406d31..fba3ad2e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -36,6 +36,7 @@ import { HUD } from '@/ui/hud';
 import { InGameMenu } from '@/ui/in-game-menu';
 import { Inventory } from '@/ui/inventory';
 import { ItemAmountDialog } from '@/ui/item-amount-dialog';
+import { JukeboxDialog } from '@/ui/jukebox-dialog';
 import { LargeAlertSmallHeader } from '@/ui/large-alert-small-header';
 import { LargeConfirmSmallHeader } from '@/ui/large-confirm-small-header';
 import { LockerDialog } from '@/ui/locker-dialog';
@@ -92,6 +93,7 @@ const onlineList = new OnlineList(client);
 const paperdoll = new Paperdoll(client);
 const hud = new HUD();
 const itemAmountDialog = new ItemAmountDialog();
+const jukeboxDialog = new JukeboxDialog(client);
 const questDialog = new QuestDialog(client);
 const chestDialog = new ChestDialog(client);
 const shopDialog = new ShopDialog(client);
@@ -228,6 +230,7 @@ wireClientEvents({
   bankDialog,
   barberDialog,
   boardDialog,
+  jukeboxDialog,
   lockerDialog,
   skillMasterDialog,
   partyDialog,
@@ -258,6 +261,7 @@ wireUiEvents({
   questDialog,
   shopDialog,
   bankDialog,
+  jukeboxDialog,
   lockerDialog,
   hotbar,
   itemAmountDialog,
diff --git a/src/ui/jukebox-dialog/index.ts b/src/ui/jukebox-dialog/index.ts
new file mode 100644
index 00000000..37c44c89
--- /dev/null
+++ b/src/ui/jukebox-dialog/index.ts
@@ -0,0 +1 @@
+export * from './jukebox-dialog';
diff --git a/src/ui/jukebox-dialog/jukebox-dialog.css b/src/ui/jukebox-dialog/jukebox-dialog.css
new file mode 100644
index 00000000..d8281fbf
--- /dev/null
+++ b/src/ui/jukebox-dialog/jukebox-dialog.css
@@ -0,0 +1,34 @@
+#jukebox-dialog {
+  position: relative;
+  user-select: none;
+  box-sizing: border-box;
+  width: 272px;
+  height: 202px;
+  background-color: #000;
+  background-image: url("/gfx/gfx002/160.png");
+}
+
+#jukebox-dialog .title {
+  position: absolute;
+  left: 24px;
+  top: 20px;
+  width: 224px;
+  color: #fff;
+  font-size: 12px;
+}
+
+#jukebox-dialog .item-list {
+  position: absolute;
+  top: 60px;
+  left: 22px;
+  width: 232px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+#jukebox-dialog button[data-id="cancel"] {
+  position: absolute;
+  top: 158px;
+  left: 92px;
+}
diff --git a/src/ui/jukebox-dialog/jukebox-dialog.ts b/src/ui/jukebox-dialog/jukebox-dialog.ts
new file mode 100644
index 00000000..903d05d1
--- /dev/null
+++ b/src/ui/jukebox-dialog/jukebox-dialog.ts
@@ -0,0 +1,190 @@
+import mitt from 'mitt';
+import type { Client } from '@/client';
+import { DialogResourceID, EOResourceID } from '@/edf';
+import { playSfxById, SfxId } from '@/sfx';
+import { Base } from '@/ui/base-ui';
+import { DialogIcon } from '@/ui/ui-types';
+import { createIconMenuItem } from '@/ui/utils';
+
+import './jukebox-dialog.css';
+
+type Events = {
+  requestSong: { trackId: number };
+};
+
+const SONG_REQUEST_COST = 25;
+
+export class JukeboxDialog extends Base {
+  private client: Client;
+  private emitter = mitt<Events>();
+  protected container = document.getElementById('jukebox-dialog')!;
+  private dialogs = document.getElementById('dialogs');
+  private cover = document.querySelector<HTMLDivElement>('#cover');
+  private btnCancel = this.container.querySelector<HTMLButtonElement>(
+    'button[data-id="cancel"]',
+  )!;
+  private title = this.container.querySelector<HTMLSpanElement>('.title')!;
+  private itemList =
+    this.container.querySelector<HTMLDivElement>('.item-list')!;
+  private songIndex = 0;
+  private requestedBy: string | null = null;
+  private isOpen = false;
+
+  constructor(client: Client) {
+    super();
+    this.client = client;
+
+    this.btnCancel.addEventListener('click', () => {
+      playSfxById(SfxId.ButtonClick);
+      this.hide();
+    });
+
+    this.client.on('inventoryChanged', () => this.refresh());
+  }
+
+  on<Event extends keyof Events>(
+    event: Event,
+    handler: (data: Events[Event]) => void,
+  ) {
+    this.emitter.on(event, handler);
+  }
+
+  setRequestedBy(requestedBy: string | null) {
+    this.requestedBy = requestedBy;
+    this.refresh();
+  }
+
+  refresh() {
+    if (this.isOpen) {
+      this.render();
+    }
+  }
+
+  show() {
+    this.songIndex = 0;
+    this.isOpen = true;
+    this.render();
+    this.cover!.classList.remove('hidden');
+    this.container!.classList.remove('hidden');
+    this.dialogs!.classList.remove('hidden');
+    this.client.typing = true;
+  }
+
+  hide() {
+    this.isOpen = false;
+    this.cover!.classList.add('hidden');
+    this.container!.classList.add('hidden');
+
+    if (!document.querySelector('#dialogs > div:not(.hidden)')) {
+      this.dialogs!.classList.add('hidden');
+      this.client.typing = false;
+    }
+  }
+
+  private render() {
+    const songNames = this.getSongNames();
+    if (songNames.length === 0) {
+      this.songIndex = 0;
+    } else if (this.songIndex >= songNames.length) {
+      this.songIndex = 0;
+    }
+
+    this.updateTitle();
+    this.itemList.innerHTML = '';
+    const currentSong = songNames[this.songIndex] ?? '';
+
+    const browseItem = createIconMenuItem(
+      DialogIcon.JukeboxBrowse,
+      this.client.getResourceString(EOResourceID.JUKEBOX_BROWSE_THROUGH_SONGS),
+      this.formatSubtitle(currentSong),
+    );
+    const browse = () => {
+      if (songNames.length === 0) {
+        return;
+      }
+
+      playSfxById(SfxId.ButtonClick);
+      this.songIndex = (this.songIndex + 1) % songNames.length;
+      this.render();
+    };
+    browseItem.addEventListener('click', browse);
+    this.itemList.appendChild(browseItem);
+
+    const playItem = createIconMenuItem(
+      DialogIcon.JukeboxPlay,
+      this.client.getResourceString(EOResourceID.JUKEBOX_PLAY_SONG),
+      this.formatSubtitle(`${SONG_REQUEST_COST} gold`),
+    );
+    const play = () => {
+      playSfxById(SfxId.ButtonClick);
+      this.requestSong();
+    };
+    playItem.addEventListener('click', play);
+    this.itemList.appendChild(playItem);
+  }
+
+  private requestSong() {
+    if (this.requestedBy !== null) {
+      const strings = this.client.getDialogStrings(
+        DialogResourceID.JUKEBOX_REQUESTED_RECENTLY,
+      );
+      this.client.showError(strings[1], strings[0]);
+      return;
+    }
+
+    const songNames = this.getSongNames();
+    if (songNames.length === 0) {
+      this.client.showError(
+        'The jukebox song list is not available yet.',
+        this.client.getResourceString(EOResourceID.JUKEBOX_REQUEST_SONG),
+      );
+      return;
+    }
+
+    const gold = this.client.items.find((item) => item.id === 1)?.amount ?? 0;
+    if (gold < SONG_REQUEST_COST) {
+      const strings = this.client.getDialogStrings(
+        DialogResourceID.WARNING_YOU_HAVE_NOT_ENOUGH,
+      );
+      this.client.emit('smallAlert', {
+        title: strings[0],
+        message: strings[1],
+      });
+      return;
+    }
+
+    const message = `${this.client.getResourceString(EOResourceID.JUKEBOX_REQUEST_SONG_FOR)} ${SONG_REQUEST_COST} gold?`;
+    const title = this.client.getResourceString(
+      EOResourceID.JUKEBOX_REQUEST_SONG,
+    );
+
+    this.client.showConfirmation(message, title, () => {
+      this.emitter.emit('requestSong', { trackId: this.songIndex });
+      this.hide();
+    });
+  }
+
+  private updateTitle() {
+    if (this.requestedBy === null) {
+      this.title.innerText = this.client.getResourceString(
+        EOResourceID.JUKEBOX_IS_READY,
+      );
+      return;
+    }
+
+    const base = this.client.getResourceString(
+      EOResourceID.JUKEBOX_PLAYING_REQUEST,
+    );
+    this.title.innerText = this.requestedBy
+      ? `${base} (${this.requestedBy})`
+      : base;
+  }
+
+  private formatSubtitle(text: string) {
+    return `${this.client.getResourceString(EOResourceID.DIALOG_WORD_CURRENT)} : ${text}`;
+  }
+
+  private getSongNames(): readonly string[] {
+    return this.client.edfs.jukebox?.getLines() ?? [];
+  }
+}
diff --git a/src/ui/utils/create-menu-item.ts b/src/ui/utils/create-menu-item.ts
index 7de96d8d..c60149e2 100644
--- a/src/ui/utils/create-menu-item.ts
+++ b/src/ui/utils/create-menu-item.ts
@@ -3,6 +3,23 @@ import type { DialogIcon } from '@/ui/ui-types';
 import { getItemMeta } from '@/utils';
 import { setItemImageFromGfx, setSkillBackgroundFromGfx } from './gfx-resource';
 
+const DIALOG_ICON_SIZE = 31;
+const DIALOG_ICONS_PER_ROW = 9;
+const DIALOG_ICON_OFFSET_Y = 291;
+
+function setDialogIconBackgroundPosition(
+  menuIcon: HTMLDivElement,
+  icon: DialogIcon,
+) {
+  const iconIndex = Number(icon);
+  const x = (iconIndex % DIALOG_ICONS_PER_ROW) * DIALOG_ICON_SIZE;
+  const y =
+    DIALOG_ICON_OFFSET_Y +
+    Math.floor(iconIndex / DIALOG_ICONS_PER_ROW) * DIALOG_ICON_SIZE;
+
+  menuIcon.style.backgroundPosition = `-${x}px -${y}px`;
+}
+
 export function createIconMenuItem(
   icon: DialogIcon,
   label: string,
@@ -14,6 +31,7 @@ export function createIconMenuItem(
   const menuIcon = document.createElement('div');
   menuIcon.classList.add('menu-item-icon');
   menuIcon.setAttribute('data-id', `${icon}`);
+  setDialogIconBackgroundPosition(menuIcon, icon);
   menuItem.appendChild(menuIcon);
 
   const menuLabel = document.createElement('div');
diff --git a/src/wiring/client-events.ts b/src/wiring/client-events.ts
index 5f674638..b1c561c8 100644
--- a/src/wiring/client-events.ts
+++ b/src/wiring/client-events.ts
@@ -60,6 +60,10 @@ interface ClientEventDeps {
   bankDialog: { show(): void };
   barberDialog: { show(): void };
   boardDialog: { setData(posts: unknown): void; show(): void };
+  jukeboxDialog: {
+    setRequestedBy(requestedBy: string | null): void;
+    show(): void;
+  };
   lockerDialog: { setItems(items: unknown): void; show(): void };
   skillMasterDialog: {
     setData(name: string, skills: unknown): void;
@@ -242,6 +246,15 @@ export function wireClientEvents(deps: ClientEventDeps): void {
     deps.boardDialog.show();
   });
 
+  client.on('jukeboxOpened', ({ requestedBy }) => {
+    deps.jukeboxDialog.setRequestedBy(requestedBy);
+    deps.jukeboxDialog.show();
+  });
+
+  client.on('jukeboxUpdated', ({ requestedBy }) => {
+    deps.jukeboxDialog.setRequestedBy(requestedBy);
+  });
+
   client.on('lockerOpened', ({ items }) => {
     deps.lockerDialog.setItems(items);
     deps.lockerDialog.show();
diff --git a/src/wiring/ui-events.ts b/src/wiring/ui-events.ts
index 29b5f05f..679eeefd 100644
--- a/src/wiring/ui-events.ts
+++ b/src/wiring/ui-events.ts
@@ -100,6 +100,7 @@ interface UiEventDeps {
   questDialog: { on(event: string, cb: EventCallback): void };
   shopDialog: { on(event: string, cb: EventCallback): void };
   bankDialog: { on(event: string, cb: EventCallback): void };
+  jukeboxDialog: { on(event: string, cb: EventCallback): void };
   lockerDialog: {
     getItemAmount(id: number): number;
   };
@@ -373,6 +374,11 @@ export function wireUiEvents(deps: UiEventDeps): void {
   // Bank dialog
   wireBankEvents(deps);
 
+  // Jukebox dialog
+  deps.jukeboxDialog.on('requestSong', ({ trackId }: { trackId: number }) => {
+    client.jukeboxController.requestSong(trackId);
+  });
+
   // Stats
   deps.stats.on('confirmTraining', () => {
     deps.smallConfirm.setContent('Do you want to train?', 'Character training');
