A modern guitar tuner web application built with Vue.js and Tailwind CSS, featuring a sleek dark theme.
- Real-time pitch detection
- Visual tuning meter
- Frequency visualization
- Customizable A4 reference frequency
- Dark theme with Tailwind CSS
- Modern, responsive UI
- Vue.js 3 (Composition API)
- Tailwind CSS
- Vite for fast development
- Aubio.js for audio processing
- SweetAlert2 for notifications
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildThis project is set up with GitHub Actions for automatic deployment to GitHub Pages.
- Push your changes to the main branch
- GitHub Actions will automatically build and deploy your app
- Your app will be available at
https://[your-username].github.io/gtuner/
To manually deploy:
# Build for production
npm run build
# Deploy to GitHub Pages (if you're using gh-pages package)
npm run deploy- Allow microphone access when prompted
- Play a note on your guitar
- The app will detect the note and show how close it is to being in tune
- Adjust your guitar strings until the meter is centered
This project was migrated from vanilla JavaScript to Vue.js with Tailwind CSS. The code is organized as follows:
src/App.vue- Main Vue componentsrc/utils/- Utility functions for tuner, notes, and frequency barssrc/style.css- Tailwind CSS styles
The online tuner based on web audio api: https://qiuxiang.github.io/tuner/app.