Sound Page
Interactive “Frequency & Sound” visualization. Standalone HTML page — not an Astro component.
Architecture
Single file: index.html containing all HTML, CSS, and JS inline. No build step, no external dependencies.
Key Systems
- Web Audio API: Sine wave oscillator with gain control. Audio initializes on first user interaction (browser autoplay policy). Frequency range: 0.5–2000 Hz on a logarithmic slider scale.
- Canvas rendering:
requestAnimationFrame loop drawing a spring-mass oscillator + trailing waveform. Color-coded by frequency range (blue → green → yellow → red).
- Musical note mapping: A4 = 440 Hz reference. Converts frequency ↔ note name/octave/cents. Note ruler below slider shows all notes C1–B6 as clickable ticks.
Frequency Ranges
| Range | Hz | Color | Label |
|---|
| Infrasound | < 20 | Blue #5588cc | INFRASOUND |
| Low | 20–250 | Green #55cc55 | LOW FREQUENCY |
| Mid | 250–800 | Yellow #cccc55 | MID FREQUENCY |
| High | 800+ | Red #cc5555 | HIGH FREQUENCY |
Important Details
- Slider maps 0–1000 → 0.5–2000 Hz logarithmically (
sliderToFreq / freqToSliderVal)
- Audio gain fades in between 20–30 Hz to avoid abrupt onset
- Below 16.35 Hz (C0), note display shows “below musical range”
- Canvas uses
devicePixelRatio scaling for sharp rendering
- Motion blur ellipse kicks in above 8 Hz