A modern, web-based guitar tuner built with React, TypeScript, and the Web Audio API. Features real-time pitch detection, a visual tuning gauge, and a guitar headstock visualization.
- Real-time Pitch Detection: Uses autocorrelation algorithms to accurately detect frequency and musical notes from microphone input.
- Visual Tuner Gauge: Precise needle gauge showing cents deviation (sharp/flat) for accurate tuning.
- Interactive Headstock: Visual representation of guitar strings that highlights the detected string.
- Frequency Graph: Live visualization of the audio waveform.
- Simulation Mode: Built-in test mode to demonstrate functionality without an instrument.
- Responsive Design: Fully responsive UI that works on desktop and mobile devices.
- Frontend Framework: React 19
- Build Tool: Vite 5
- Language: TypeScript
- Styling: Tailwind CSS v4
- Audio Processing: Web Audio API
- Icons: Lucide React
- Node.js (v20.19.0+ or v22.12.0+ recommended)
- npm (v10+)
-
Clone the repository:
git clone https://github.com/sidsri14/guitar-tuner.git cd guitar-tuner -
Install dependencies:
npm install
To start the development server:
npm run devOpen http://localhost:5173 in your browser.
To build the application for production:
npm run buildThe build artifacts will be stored in the dist/ directory.
- Grant Permissions: When you first load the app, allow microphone access when prompted.
- Tune Your Guitar: Pluck a string on your guitar. The tuner will detect the note and show you how close it is to the nearest standard tuning note (E, A, D, G, B, E).
- Green Check: In tune!
- Red Needle: Tune up or down as indicated.
- Simulation: Click the "Simulate" button to see the tuner in action with a generated test tone.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request