Zamagana Synth

a project by Marcelo, Zakaria, Nathan and Gabriela

Main task division

• Marcelo: CSS
• Zakaria: React.JS/ Tone.js
• Nathan: React.JS/ Tone.js/ Css
• Gabriela: Project Management

Features

• Preset button
• controllers:
  • Octaver
  • reverb
  • delay
  • phaser
  • release
  • vibrato
  • envelop
    • attack
    • decay
    • sustain
    • release
    • reset button

Future workplans

• Sampler
• Sequencer
• Pop-up window for the controllers with multiple parameters
• Change Synth type menu
• Musical scale highlighter (when the user choose a scale, the notes which build the scale get highlighted with a different color)
• Sampler
• Sequencer
• Pop-up window for controllers
• Change Synth type menu
• Musical scale highlighter (when the user choose a scale, the nots which build the scale get highlighted with a differnt color)

Zsynth.js (contains the effects imported from the library tone.js)

// Delay

let zDelay = new Tone.FeedbackDelay({
  maxDelay: zDel.maxDelay,
  feedback: zDel.feedback,
}).toMaster();

// Reverb

let zReverb = new Tone.JCReverb({
  roomSize: props.zRev.roomSize,
}).toMaster();

// Pahser

let Zphaser = new Tone.Phaser({
  frequency: zPhs.frequency,
  octaves: zPhs.octaves,
  stages: zPhs.stages,
  Q: zPhs.Q,
  baseFrequency: zPhs.baseFrequency,
}).toMaster();

// Vibrato

let Zvibrato = new Tone.Vibrato({
  frequency: zVib.frequency,
  depth: zVib.depth,
}).toMaster();

/*
 * assigning the Imported Synth to a the variable zsynth
 * assigning values to its oscillator & envelop from the state
 * connect the the effects to the synth using .chain() methode
 */

let zsynth = new Tone.Synth({
  volume: zVol,
  oscillator: { type: zOsc },
  envelope: {
    attack: zEnv.attack,
    decay: zEnv.decay,
    sustain: zEnv.sustain,
    release: zEnv.release,
  },
}).chain(zDelay, Zvibrato, Zphaser, zReverb);

Zkeys.js (contains methods from tone.js and events handled through keyboard event handler package from npm)

// This function initiate the note to be played by applying the Tone.js methouds (.start() & .triggerAttackRelease())

const play = (note) => {
  Tone.start();
  const octavedNote = note + zOct;
  zsynth.triggerAttackRelease(octavedNote, zRel);
};

/*
    applying .map() method on zNotes( which represents note.json) 
    and rendering the synth keys and setting it's class based on the data entered there.
 */

let style = { color: "red" };
const CminorScale = ["C", "D", "Eb", "F", "G", "Ab", "Bb"];
const renderSynthKeys = zNotes.map((key) => (
  <div
    className={key.color}
    id={key.id}
    key={key.id}
    onMouseDown={() => play(key.note)}
    // style={CminorScale.includes(key.note) ? style : key}
  >
    {key.keyboardKey}
  </div>
));

/*
   using the react component "KeyboardEventHandler"
   and mapping again on Znotes in order to assign the keyboard keys that'll trigger the synth keys
 */
const keyboardHandler = (
  <KeyboardEventHandler
    handleKeys={["a", "w", "d", "r", "f", "g", "y", "h", "u", "j", "i", "k"]}
    onKeyEvent={(key) =>
      zNotes.map((obj) => {
        if (key === obj.keyboardKey) {
          play(obj.note);
        }
      })
    }
  />
);

Interface

• Keyboard-looking keys
• Volume slider
• Reset all parameters button
• Octave slider
• controller sliders:
  • reverb controller
  • delay controller
  • phaser controller
  • release controller
  • vibratto controller
  • envelop controller
    • attack slider
    • decay slider
    • sustain slider
    • release slider
    • reset button
• Reset all parameters button
• Wave form controller drop-down list

Technologies

• JavaScript
• ReactJs Library
• ToneJs Library
• Sass
• React keyboard event handler

References

• Modulargrid
• Learning Music Ableton
• MDN Simple Synth
• JS Piano Keyboard
• MDN Web Audio API

Project Structure

Zamagana Synth
│
│ README.md
| .gitignore
│ package.json
| package-lock.json
│
│
└───src
│   └───components
│   │    └───Zkey
│   │    └───Zsynth
│   │    └───controllers
│   │           └───controllers
│   │                └───controllers
│   │                │     └───ZenvelopController.js
│   │                └───Zcontrols (renders all other controllers)
│   │                └───ZdelayController.js
│   │                └───ZOctaveController.js
│   │                └───ZphaserController.js
│   │                └───ZreleaseController.js
│   │                └───ZreverbController.js
│   │                └───ZvibratoController.js
│   │                └───ZvolumeController.js
│   │                └───ZwaveFormController.js
│   │
│   │
│   └───App.js
│   └───index.js
│   └───helpers.js
│   └───scss
│   │     └───main
│   │     └───_base.scss
│   │     └───_controls.scss
│   │     └───_keyboard.scss
│   │     └───_normalize.scss
│   └───notes.json
│   └───defaultParameters.json
│
│
└───public
     └───index.html

Progress

date	plans / achievements
08.07.2020	- think of the features we want for the app
	- create a github repository
	- create a react project
	- check the API and read the documentation
09.07.2020	- click event to produce sound
	- main app state --> how many octaves are in the keyboard
	- notes: C-B
	- components : zcontrols, zsynth and zkeys
	-zkeys --> renders inside of zsynth in some kind of button that plays onClick
	-zcontrols--> pass an object and it will change the tone we will pass props into that
	-zsynth--> main component
13.07.2020	- dropdown menu
	- connect the Zsynthtypeswitcher with the rest
	- option to modulate the shape of the wave
	- add it first in the Zkey component and then see how to split components
	- further components : zOsc, zVol, zNotes
	- envelop controller
14.07.2020	- turn state into functional compornent
	- component folder --> zcontrols --> renders all the controls
	- oscillator type
	- set up classNames
	- styling after classNames
	- keyboard --> loading spinner
	- presets default (all presets together in a file) --> defaultParameter json
	- more controllers
	- octave change controller
15.07.2020	- implement vibratto
	- reverb to slider
	- update reverb component
	- pop up window
	- phaser