Chordinate is a web-application that offers a light-weight instrument to encourage musical creativity and social play. The project was a chance to grow as a web-developer working under deadline.
BIG THANKS: Chordinate was visually designed by Rachel Needle -- a truly brilliant artist and generous friend (Product Designer @ Apple). Thank you and thanks to those who took time to check out the app.
The app is built around the keyboard which determines the URL depending on if it is in recording or playback state.
Notes are built by mapping a list of keyboard keys through a function that generates frequencies to create AudioContext nodes.
const makeTones = keys => {
let tones = {};
keys.forEach((key, idx) => {
tones[key] = 329.63 * Math.pow(2, (idx/12));
});
return tones;
};Songs are then saved in with note-keys in an array of slices which can be played back by storing the difference from the time the song started and the time the note or chord was played.
slices:
[
{ notes: [ 'a' ], timeSlice: 1250191 },
{ notes: [], timeSlice: 1255000 },
{ notes: [ 'a', 's' ], timeSlice: 1265180 }
{ notes: [], timeSlice: 1279511 }
]
Songs go to a feed that sorts by age, likes and plays. Songs are searchable and clicking a username will show all the user's songs.
The features for a minimum-viable-product were:
- New account creation, login, and guest/demo login
- CRUD Tunes via Synth
- Share tunes via feed
- Discoverable tunes
- User Pages
I hope to add more to user interaction with friends and follows. I also hope to fill out the keyboard with scales and instruments. Layering songs and also live jam-sessions--plenty of room for growth.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent