canberkvarli / spark

An interactive Javascript project Inspired from a 25-keys MIDI synthesizer keyboard. Built with JavaScript, HTML/CSS.

Spark: The Synthesizer Keyboard

Spark is an interactive demo project which is intented to improve the frontend skills of the oneself as well as creating a musical spark within every soul in the world. Anyone who is curious, interested, or even just to play around with it can find something bigger in themselves that I hope Spark will illuminate their emotions and ideas into music.

Functionality & MVP

In Spark, users will be able to:

• Play notes using the keyboard. (e.g. Press A to play #C note)

• Adjust the type of the sounds. (e.g. square, sine, sawtooth, etc.)

• Implement an Envelope.

In addition, this project will include:

• Instructions on how to enlight your musical mind.

• README.md

Future Implementations

• Wavelength Display: (COMPLETED ON 09/14/21) – Unwind the eyes as the wavelength display will dance while playing with sounds.

• Record and Play buttons

Wireframes

Technologies, Libraries, APIs

• Web Audio API for the Osciliator, gain controls, envelope and many more features to play the sound from the browser.

• audioMotion-analyzer is a high-resolution real-time audio spectrum analyzer.

Implementation Timeline

Monday 07/12
• Build the piano keyboard with 25 keys and the notes table.
• Press keys to start and stop the sound.
• UI
Tuesday 07/13
• Setup the options to be able to change the type of the sound from the knob. (Future functionality)
• UI
Wednesday 07/13
• Drum pads on the keyboard
• UI
• Test
Thursday 07/14
• Bugfix
• UI improve
• Test
• Deploy