guitar-tuner

Guitar tuner built with ReactJS front-end and Python Flask API on the backend. The webapp is responsive. Deployed on https://tuneyourguitarnow.web.app/. Python Flask backend is running on an Apache2 server hosted on an AWS EC2 instance.

Table of Contents

1. Screenshots
2. Idea behind app
3. Installation
4. How it is built

Screenshots Of The App:

Idea Behind The App:

The idea is that a user can record one guitar string at a time and get visual feedback as to how in tune the string is with regards to the desired "tuning frequencies":

String	Frequency
E2	82.41
A	110.0
D	146.83
G	196.00
B	246.94
E4	329.63

Running Project locally

1. Install Python3 and ffmpeg
2. Clone repo: git clone git@github.com:StianIsmar/guitar-tuner.git
3. Create a virtual environment with virtualenv -p python3 ./venv
4. Activate the virtual env with source venv/bin/activate
5. server and run pip install -r server/requirements.txt to install python packages
6. Run API with python server/frequency_api.py
7. cd client
8. npm ito install react packages
9. npm start
10. Get out your guitar

How The App Is Built:

1. The audio is recorded on the client-side using mic-recorder-to-mp3.
2. POST request with audio information is sent to a REST API running with Flask.
3. The mp3 file is then parsed with pydub to a numpy array:

4. A Fast Fourier Transformation with numpy is performed on the array in order to see which frequencies are present in the audio array.

5. The frequency spectrum is then filtered according to the desired string frequencies, and the largest amplitude frequency is returned in the POST response from the Flask API.