Introduction:
BabySynth began as a single button that would output a musical synth note. After several iterations it quickly turned into what is now a 13-key MiniSynth Keyboard. These notes include white keys which are the natural notes 'C thru upper octave C' and 5 black keys which are sharp/flat notes 'C# thru A#'. Included are two buttons that play C Major arpeggios, which play a C Major Chord one note at a time with the click of a button.
Gold Release
https://mini-synth.herokuapp.com/
Technologies used:
ReactJS
HTML5
CSS3
JavaScript
The approach:
Created a parent component, App.js which imports children components, "WhiteKeys.js, BlackKeys.js, and PlayChord.js" and deployed MiniSynth on github using ReactJS through an index.html entry point using an index.js
Unsolved problems:
Successfully align "key note" names
Personal notes so you can come back to your project later in the course and be able to pick up your train of thought, etc
### Wishlist Ideas
• Eventually I'd like to include a couple buttons that shape the sounds of the keyboard also known as filters. This filter can change the shapes/lengths/pitch of each sound when engaged.
• I'd like to include a mod wheel and a volume level as well as an on/off switch
• Ability to connect a midi keyboard
• WhiteKeys to become the 'main' Keyboard Component, which renders separate compoments WhiteKeys and BlackKeys
MiniSynth Project
This project was bootstrapped with Create React App.
To try it out on your own system:
• https://mini-synth.herokuapp.com/
OR
git fork https://github.com/saracpena/2020-SE-Master/tree/main/Projects/mysynth
To just run the app as is:
npm install
npm start
and go to http://localhost:3000.
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Sources
Compliments of Tone.js and installed the librairies from https://tonejs.github.io/