Guitar tuner

About 'Guitar tuner'

This is a guitar tuner, written in and for educational and demonstrational purposes.

An online professional guitar tuner with real-time audio analysis - works directly in the browser without additional software installation. Provides precise tuning through microphone with advanced autocorrelation algorithm, intuitive interface, and support for various tunings including custom configurations. Features professional-grade accuracy with harmonic filtering and edge case protection.

Based on tech stack:

• HTML,
• TypeScript,
• Nuxt,
• Vue,
• CSS,
• TailwindCss.

Features & Capabilities

Core Tuning Modes

• Standard Guitar Tuning: EADGBE (6-string)
• Alternative Guitar Tunings: Drop D, DADGAD, Open G, Open D, Drop C, ½ Step Down, Open C
• Bass Guitar Support: 4-string and 5-string bass tunings
• Ukulele Tunings: Soprano, Concert, Tenor, and Baritone variations
• World Instruments: Balalaika, Domra, Shamisen, Oud, Sitar tunings
• Custom Tunings: Create, edit and save custom tunings for any string instrument

Professional Features

• Real-Time Audio Analysis: Web Audio API with autocorrelation algorithm for precise frequency detection
• Visual Tuning Indicators: Color-coded feedback (blue - low, green - in tune, red - high)
• Cent-Based Precision: Deviation display in cents with moving indicator
• Reference Audio: Listen to correct pitch for each string
• Multi-Band Support: Configurable custom tunings
• Theme System: Light/dark modes
• Local Storage: All settings and custom tunings saved locally

Advanced Algorithms

• Enhanced Autocorrelation Algorithm: Advanced pitch detection with adaptive windowing and median filtering
• Harmonic Filtering: Intelligent rejection of octave harmonics and noise
• Stagnation Prevention: Dynamic buffer reset to prevent frequency "sticking"
• Robust Signal Validation: Multiple validation stages with confidence scoring
• Edge Case Protection: Safe handling of extreme frequencies and NaN values
• Adaptive Smoothing: Weighted moving average with exponential decay for stable readings
• Octave Correction: Smart frequency doubling/halving for out-of-range detection

Getting Started (Nuxt Minimal Starter)

Look at the Nuxt documentation to learn more.

Setup

Make sure to install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview

Check out the deployment documentation for more information.

Usage Scenarios

Primary Use Cases

• Standard Guitar Tuning: Quick tuning of 6-string guitar in EADGBE
• Alternative Tunings: Switch between popular alternative guitar tunings
• Other Instruments: Tune bass guitars, ukuleles, and world instruments
• Custom Tunings: Create and use custom tunings for non-standard instruments
• Performance Use: Quick tuning checks during rehearsal or performance

Technical Specifications

• Frequency Detection Range: 1-2000 Hz with safe edge case handling
• Precision: ±1 cent resolution with professional-grade accuracy
• Audio Processing: 8192-point FFT with optimized autocorrelation algorithm
• Signal Processing: RMS-based noise rejection with dynamic thresholding
• Real-Time Analysis: 60fps continuous audio processing
• Responsive Design: Mobile-first adaptive interface with grid-based layouts
• Browser Support: Modern browsers with Web Audio API support
• Zero Installation: Works entirely in browser with local storage persistence

Technical Implementation

Audio Processing

• Web Audio API: Microphone input and frequency analysis
• Autocorrelation Algorithm: Precise fundamental frequency detection
• Reference Tone Generation: Clean sine wave reference tones
• Noise Reduction: RMS-based silence detection

State Management

• Reactive Composables: Modular state management with useTuner()
• Local Persistence: Automatic saving of custom tunings and preferences
• Real-Time Updates: Continuous audio analysis with requestAnimationFrame

UI/UX Design

• Responsive Grid: Adaptive string layout for 1-10+ strings
• Visual Feedback: Color-coded status indicators
• Smooth Animations: CSS transitions for all interactive elements
• Accessibility: Semantic HTML and ARIA labels

Browser Compatibility

Requires a modern browser with:

• Web Audio API support
• MediaDevices.getUserMedia()
• ES2022+ JavaScript features
• CSS Grid and Flexbox

Recommended browsers:

• Chrome 90+
• Firefox 90+
• Safari 15+
• Edge 90+

Screenshots

License

The 'Guitar tuner' is open-sourced software licensed under the MIT license.