About Sound-a-licious

As a web developer I was updating my skill-set by taking the Udemy Web Developer Bootcamp and one of the assignments was to write a web app 'clone' of an existing website to generate a sound and a color by pressing a key on the keyboard. I've seen several sound generator-type apps around the web, but with several years of piano lessons behind me I was disappointed in them. Some displayed a piano-style keyboard but you had to click the keys with the mouse. Others, geared toward piano players, had the piano keys mapped to keyboard keys in order; a progression of keypresses would produce a scale. However, chords were assigned to specific keys and playing more than single notes was difficult. Our clone had no onscreen keyboard, a keypress on the computer keyboard would generate a "sound" but the sounds were random. There was no visual feedback; one had to remember which keys produced which sounds with no ability to play a melody. The app was interesting in that it also produced a shape with a pre-assigned color, however, the shapes were random as were the colors.

I wanted to combine the best of everything, with the ability to switch between piano-style and computer-style keyboards. I also wanted the ability to auto-generate a chord based on the note pressed: press the "C" key while holding a modifier key and get a C-major chord. I love the idea of seeing the "color" of the note. To that end I thought it would be better to work with frequencies rather than recorded files. Then I thought it would be nice to be able to change the pitch of a note by dragging with the mouse. Very much like a Theremin.

All in all this turned into quite a project, a bit over-ambitious, perhaps, but I learned a lot. I had to learn about the Web Audo API and Oscillators. Using it opened up a world of possibilities but I had to limit the options due to time constraints. I have more ideas for this and will return in the future. I did it in plain JavaScript to reinforce what I was learning, saving JQuery and other libraries for later after I became more skilled in the basics. I learned the Canvas and Animation and, of course, HTML5 and CSS3. I'm sure This could be more more efficient and better structured. I'm hoping to find a kind-hearted mentor to take me under her or his wing to teach me.

Requirements

This is not a flexible design and is not intended for smaller touch screens or mobile. It requires a hardware keyboard and lots of screen space.

Computer-style keyboard

Best visual feedback for how notes are mapped to the keyboard. Press an "active" key to play a note. Press and hold the spacebar while pressing a key to play that note's major chord chord. The notes are mapped to the keyboard across the "Tab, Q, W, E, R, T, Y" row, plus "return" for the final key in the scale. Black keys or sharps/flats are mapped across the number row skipping keys where black keys would normally skip.

Piano-style keyboard

Looks like a traditional two-octave piano keyboard but still mapped to the computer keyboard as above with the same functionality.

Theremin Module

Press the "Start Theremin" button to start a sound at a default frequency. Drag the "Frequency Slider" to change the frequency which we interpret as a change in pitch. Press the "Stop Theremin button to stop the sound. Alternatively you can drag the colored circle at screen left to change the frequency and amplitude, or pitch and volume, of the sound.

Special thanks

Thanks to Matt Kallander for developing an equation to correlate note frequency to hue. Thanks to Patatap for the cool idea of displaying a color while playing a sound. Thanks to Apronos for showing which notes to map to which computer keyboard keys. Thanks to all the tutorials and blogs on the web for how-to and advice.