Skip to content

Conversation

@Deep-Jiwan
Copy link

Add 8-Band Parametric Equalizer

  • Bottom Bar Equalizer Widget: Compact equalizer interface added into the player's bottom bar with icon, preset selector, and ON/OFF toggle
  • 8-Band Parametric EQ: 8 frequency bands (60Hz, 150Hz, 400Hz, 1kHz, 2.4kHz, 6kHz, 12kHz, 15kHz) supporting gain range from -12dB to +12dB
  • Preset System: Pre-configured presets. Not implemented saving custom presets/creating new/ import/export, but custom set presets remains in localStorage across browser refreshes. Or so i believe

Implementation Details:

  • Web Audio API: Uses BiquadFilterNode to create a 10-node filter chain for smooth, high-quality audio processing
  • Persistence: localStorage integration for automatic save/restore of custom presets and settings

UI/UX Features:

  • Smooth Animations: 1-second ease-out transitions when switching presets
  • Real-time Feedback: Visual gain value display and gradient slider fills
  • Preset Cycling: Scroll on icon to quickly cycle through presets
  • Pin Feature: Pin equalizer popup to keep it visible while interacting with UI
  • Wheel Control: Scroll on sliders to fine-tune individual bands
  • Quick Toggle: Single-click on icon to enable/disable EQ
  • Custom Preset: Auto-saves manual adjustments as "Custom" preset

Files Changed and Components:

  • Added src/assets/icons/equalizer.svg -> SVG icon
  • Added src/components/BottomBar/Equalizer.vue -> Main component and UI for adjusting the EQ
  • Added src/stores/equalizer.ts -> storage and manage EQ state
  • Modified src/components/BottomBar/Right.vue -> Added EQ to player bar
  • Modified src/stores/player.ts -> Connect EQ to audio pipeline
  • Added src/utils/equalizer/eqPresets.ts -> manage pre-configured presets
  • Added src/utils/equalizer/equalizer.ts -> Web Audio API wrapper with 8-band BiquadFilterNode filter chain, audio routing, gain smoothing, and resource cleanup
  • Added src/utils/equalizer/presets.json -> The pre-bundled presets

Note to Reviewer:

  • I am not a very veteran developer. Just a guy with a vision. I needed this feature and used my best knowledge and help from Sonnet 4.5 to best implement this in a simple way. I thought it might be useful to others and so i am presenting this. If the code is heavily unusable (not safe or a lot of AI) then i understand that this pull request may not be merged.
  • If there are any changes then i am happy to do them. and then if the code is well and good then im glad i was able to help make this application better as i daily run this app myself.

@CLAassistant
Copy link

CLAassistant commented Dec 30, 2025

CLA assistant check
All committers have signed the CLA.

@Deep-Jiwan
Copy link
Author

Deep-Jiwan commented Dec 30, 2025

image image image image

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.

2 participants