braaar / jam-assistant Goto Github PK
View Code? Open in Web Editor NEWA web app you can use at a live jam session to come up with ideas. https://braaar.github.io/jam-assistant/
License: GNU General Public License v3.0
A web app you can use at a live jam session to come up with ideas. https://braaar.github.io/jam-assistant/
License: GNU General Public License v3.0
We want to have some kind of harmonic logic in the app so that you can get chords that fit together harmonically.
In the harmonic style of 18th century european musicians, chords are grouped into their harmonic functions with a number from 1 to 7.
Function | Extension | Notes |
---|---|---|
I |
The root (tonic) | |
II |
||
III |
||
IV |
Subdominant | |
V |
Dominant | |
VI |
||
VII |
In the C major scale, these chords are
I
: C majorII
: D minorIII
: E minorIV
: F majorV
: G majorVI
: A minorVII
: B dimWe want to write a function that will take some numbers and translate them into actual chords
const fourChords = {
chords: [1, 5, 6, 4],
mode: "major"
}
const keyCenter = "C";
writeChordProgression(fourChords, keyCenter); // returns [ "C", "G", "Am", "F"]
We can use this function alongside a large catalogue of chord progressions to get a random chord progression from the selection. If you grab two progressions you now have an A and B part you can alternate between.
getRandomProgression("C", "major"); // returns [ "C", "G", "Am", "F"]
getRandomProgression("C", "major"); // returns [ "C", "F", "G", "F"]
Features we want in the future
Loose discussion about future ideas is welcome in this issue, but feel free to create issues for more specialised discussion of specific features.
Right now we have the bare minimum in terms of CI/CD. More actions could allow us to do more fancy stuff or facilitate good coding practices
Right now the app is using the default react favicon. We should perhaps come up with a logo or symbol to use instead.
Kind of silly to have this as the page title. It's just the default from create-react-app
. Maybe "Jam Assistant" is better?
A navigation in the header would be nice when we have multiple pages to navigate between.
I suggest we use React Router for navigation
jam.tsx
at /
(root of the web page)/
(using React Router's Link
Element)I think an about page would be nice.
<Heading> About </Heading>
<Paragraph> Blabla bla </Paragraph>
For now we can just copy the text from the readme or something.
I think it could be useful to have a text that explains briefly how the page works, but ideally everything should be fairly self explanatory if we design it right.
We should add a route for it when we get the routing setup (see #10). I think /about
is a nice path
We should update the description tag. Right now it says Web site created using create-react-app
.
I would rather have it say something like A web app you can use at a live jam session to come up with ideas.
(we can work on the description more, but it's a start).
jam-assistant/public/index.html
Line 9 in 95cb0dd
theme.ts
When I load the page it's always showing Am
in the chord list.
We need to remove that as a default value from the useState:
Line 7 in 7add1fe
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.