ChordGuru is a music chord identification/recombination web application for students learning about chords in music theory, as well as composers experimenting with various chord combinations given a group of notes for their compositions. The website functions by prompting the user to enter their desired notes through a multitude of input methods, then analyzing the given information through an Express.js backend server and sending chord combinations to the user through JS's Fetch API. Currently, the input methods supported include: interacting with an virtual piano keyboard; creating an audio recording on the website or drag-and-dropping a pre-recorded audio file; placing and modifying notes through a interactive staff builder; and standard text-like input.
This project makes use of Node.js and Express.js for the back-end server, while Bootstrap was utilized in front-end to create a responsive webpage design for various devices and browsers. Requests between client-side and server-side are handled through the Fetch API, and audio note parsing is handled through an Yin-FFT pitch detection algorithm in Python. The website design was created using Figma, an online interface design tool.
Other technologies of note include:
- Wavesurfer.js & the Web Audio API to create waveform visualizations of audio recordings and live audio streams from the microphone,
- Vexflow to generate chord results on music staves and to create an interactive staff builder
- aubio and pydub Python libraries for audio pitch detection and file conversion, respectively
This website, which is currently hosted on glitch.com, can be accessed here (updated as of 09/05/2023). Just keep in mind that it might take a bit of time for the page to load at first, if no one has visited it within the past five minutes (one of Glitch's free account limitations for hosting sites with back-end servers).
This is a WIP section for when I've got enough time to sit down and write a description.
...BUT if you're interested, I would recommend you check the schematics/ folder in the project root folder for a rough explanation of the logic behind the chord analysis (Scheme_1.png to Scheme_3.png). Further reading of music set theory can be pursued here:
Note that basic to moderate music theory knowledge is recommended (so at least RCM Basic Harmony/Level 9 Harmony levels of knowledge) for the above links.
-
Create design and add implementation of interactive staff/text field input - Clean up and restructure code for certain CSS/JS files
- Hook up sound to results page in chord info row dropdown
- Optimize Text/Staff Line input page for mobile devices (specifically the interactive staff line, when changing device orientation from portrait to landscape)
- Add proper home page, instead of redirecting to chords main page (unlikely to accomplish)
- Add a working "Contact Me" page
- Add support for analyzing scales
- Add extra tools, such as a metronome
Navigate to the root folder of the project and run:
npm install
npm run startLocalOriginal Python script and project schematics created by Kevin Chen.