Traditional web-based music apps rely on pre-recorded audio sample files (MP3s or WAVs). However, audio sample libraries consume dozens of megabytes, require high network bandwidth, and sound static when played repeatedly.
GuitarPractice solves this by using the Karplus-Strong physical modeling algorithm implemented natively in JavaScript via the HTML5 Web Audio API.
1. Algorithmic Overview
Invented by Kevin Karplus and Alex Strong in 1981, the algorithm simulates the physical behavior of a plucked string through digital signal processing (DSP):
- Initial Pluck Noise Burst: A short burst of white noise (random values between -1.0 and +1.0) fills a delay line ring buffer of length \(L\).
- Delay Line Ring Buffer: The buffer length \(L\) corresponds to the fundamental pitch frequency \(f\):
L = \frac{SampleRate}{Frequency} = \frac{44100}{f}
- Feedback Averaging Filter: As values circulate through the ring buffer, each sample is averaged with its predecessor:
y[n] = 0.5 \times (x[n] + x[n-1]) \times \text{decay}
- Natural High-Frequency Loss: The simple two-point moving average filter acts as a physical low-pass filter, dampening high harmonics faster than fundamental frequencies—exactly like a real metal acoustic string!
2. Equal-Tempered Pitch Tuning Math
Guitar string pitches (MIDI notes 40 to 64) are calculated dynamically using the equal-tempered pitch frequency formula:
const sampleRate = 44100;
function getFrequency(midiNote) {
return 440 * Math.pow(2, (midiNote - 69) / 12);
}
// E2 (Lowest Guitar String, MIDI 40) => 82.41 Hz
// L = 44100 / 82.41 = 535 samples
3. Performance Benefits for Web Applications
- Sub-2ms Latency: Zero network delay or audio decoding overhead.
- Ultra-Lightweight Footprint: Entire audio synthesis engine is under 15KB of code.
- Dynamic Timbre Variation: Pluck velocity and filter parameters adjust dynamically per note.