Dungeon-crawler background music keeps playing after navigating to another game #744

New Issue

2026-07-20T18:46:56Z

spikerj commented

2026-07-20 18:46:56 +00:00

Bug

On https://learn.spikersoft.com/dungeon-crawler, start a game (floor music playing), then navigate via the menu to another route (e.g. the space-game). The dungeon-crawler's looping background music keeps playing over the new page.

Root cause

`DungeonCrawlerComponent.cleanup()` (called from `ngOnDestroy`) disposes the renderer/scene/HUD and disconnects SignalR, but never stops the `AudioSystem`. THREE.Audio plays via WebAudio, which is independent of the component's DOM lifecycle, so the looping floor track (`setLoop(true)`) survives component destruction.

Secondary race: `AudioSystem.loadFloorMusic()` starts playback inside the async `AudioLoader.load` callback — navigating away while a track is still loading would start music after destroy even if `stopAll()` were called in cleanup.

Fix

Add `dispose()` to `AudioSystem` that stops+disconnects background music and footsteps and sets a disposed flag guarding the async load callbacks (and `playSound`).
Call it from `cleanup()` in `dungeon-crawler.component.ts`.

## Bug On https://learn.spikersoft.com/dungeon-crawler, start a game (floor music playing), then navigate via the menu to another route (e.g. the space-game). The dungeon-crawler's looping background music keeps playing over the new page. ## Root cause \`DungeonCrawlerComponent.cleanup()\` (called from \`ngOnDestroy\`) disposes the renderer/scene/HUD and disconnects SignalR, but never stops the \`AudioSystem\`. THREE.Audio plays via WebAudio, which is independent of the component's DOM lifecycle, so the looping floor track (\`setLoop(true)\`) survives component destruction. Secondary race: \`AudioSystem.loadFloorMusic()\` starts playback inside the async \`AudioLoader.load\` callback — navigating away while a track is still loading would start music *after* destroy even if \`stopAll()\` were called in cleanup. ## Fix - Add \`dispose()\` to \`AudioSystem\` that stops+disconnects background music and footsteps and sets a disposed flag guarding the async load callbacks (and \`playSound\`). - Call it from \`cleanup()\` in \`dungeon-crawler.component.ts\`.

spikerj commented

2026-07-20 18:55:19 +00:00

Resolved in spikersoft-angular PR #473 (merged to master, 0b3bf699). Added AudioSystem.dispose() (stops/disconnects background music + footsteps, disposed flag guards the async AudioLoader callbacks and playSound) and wired it into the dungeon-crawler component's cleanup(). Covered by new audio-system.spec.ts. Closing.

Resolved in spikersoft-angular PR #473 (merged to `master`, 0b3bf699). Added `AudioSystem.dispose()` (stops/disconnects background music + footsteps, `disposed` flag guards the async AudioLoader callbacks and `playSound`) and wired it into the dungeon-crawler component's `cleanup()`. Covered by new `audio-system.spec.ts`. Closing.

spikerj closed this issue

2026-07-20 18:55:20 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#744