- Aster Angelic Leong, 1005493
- Chua Po Siang Bridget, 1005615
- Claire Oudea Gan Li, 1005492
- Raymond Harrison, 1005329
- Tan Kang Min, 1005483
Chordstruck
Learning an instrument for the first time is never an easy feat and with each instrument comes a different set of problems that beginners would face. While there are many resources out there for beginners to learn an instrument, it often feels as though there is no one main resource to turn to when learning, especially when you are not sure whether you’re playing it correctly. Apart from this, we often find that apps like SimplyGuitar have in-app purchases and requires payment in order to unlock all of their features. As such, we would like to redesign the way people learn an instrument, by providing them with accessible key resources to allow for steady improvements. Our focus is on young adults (a bigger percentage of whom indicate an interest in learning to play a musical instrument).
Our project involves redesigning a music learning app, focusing on specifically the guitar. Our progressive web app makes use of React, Ruby, Javascript, Material UI and Netlify, and is compatible on mobile phones and computers.
Click here to try the app out on your own screen: https://chordstruck.netlify.app/
Here are some of the features of our app:
- Chord recognition & tuning: If the sound recognition can identify different chords, this would help solve chord recognition for identifying different songs, as well as tuning
- Basics: Teaching how to hold the guitar properly, how to tune, guitar terminology, how to use the app to learn songs
- Teach through a song – give them some options to choose from which would have the 4 basic chords
- Teaching basic chords through a selected song
- Clone our github repository by copying the url into your text editor and doing a 'git clone'.
- Whenever recloned, ensure files match those of the react branch and not the main branch. Also ensure that you delete the file browserslist if it is there.
- Then copy the following code and run it in your command terminal one by one:
npm config set legacy-peer-deps true
npm install @material-ui/core
npm install react-player
npm i styled-components
npm install react-countdown-clock
npm install react-wavify
npm install
pip install autochord
npm start
- ML model: https://github.com/cjbayron/autochord
- Basic music player design: Wilson from https://github.com/WilsonLe/react-music-player
- Guitar chord diagrams: https://www.guitarlessons.org/lessons/chords/
- Tuner code: https://github.com/dgvai/webaudio-pitch-tuner