An interactive, client-side static site showcasing first-order RC low-pass and high-pass filters. Calculate cutoff frequencies, solve for resistors or capacitors, visualize Bode magnitude/phase plots, and hear real-time audio demos—all without any backend or external dependencies.
You can explore the live site here:
- Home: https://bocaletto-luca.github.io/AudioFilterCalculator/
- Low-Pass Filter: https://bocaletto-luca.github.io/AudioFilterCalculator/low-pass-filter.html
- High-Pass Filter: https://bocaletto-luca.github.io/AudioFilterCalculator/high-pass-filter.html
-
Unified Navigation
Consistent header and footer acrossindex.html,low-pass-filter.html, andhigh-pass-filter.html. -
RC Calculator
- Solve for cutoff frequency (fc), resistance (R), or capacitance (C).
- SI unit selection: Ω, kΩ, MΩ, F, mF, μF, nF, pF.
- “Copy link” button shares current parameters via URL.
-
Interactive Bode Plots
- Magnitude (dB) and phase (°) tabs.
- Logarithmic frequency axis (1 Hz–100 kHz).
- Dark-themed Plotly integration, responsive by default.
-
Real-Time Audio Demo
- Web Audio API: sine, square, sawtooth, triangle, and white noise.
- Sync cutoff to RC calculator or set manually.
- Wet/dry mix control to blend filtered vs. original signal.
-
SEO & Social
- Meta tags, Open Graph, Twitter Card, and JSON-LD for rich previews.
- GPL v3 license declaration in metadata.
-
Accessible & Responsive
- Semantic HTML, ARIA roles, keyboard-friendly controls.
- Mobile-first grid layouts and fluid typography.
-
Clone the repository
git clone https://github.com/your-username/rc-filter-explorer.git cd rc-filter-explorer -
Serve locally
For full functionality (Web Audio, Plotly), run a local HTTP server:# Python 3 python3 -m http.server 8000 # Node.js npx http-server -p 8000
Then open http://localhost:8000 in your browser.
-
Or simply open the HTML files in your favorite browser:
open index.html open low-pass-filter.html open high-pass-filter.html
-
Home (
index.html)
Overview of the project, quick links to each filter tool, and theme switcher (if enabled). -
Low-Pass Filter (
low-pass-filter.html)- Select the parameter to solve (fc, R, or C).
- Enter the known values; adjust units.
- Click Calculate to compute the result and redraw plots.
- Switch between Magnitude and Phase tabs for Bode analysis.
- Use the Audio demo section to hear filter behavior.
-
High-Pass Filter (
high-pass-filter.html)
Same workflow as Low-Pass, but transfer function and audio filter type set to high-pass.
├── index.html # Home page with navigation
├── low-pass-filter.html # RC low-pass filter tool
├── high-pass-filter.html # RC high-pass filter tool
└── README.md # This file
-
Theme Tokens
Update CSS custom properties under:rootinsite.cssor inline styles to tweak colors, fonts, and spacing. -
Menu Links
Modify the<nav>in each HTML page to add, remove, or reorder entries. -
Advanced Filters
Extend with band-pass, band-stop, or higher-order filters by copying the existing structure and adjusting the transfer function. -
Light/Dark Toggle
Implement a toggler by swapping CSS variables or adding adata-themeattribute on<html>.
- Fork the repository
- Create a feature branch (
git checkout -b feature/awesome-filter) - Commit your changes (
git commit -m "Add band-pass filter tool") - Push to your branch (
git push origin feature/awesome-filter) - Open a Pull Request
Please adhere to the existing code style, include relevant documentation, and test all features before submitting.
Distributed under the GNU General Public License v3.0.
See LICENSE for details.
Bocaletto Luca
GitHub: @bocaletto-luca
Feel free to open issues or reach out for questions and feature requests. Enjoy exploring RC filters!