Skip to content

feat: add Web Audio API sound system - #19

Open
drumst0ck wants to merge 2 commits into
OpenLeagueManager:developfrom
drumst0ck:feat/web-audio-system
Open

feat: add Web Audio API sound system#19
drumst0ck wants to merge 2 commits into
OpenLeagueManager:developfrom
drumst0ck:feat/web-audio-system

Conversation

@drumst0ck

Copy link
Copy Markdown
Contributor

Summary

Closes #18

This PR introduces a centralized audio system using the Web Audio API for zero-latency, hardware-accelerated sound playback across the app.

What's New

Audio Engine (src/lib/audioManager.ts)

  • Web Audio API replaces HTMLAudioElement for reliable playback on desktop and Android
  • Pre-decoded AudioBuffers — sounds are fetched and decoded once, then reused forever
  • Zero latency — no file I/O during playback, instant trigger
  • Real-time master volume — single GainNode updated live from Settings
  • Clean lifecycle — each play spawns a fresh AudioBufferSourceNode, auto-disconnects on end

Global Sound Effects

  • Click sound (public/sounds/click.ogg) — plays on every <button> and [role="button"] click via GlobalClickSound.tsx
  • Notification sound (public/sounds/notification.ogg) — plays when a new inbox message arrives via GlobalNotificationSound.tsx
  • Both respect the SFX toggle in Settings

Audio Settings

New section in Settings with:

  • Master volume slider (0–100%)
  • Sound Effects toggle
  • Music toggle (for future background music)

Contributor Documentation

docs/ADDING_AUDIO.md explains:

  • How the Web Audio API architecture works
  • How to add a new sound effect (3 steps)
  • How to add background music
  • Supported formats (OGG recommended)
  • Licensing requirements (GPL-3.0 compatible only)
  • Recommended free sources (Kenney, OpenGameArt, Freesound)

Assets

File Source License
public/sounds/click.ogg Kenney Interface Sounds CC0
public/sounds/notification.ogg Kenney Interface Sounds CC0

Testing

  • TypeScript compiles without errors in modified files
  • Rust checks pass
  • Click sound plays on all sidebar navigation buttons
  • Notification sound triggers on new inbox messages
  • Volume slider updates playback volume in real time
  • SFX toggle disables all sound effects
  • docs/ADDING_AUDIO.md renders correctly

Checklist

…on sounds

- Implement centralized audio manager using Web Audio API
  - Zero-latency playback via pre-decoded AudioBuffers
  - Hardware-accelerated, mobile-friendly architecture
  - Real-time master volume control via GainNode
- Add global click sound on all interactive buttons
- Add notification sound for new inbox messages
- Add audio settings: master volume, SFX toggle, music toggle
- Include Kenney interface sounds (CC0) for click and notification
- Add contributor guide at docs/ADDING_AUDIO.md
…audio-conflicts

# Conflicts:
#	src/App.tsx
#	src/pages/Settings.tsx
#	src/store/settingsStore.test.ts
#	src/store/settingsStore.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant