Skip to content

Web app built with ReactJS and Python Flask API. API Deployed with AWS EC2 and React app with Firebase Hosting.

Notifications You must be signed in to change notification settings

StianIsmar/guitar-tuner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

screenshot screenshot

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 [email protected]: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:

screenshot

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

screenshot

  1. 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.

About

Web app built with ReactJS and Python Flask API. API Deployed with AWS EC2 and React app with Firebase Hosting.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published