Play Them Off, Keyboard App: Building a virtual piano in JavaScript
summary
A browser-based virtual piano uses the Web Audio API with createPeriodicWave and multiple oscillators to play chords, scales and sustain; frequencies come from a calculation anchored to A4 = 440 Hz and semitone steps, arrays generate octaves and scale intervals, playback staggers notes with half-second timeouts, UI is a React port of piano‑svg with per‑key event handlers, accessibility adds role=button and manual tabindex ordering, audio quirks include using a promise to wait for oscillator initialization because oscillators sometimes fail to stop, and the waveform is a piano-like periodic wave lifted from Chrome Labs.
AI-written summary · about
chapters (18)
- 0:00Start
- 2:56Sound waves and frequency
- 5:40Octaves and pitch
- 8:47What can the API do?
- 9:32What do we need to build?
- 9:55Setting up the Audio Context
- 10:25Creating a waveform
- 11:32Creating an oscillator
- 12:18Calculating the frequency
- 13:15Intervals
- 14:48Example: finding the frequency
- 15:30Building the piano
- 16:37Playing the notes
- 18:10Generating a scale
- 19:23Playing the scale
- 20:00Teething problems
- 22:23Let's play!
- 23:17Learn more about Web Audio
related talks
44mBeats in the Browser - Coding Music with JavaScript
14mMusical Creativity in the Browser
40mBeats in the Browser - Coding Music with JavaScript
30mBuilding a musical instrument with the Web Audio API
37mThe Web Audio Explanation I Wish I Had
40mLiveJS: Making Music with JavaScript
30mSteve Kinney - SeattleJS Conference 2017
24mBuilding a Music Learning Game with Elm, Web MIDI, and SVG Animation