feat: implement web audio pitch synthesizer for visualization feedback

[Sanan507]

Closes #85

What
Implemented a Web Audio synthesizer that maps algorithm visualization array values to distinct pitches using the Web Audio API.
Added a "Pitch Synthesizer" toggle to the Settings page and replaced random-value manual sound logic in SortingPage, SearchingPage, and PathfindingPage with dynamic, value-driven audio hooks in usePlayback.

How it was tested

• Hand-tested audio generation with Web Audio oscillators.
• Validated TypeScript typing and build output with pnpm run build.
• Ran existing unit tests with pnpm run test (Passed).
• Tested UI integration via headless Playwright rendering.
• Visually verified the layout of the newly implemented "Pitch Synthesizer" toggle in SettingsPage.tsx.

Results
The synthesizer correctly maps compared and swapped array values to an A-minor pentatonic scale between 220Hz and 880Hz. It uses standard sine waves for simple array comparisons and faster, higher-velocity triangle waves for structural updates (swaps).

---

PR created automatically by Jules for task 7388839762511259350 started by @Sanan507

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
algorithm-race-visualizer	Ready	Preview	Aug 4, 2026 7:09am