https://github.com/ManuelVargas1251/Chord-Finder
🎹🎵 Client web application to find chords through keyboard UI
https://github.com/ManuelVargas1251/Chord-Finder
chord chord-finder chords finder interval javascript jest music piano piano-keyboard
Last synced: 2 months ago
JSON representation
🎹🎵 Client web application to find chords through keyboard UI
- Host: GitHub
- URL: https://github.com/ManuelVargas1251/Chord-Finder
- Owner: ManuelVargas1251
- Created: 2017-11-22T07:44:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-28T02:44:15.000Z (over 1 year ago)
- Last Synced: 2024-10-28T16:12:42.318Z (7 months ago)
- Topics: chord, chord-finder, chords, finder, interval, javascript, jest, music, piano, piano-keyboard
- Language: JavaScript
- Homepage: https://mnl.space/Chord-Finder/
- Size: 5.28 MB
- Stars: 21
- Watchers: 2
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
Awesome Lists containing this project
README
[](https://travis-ci.com/ManuelVargas1251/Chord-Finder)
[](https://coveralls.io/github/ManuelVargas1251/Chord-Finder?branch=master)
[](https://github.com/facebook/jest)
# Chord Finder 🎹
This is a js web application that tells you what chord you are playing on the piano in any inversion. Click or keypress the notes to build your chord! If you select two notes it will tell you what the interval is between those two notes.
I started by rewriting my previous C++ chord finder [console application](https://github.com/ManuelVargas1251/ChordFinder) in javascript and added the web interface as I went.
[[View Web Application](https://mnl.space/Chord-Finder/)]
## Event Handlers
Code is triggered by clicking or keypressing on the keyboard UI.
Also using [Automatic Semicolon Insertion](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion).
```javascript
// mouse click on piano key event
$(".key").click(function () {
//pass note id to add to chord
let noteCode = $(this).attr('id')
$(this).toggleClass("pressed") //toggle key color key when pressed
processDOMChord(noteCode, userChordIds)
})
// keyboard keypress event
$("html").keypress(function (element) {
let noteCode = keyMapping[element.which]
$("#" + noteCode).toggleClass("pressed")
processDOMChord(noteCode, userChordIds)
})
// reset button event
$(".reset").click(function (){
userChordIds.forEach((v)=>$("#" + v).toggleClass("pressed"))
userChordIds = []
processDOMChord(undefined, userChordIds)
})
```
## Unit Testing & Coverage
Using [Facebook's Jest](https://facebook.github.io/jest/) for unit testing. Configured [Travis-CI](https://travis-ci.com/github/ManuelVargas1251/Chord-Finder) for continuos integration on every commit and pull request as well as coverage reporting from [Coveralls](https://coveralls.io/github/ManuelVargas1251/Chord-Finder)
```bash
# download node modules locally
npm install
# run js tests
npm test
```
### Test Configuration in `package.json`
```json
{
"build": "node env",
"test": "jest --coverage --coverageReporters=text-lcov | coveralls",
"jest-watch": "jest --watchAll --coverage",
"jest": "jest --coverage --coverageReporters=text-lcov | coveralls"
}
```
### For local testing, remove the coveralls flag, else err response 422
```json
{
"build": "node env",
"test": "jest --coverage --coverageReporters=text-lcov",
"jest-watch": "jest --watchAll --coverage",
"jest": "jest --coverage --coverageReporters=text-lcov"
}
```
## Development Setup
```bash
# download the repo locally from github and cd into the folder
gh repo clone ManuelVargas1251/Chord-Finder
cd Chord-Finder
# install dev node modules (includes browserify)
npm install
# build new bundle to view your changes
node_modules/.bin/browserify src/js/index.js > src/js/bundle.js
```
## Design Development
## Sound Development
When testing sound locally I get CORS errors which prevent the sound from playing for security reasons. As a work around, run a local server from root:
```node
npm install --global http-server
http-server ./
```
## Environments
By using https://raw.githack.com/ I created a working lower environments to test code in any committed branch. I was also able to provide test statuses for every branch through Travis CI and Coveralls.
[Production](https://mnl.space/Chord-Finder/)
[](https://travis-ci.com/ManuelVargas1251/Chord-Finder)
[](https://coveralls.io/github/ManuelVargas1251/Chord-Finder?branch=master)
[Development](https://raw.githack.com/ManuelVargas1251/Chord-Finder/development/index.html)
[](https://travis-ci.com/ManuelVargas1251/Chord-Finder)
[](https://coveralls.io/github/ManuelVargas1251/Chord-Finder?branch=development)
# Reference
[Musical Chord Wiki](https://en.wikipedia.org/wiki/Chord_(music))
[Musical Interval Wiki](https://en.wikipedia.org/wiki/Interval_(music))