My final project web app will be an electronic musical instrument using the Web Audio API for waveform sound synthesis.
- The application allows you to play play 8 notes (1 octave) using the QWERTY home row or on-screen buttons:
| Do | Re | Mi | Fa | Sol | La | Ti | Do |
|---|---|---|---|---|---|---|---|
| C | D | E | F | G | A | B | C |
| a | s | d | f | j | k | l | ; |
I'm thinking of using the G and H keys as an additional control, like volume or octave.
Interface expands to enable playing 2 chromatic octaves:
| q | w | e | r | | u | i | o | p |
| a | s | d | f | | j | k | l | ; |
| z | x | c | v | | m | , | . | / |
| F | F♯ | G | G♯ | | F | F♯ | G | G♯ |
| C♯ | D | D♯ | E | | C♯ | D | D♯ | E |
| A | A♯ | B | C | | A | A♯ | B | C |
The Number row could control volume:
| Volume Level: | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100% |
|---|---|---|---|---|---|---|---|---|---|---|
| Key: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 |
The app has controls that initialize the on-screen controls to match the values of the synth parameters. So I could figure out a way for users to save and recall their settings.
I could also add a feature where you can play along to a pre-recorded drum track or other audio file.
- Become more familiar with Web Audio API and Tone.js for sound synthesis and other audio capabilities.
- Create an interface that is responsive and can work from a mobile phone, tablet, or desktop, via both QWERTY keyboard, mouse, or touchscreen.
- Use CSS Flexible Boxes and Sass where appropriate.
- Extend interactivity to hardware with Gamepad & Web MIDI APIs
- Visualization?
APIs and Libraries I will definitely use are in bold.
Instead of public Web APIs I will utilize at least one of the following browser APIs:
- Web Audio API
- SVG
- Canvas
- Offline
- Geolocation
- WebGL
- jQuery 3.1.1
- Underscore
- Keypress or KeyboardJS for keyboard event handling
- Audio & MIDI
- Visuals:
- The drum machine from Class 1!
- Hebdomad uses home row keys for input
- Roland SH-201 Guide Book
- The Airhorner (Google Developers interview with Airhorner's creator)
- Noisehack: How to Build a Monotron Synth with the Web Audio API
- Transcendental Generative — discusses the twelve tone technique and transcendental numbers
- Keith McMillian's Making Music in the Browser tutorials
Though I don't see a use for these on this project, these APIs were on my short list when considering what to do: