Notes

What’s New

A summary of the 2026 modernization pass of the Sonic site — what changed, why, and what to look for.

This site originated as a 1996 CD-ROM authored by Durand R. (“Randy”) Begault at NASA Ames (Academic Press Professional, Chestnut Hill, MA). Michael Cohen adopted the contents somewhat later, during his time at the University of Aizu, and has maintained the web version since — the 2026 refresh was carried out from his current home institution, Higashi Nippon International University. The 2026 pass modernizes the site for current browsers and devices, brings the visualizations into vector form, adds new interactive demonstrations using the Web Audio API, and refines vocabulary throughout. The audio examples and pedagogical structure of the original have been preserved.

Modernized figures

The 100 + illustrations from the original CD-ROM — small aliased GIFs with baked-in cream backgrounds — have been replaced with hand-authored SVG vector figures:

86 figures regenerated across every chapter as crisp, retina-sharp SVGs.
Consistent typography (Inter font), accent palette (teal, red, blue), and line conventions across the site.
Transparent backgrounds so each figure sits cleanly on both the light page background and a dark navy theme.
Where the original figure relied on real recorded audio (e.g., a violin pizzicato waveform, the spoken word “shut”, the zipper envelope) or on photographic equipment shots, the original is kept — redrawing those as synthetic curves would have lost their authenticity.

Interactive Web Audio demos

Wherever it added pedagogical value, prose explanations are now joined by live interactive demos rendered in the browser by the site’s audio engine. No plug-ins or external software required. A growing collection of demos — the headliners include:

Molecule-wave visualizer (Fig 1.10) — longitudinal pressure wave through a tube of air molecules. Each molecule is drawn as a small shaded sphere of constant size, so compression and rarefaction read as visible crowding and gaps rather than as varying dot density. Four tracked molecules are highlighted in yellow with a ±A range bar and a fading trail behind each, so the back-and-forth motion is visible even though the wavefront itself appears to propagate.
Tone Generator — choose a waveform (sine, square, saw, triangle), set frequency (20 Hz–20 kHz on a log slider) and gain. Dual-pane viz: time-domain waveform on top, log-frequency spectrum on the bottom. Push gain past 100 % to drive the signal through a hard-clipper and watch new harmonic partials appear in the spectrum.
Live Keyboard (Fig 1.14) — click, tap, or drag across a two-octave A₃–A₅ piano to hear sustained pure tones, with an adjacent scrolling log-frequency spectrogram that makes the octave-as-equal-interval relationship visually obvious.
Beating demo — superimpose two close-frequency sines and hear the beat frequency.
RMS & peak (Fig 2.1) — two stacked waveforms (full and half amplitude) with their RMS markers updated live to match the chosen waveform shape (1/√2 for sine, 1 for square, 1/√3 for sawtooth/triangle, and a duty-cycle-dependent value for the added pulse wave).
Equal-loudness contours (Fig 2.3) — draggable test-tone dot on the standard phon contour graph (20 Hz–20 kHz × 0–120 dB SPL). An age slider above 25 years adds a red presbycusis overlay (ISO 7029-style) shifted upward at high frequencies. Both the textbook contours and the age-shifted ones now share an ISO 226 model, so they coincide at low frequencies and diverge naturally only above ~1 kHz where age-related hearing loss applies.
Hard-clipping a periodic source (Fig 2.5) — pick a source waveform (sine, square, saw, triangle — each with a glyph icon) and feed it through a variable-drive hard-clipper. Drive starts at 1× (the unclipped baseline: source touches but doesn’t cross the ±1 clip lines) and climbs to 6× (heavy clipping). For a sine source, drive > 1 flattens the peaks and grows the classic odd-harmonic series (3^rd, 5^th, 7^th, … at 1/n amplitude). The oscilloscope view is trigger-synced (rising zero-crossing, sub-sample interpolation) so the waveform holds still instead of drifting. The spectrum pane samples only at harmonics of the fundamental, so a pure sine at drive = 1.0× reads as a single clean spike instead of a leakage-blurred smear.
Equalisation: 10-band graphic EQ (Chapter 3) — per-band ±12 dB sliders on standard ISO octave centers, with the resulting frequency response plotted live over the running spectrum. Source picker plus snap-to presets (flat, smile, telephone, bass-cut).
Harmonics builder — eight independent sliders for harmonic amplitudes, plus four overtone-series presets in increasing complexity: octave doubling (1·2), the medieval/rock power fifth (1·2·3), the just-intoned major triad (4·5·6), and the bluesy harmonic dominant 7^th (4·5·6·7).
Fourier Sandbox (Fig 3.5) — a deeper-dive companion to the Harmonics Builder, extending it from 8 amplitude-only partials to 16 harmonics plus a DC term, with toggleable polar (magnitude + phase) and rectangular (sin + cos) representations. Adds a Draw edit-mode in which the time-domain canvas accepts mouse / touch strokes and runs a discrete Fourier transform of the result back into the sliders; a row of waveform operators (time-reversal, full / half rectification, downsampling, quantizing, scaling, clipping, noise-mix) that round-trip through the sample buffer; per-harmonic mute / solo narrowcasting with keyboard shortcuts 0–9 (mute) and Shift+0–9 (solo); optional 1/n^k reference-envelope overlays on the spectrum panel (linear or log frequency, linear or log amplitude); and a synthesized-waveform equation readout whose terms are hover-linked back to their slider columns, so pointing at a term in the equation highlights that harmonic’s contribution across the time canvas and the spectrum bar simultaneously (and vice-versa).
Spherical Harmonics Explorer (Extras) — the three-dimensional generalization of the Polar Pattern Sandbox and a spatial cousin of the Fourier Sandbox. Real spherical-harmonic coefficients (ACN order, SN3D normalization) for first- and higher-order Ambisonics build a directivity “balloon,” with a rectangular↔polar (magnitude + azimuth-phase) toggle mirroring the Fourier Sandbox, a click-to-isolate basis grid whose per-level colors carry into the 3D view, and a draggable source whose tone tracks the pattern gain — loud in the lobes, silent in the nulls, polarity-inverted in the rear lobes.
Convolution Explorer (Extras) — the flip-and-slide picture of the operation underneath the whole effects rack: one signal is mirrored, slid by t, multiplied point-by-point against the other, and the shaded overlap area becomes a single sample of the output. Both sides are independently specifiable — eleven shapes (impulse, echo pair, rectangle, triangle, ramp, step, exponential decay, Gaussian, sine burst, tone burst, decaying room noise), each with its own width, rate, or position control — so any pairing can be assembled, with seven presets as shortcuts that fill both sides at once. Continuous and discrete views, a sweep that draws the output as the shift advances, and a swap that exchanges the two sides and leaves the output untouched: commutativity made visible.
Additive harmonic envelope — live spectrum view of a stack of harmonics with independent per-partial amplitude, decay, and pitch-bend; useful for hearing how the time-evolution of partials gives an instrument its “character.”
Noise Color Explorer — drag a single slope slider from violet (+6 dB/8^ve) through blue, white, pink, brown to extreme low-pass and hear smooth timbral transitions. Real-time time-domain waveform and log-frequency spectrum, with a theoretical attenuation line overlaid. Five conventional presets plus a Violet preset for symmetry past blue. The canvas pre-populates with a synthesized preview matching the current slope (with the time-domain trace colored by a one-pole IIR so brown looks smoother and violet finer-grained), so the figure conveys its idea even before Play is pressed.
Correlation vs coherence — Lissajous phase view (Fig 3.23) — the two-sine correlation/coherence demo gains an X-Y (Lissajous) panel plotting wave A against wave B. In phase it collapses to a diagonal line, at 90° it opens into a circle, at 180° it becomes the opposite diagonal — so the figure’s shape tracks the zero-lag correlation (a collapsed line at ±1, a full circle at 0), shown right beside the number. Adding noise to B frays the closed loop into a band: the visible face of falling coherence.
Phase & Group Velocity (Extras) — a fourth sense of “phase,” after position-within-a-cycle, relative phase between two signals, and spectral phase across frequency. Two sinusoids of nearly equal frequency add into a fast carrier under a slow envelope; a marked dot rides a crest at the phase velocity and a marker tracks the envelope peak at the group velocity. A single slider sets their ratio, with presets for the non-dispersive case, deep-water waves (v_g = ½ v_p, where crests are born at the back of a group and vanish at its front), anomalous dispersion, and a backward-travelling group. Group delay in a filter is the same phenomenon in signal-processing dress.
ADSR Live (Fig 3.14) — drag the four ADSR sliders or drag the envelope vertices directly on the canvas. A live playback-head sweeps the envelope when a note is fired; preset buttons offer pluck / pad / brass / staccato shapes.
FM & AM modulation (Figs 3.16 & 3.17) — two dedicated mini-demos. The carrier/modulator block diagrams update live as the sliders move or a preset is chosen. FM also offers a separate carrier-gain slider and a square-wave modulator option that produces the classic “two-tone (Hi-Lo)” siren effect. Each canvas pre-populates with a mathematically synthesized waveform matching the current carrier/modulator settings, so the AM envelope and FM frequency-deviation pattern are visible before Play is pressed. For a deeper-dive companion, see the new Sirens & FM bonus page.
Stereo polarity / channel crossing (end of chapter 3) — pick a waveform, then toggle between parallel wiring (both channels in phase) and crossed wiring (right channel inverted). An SVG schematic shows the wiring change with consumer-audio color coding (white = L hot, red = R hot, gray = ground / “black”) — four straight wires for parallel, an obvious X-cross on the right for crossed. With stereo speakers, the parallel signal locks to a stable center image; crossed cancels along the center line and gets thinner.
Polar Pattern Sandbox (Chapter 5, Figure 5.4) — live SVG polar plot of the standard limaçon family |(1−α) + α·cos θ|^sharpness. Drag α and sharpness sliders, or snap to seven named presets (Omni, Subcardioid, Cardioid, Supercardioid, Hypercardioid, 7⁄8:⅛, Figure-8). Sharpness > 1 narrows the main lobe toward shotgun behavior.
Live clipping & quantiser (Chapter 6) — user-selectable bit depth (1–24 bits, with optional dither) re-quantizes the source in real-time; the quantization-noise floor on the spectrum rises by the expected ~6 dB per bit dropped.
VU meter (Chapter 6) — vintage-style needle (300 ms ballistics) alongside a peak indicator, fed by a chosen audio source. The two disagree exactly the way they’re supposed to on transient vs sustained material.
3D spectrogram waterfall (Chapter 7, Figure 7.8) — real-time FFT in an isometric projection: newer frames at front, older ones receding along the z-axis. Source picker supports a prerecorded sample, the live microphone, an uploaded audio file, or an uploaded MIDI file rendered via a lazy-loaded browser-based synth.
Effects rack (Chapter 7) — a family of stand-alone processors driven by a shared source picker: compressor (threshold / ratio / attack / release with input/output meters), filter (low-pass, high-pass, band-pass, notch with cutoff & Q), digital delay (time, feedback, wet/dry), and reverb (small room / hall / cathedral via impulse-response convolution).
Pitch-curve glissando (Chapter 7) — draw a frequency-vs-time curve on a 2-D pad, then hear it played back through a tracking oscillator.
Binaural Spatializer (Chapter 9) — the browser’s built-in HRTF spatial processor. Drag the source dot around a top-down head, or use the dedicated azimuth and distance sliders. Source types: pink/white noise, broadband clicks or taps, and real speech and music samples. A three-state reverberation control (off / small room / hall) routes the spatialised signal through a synthesized impulse-response convolver — adding reverb noticeably improves externalisation. A continuous head-rotation slider rotates the listener’s head in a hall and shifts the apparent source direction accordingly — closing the gap that the original prose lamented as “beyond the technology of a static web page.”
Narrowcasting Sandbox (Fig 9.4) — the second author’s narrowcasting paradigm from Presence 9:1 (2000) made interactive. Four draggable sources (each with its own content menu — speech, Lorem Ipsum, Bach, Mozart, Pachelbel, Shy in full and as separated melody / drums / harmony stems — a gain slider, a polar radiation pattern, and a draggable nose for orientation) and three draggable sinks (each with sensitivity, reception pattern, and yaw). Per source: mute toggles and solo radio-button; per sink: deafen toggles and attend radio-button — shift-extends the radio sets. Each source is routed to its “winner” sink (loudest by source-radiation × sink-reception × sink-sensitivity / distance, with hysteresis to suppress chatter near iso-score boundaries) and rendered through the browser’s HRTF spatial processor in that sink’s local frame. Particles trace the active source→winner edges: one per scheduled note for the three Shy stems (so the rhythm is literally visible), and amplitude-modulated rate for the buffer sources. A single Head-track button uses the device camera to drive all three sinks’ yaw from the listener’s own head-yaw delta. Convolution-reverb room presets (Anechoic / Closet / Classroom / Concert hall / Bowling alley / Cave / Cathedral) sit on a shared master bus with a wet/dry slider. Full transport: rewind, play / pause, stop.
Shepard Walker — on the Shepard page, a polyphonic press-and-hold keyboard whose persistent “voice” balls move across the pitch-class wheel via voice-leading rather than dropping in from above; touch / multi-pointer-aware. A new auto-walk transport (Play / Stop, ascending / descending direction, 30–300 bpm tempo slider) drives the staircase through the chromatic or diatonic scale automatically — all the existing visualizations (ball arc-jumps, linear-keyboard highlights, radial-wedge highlights) follow along. A “Show stair markers” debug toggle overlays small dots at each step’s recorded center coordinate so any misalignment between the code’s notion of stair tops and the SVG art is immediately visible (handy on iPadOS Safari, where subpixel rounding can shift the ball off-center).
Risset glissando — the continuous-glide cousin of the Shepard staircase (Risset, 1969), with live controls for glide speed, spectral spread, and stacked-octave count, plus four named presets. Dual-pane visualization: pitch-class wheel on the left, log-frequency spectrum with bell-curve envelope on the right.
Diatonic ↔ chromatic keyboard morphing (Shepard page) — the linear and radial keyboards alongside the staircase share a single continuum slider with two endpoints and two detents: Diatonic (7 white keys, no blacks), Simple (piano-faithful 360°/7 white spacing with symmetric black notches), Subtle (12 wedges at chromatic 1/12 perimeter with white “feet” spreading into the adjacent black slots at the hub), and Chromatic (12 equal 30° wedges, no white/black hierarchy). Drag the slider to morph continuously between any two; press a preset button to animate smoothly to a detent. A spokes overlay marks the chromatic-1/12 hammer positions in any layout. Below the staircase, a spatial-rotation toggle routes the tone through an HRTF panner that orbits the listener — cycle direction (clockwise vs. counter-clockwise) tracks the ascending/descending toggle. Both keyboards also accept typed input: A S D F G H J play C–B and W E T Y U play the sharps.
Sirens & FM — a new bonus page arguing that a siren is just frequency modulation running slow. A signature log–log control plane puts modulation rate on one axis and deviation on the other, so lines of constant modulation index become 45° diagonals readable straight off the plot, and a dashed rule at f_m = 20 Hz marks the border between rhythm and timbre. Drag across it — or press Run the collapse — and a wail sweeps continuously up into a bell as the scrolling spectrogram’s zig-zag freezes into a static sideband comb. A live Bessel-function overlay predicts the sideband amplitudes (watch the carrier vanish near I ≈ 2.405), an optional Doppler pass-by scales the whole spectrum as the source crosses in front of the listener, and an optional in-browser face-control mode maps jaw / brow / lips to the three parameters. Presets 1–7; Space toggles audio.
Rhythm Playground (Extras) — a rhythm sandbox that draws a cycle as a necklace of onsets around a circle rather than as a line of boxes. Each ring is one synthesized drum voice with its own step count, rotation, level, and tuning; a ring either fills the cycle (so 3 against 4 is a true polyrhythm) or takes one grid unit per step (so a 7-step ring walks against a 16-unit bar and realigns only after several cycles), and a phase drift control slides one ring fractionally faster than the rest in the manner of Steve Reich’s tape pieces. Onsets carry velocity, firing probability, and micro-timing; rings can be generated as Euclidean patterns E(k,n), rotated, reversed, complemented, doubled, halved, or combined with another ring by union, intersection, symmetric difference, and difference. A live analysis panel reports the interval string, interval vector, evenness, off-beatness, syncopation, rhythmic oddity, whether the pattern is its Euclidean form, and which classic timeline it is nearest. Eighteen named rhythms — tresillo, cinquillo, the son and rumba claves, bossa nova, shiko, soukous, gahu, samba, fume-fume, bembé, Balkan aksak and ruchenitza among them — sit in a grid of one row per rhythm and one column per ring, so a cell both loads a rhythm into a ring and lights up to report which ring is currently holding it. A separate row of grooves loads whole kits — rock, rock & roll shuffle on a triplet grid, disco, funk, boom bap, reggae one-drop, a clave-based rock beat, swing ride, bossa nova, and Reich’s Clapping Music, whose two rings and one-step rotation perform the piece. With step angle → azimuth selected, each onset is rendered through the listener model at the compass bearing it occupies on the wheel, so the picture becomes the sound field. Tap recording, MIDI in and out, whole-kit share links, four pattern banks with chaining, and MIDI and WAV export round it out. Rings can be selected together with shift-click, so one slider move retunes several at once; the transport, the wheel, and the box notation share a single audio clock, and swing is shown — raising it slides the offbeat dots round the wheel and the offbeat cells along the grid. An optional camera head-track holds the rings still in the world while the head turns inside them. It extends The Rhythm Circle (Lascabettes, Guichaoua, & Andreatta, Proc. Int. Computer Music Conf. 2025), and leans on Godfried Toussaint’s The Geometry of Musical Rhythm for the measures.
Reflection animation & live echogram (Fig 7.17) — direct sound and four early reflections leave the source at once as color-coded particles travelling at constant pixel-per-second speed, so longer paths arrive at the listener later. Each arrival drops a corresponding impulse onto a synchronised live-drawing echogram beneath the diagram (amplitude scaled by 1/r, so longer reflections land quieter). After the last discrete reflection arrives, a diffuse late-reverberation tail (band-limited exponentially-decaying noise envelope) is composited in. Then the graph clears and the animation restarts. Full transport controls: Play, Pause, Stop, Restart, step-back, step-forward, plus a 0.1×–3× speed slider.

Where it made sense, the audio samples have been pulled into the figures they belong with rather than living as a separate button row beneath:

Fig 3.3 (guitar-string harmonics) — a column of six ▶ buttons is overlaid on the SVG, vertically aligned with each harmonic row. Click or tap the button next to a harmonic to hear it.
Fig 3.9 (sawtooth partial sums) — each of the six plots is itself a clickable region. Hovering a plot lights up its border in teal; clicking or tapping plays the corresponding partial-sum audio sample. The SVG’s own “Partial 1 / Partials 1–2 / …” labels remain visible as the panel headings.

Sandbox refinements

Late in the 2026 pass, the site’s interactive-demo container itself — the atomic wrapper hosting every sandbox across every chapter — was refined into a more intentional “numbered lab-station” treatment. Each demo now opens with a mono “FIG. X.Y” part-number connected by a hairline rule to the display-face sandbox name; control labels dropped their uppercase-tracked SaaS-settings styling in favour of sentence-case Inter with tabular-numeric readouts pushed to the right edge as a legend / tape pair; and a 12-column responsive grid replaced the previous flex-wrap layout, so paired sliders sit side-by-side on tablet and up and stack cleanly on phone portrait. Keyboard focus rings are now visible on every slider, touch-targets expand to 24 px on coarse pointers, and prefers-reduced-motion is respected. The Filter Playground is the reference implementation of the new pattern.

The same page’s Filter Playground also picked up two smaller touches: a camera-driven “mouth wah” that uses face-landmark tracking to map mouth openness to the filter’s cutoff frequency (200 Hz closed → 2 kHz wide open) — a rough talkbox emulation; and a live filter-response preview so the white response curve redraws immediately when cutoff, Q, or gain is adjusted, even before pressing Play.

Narrowcasting controls

Where a demo presents a composite signal — a stack of harmonics, a chord, a multi-instrument mix — the interface offers narrowcasting controls for articulated probing of the individual voices: a mute button to silence a chosen component, and a solo button to isolate it (silencing everything else). Examples include the per-partial sliders in the harmonics builder (chapter 3), the additive-envelope demo, and the effects-rack source picker (chapter 7). The terminology and the idea follow the second author’s own theoretical framework for selective attention in multi-source environments — see Cohen & Fernando, “Awareware,” cited on the authors page.

Audio sourcing & synthesis

The audio material driving the interactive demos comes from a mix of sources: prerecorded samples (carried forward from the original CD-ROM and supplemented with public-domain orchestral, vocal, and field recordings) and live Web Audio synthesis.

Where a demo needs more harmonic content than the original recorded sample naturally contains — this happens most in the additive-synthesis figures, when the user is invited to add or attenuate partials beyond the natural roll-off of a real instrument tone — the sampled audio is transparently extended with synthesized higher harmonics, locked to the source’s fundamental, so the higher partials remain musically continuous with the recorded body of the tone.
The music-clip picker (used by the spatializer, VU meter, spectrogram, effects rack, and elsewhere) draws from well-known composers across the classical & contemporary repertoire, and also features “Shy” by Michael Frishkopf (University of Alberta), included with the composer’s kind permission — an example of a non-canonical voice sitting comfortably alongside the standard listening references.

Microphone-pattern playground

The Polar Pattern Sandbox (Fig. 5.4) replaces the original CD-ROM’s static omni / cardioid / bi-directional thumbnails with a single live family of patterns parameterised by the standard limaçon coefficient:

Limaçon-coefficient crossfader. The slider for α in gain(θ) = |(1−α) + α·cos θ|ⁿ morphs continuously across the whole first-order family — α = 0 is omni, 0.5 cardioid, 0.625 supercardioid, 0.75 hypercardioid, 1.0 bi-directional (figure-8). Click or tap a preset name to snap; drag the slider to interpolate.
Order slider. Raising n beyond 1 narrows the main lobe and approximates a higher-order or shotgun / interference-tube response — the conceptual stacking that turns a single first-order capsule into a directional shotgun.
Directivity-index (DI) readout. Live dB number under each polar plot, reporting the ratio of on-axis to spherical-average sensitivity. The number updates as α or n is swept, so the geometry of the lobe and the formal DI are visible side-by-side.

Spatial sound & narrowcasting interface

The Narrowcasting Sandbox (Fig. 9.4) implements the multi-source / multi-sink generalisation of the second author’s “Exclude and Include for Audio Sources and Sinks” (Presence 9:1, 2000). The 2026 interface stacks several orthogonal control surfaces on the same scene:

Three view modes. Allocentric god’s-eye 2-D map; meta-egocentric where every sink slides to the center of the stage and the sources orbit around the resulting composite sink (preserves world-frame distances and angles for the active sources, snaps inactive ones into their would-be slots); 3-D egocentric first-person from any selected sink.
Live head-tracking. An in-browser head-tracking model pulls the user’s real head yaw delta from the webcam and applies it to every sink in lockstep — physical head turns drive every avatar at once. Camera-captured imagery is neither saved nor transmitted.
Multipresence + autofocus. A single human listener can be represented by multiple sinks at once (“sonic cubism”). Each source picks the sink it routes to by maximum audibility (= source gain × source radiation × sink reception × sink sensitivity / distance, with a small hysteresis margin to suppress chatter at iso-audibility boundaries).
Per-icon directivity. Every source has a radiation pattern (how it emits) and every sink has a reception pattern (how it picks up), drawn live as polar lobes that rotate with the icon. Both use the same limaçon family as the Fig. 5.4 mic playground; the icon’s tooltip reports its directivity index.
Traffic-signal narrowcasting state. Each channel label is color-tinted by its current state: green active, red suppressed/ignored, amber isolated (soloed), teal focused (attended), blue trumped (collateral-silenced by another’s solo/attend), magenta conflict. Touch-friendly: press and hold substitutes for shift-click on touch devices so the mute/solo and deafen/attend buttons can be made additive (multi-select) without a physical keyboard.

Shepard-tone playground

The Shepard Tones page grew in the 2026 pass into a multi-surface keyboard playground in which every control — the layout slider, the “1.5-D” triangular widget, the preset buttons, the linear keyboard, the radial keyboard, on-screen GUI handles, and computer-keyboard shortcuts (including triad-chord shortcuts like a d g, s f h, d g j, …) — stays in real-time lockstep, simultaneously rendering the Penrose-staircase walker with its bouncing-ball discretisation, every virtual keyboard surface, the synthesized Shepard-tone auditory display, and the live log-frequency spectrogram overlay:

Three input/output surfaces driven by one model. A 12-step Penrose staircase with persistent voice-leading balls, a piano-shaped linear keyboard, and a 12-wedge radial compass keyboard. Click or tap a step, a key, or a wedge — or type a note — and all three light up together.
Continuous 5–7–12 keyboard morphing. A 1-D slider with seven detents (Major Pent, Yo Pent, Pure Diatonic, Simple Piano, Subtle Piano, Chromatic, Black Pent) smoothly morphs both keyboards between any pair of layouts.
A “1.5-D” triangular interface. Sitting next to the 1-D slider, a triangle widget with three vertices labelled by cardinality — 5-key Pent, 7-key Diatonic, 12-key Piano — lets the user drag a control point inside the triangle for 2-D blends instead of along a single line. The interior is divided into three color-coded zones so the closest preset is visible at a glance; slider and triangle stay synced.
Live log-frequency spectrogram overlay. An opt-in scrolling spectrogram with log-Hz y-axis can be enabled for both the staircase walker and the Risset glissando — the visual proof of the Shepard / Risset illusion is that the spectral content stays anchored at fixed octave-spaced frequencies while the perceived pitch glides unboundedly.
Computer-keyboard chord shortcuts. Computer-keyboard rows map to the chromatic pitch classes (a=C, s=D, d=E, f=F, g=G, h=A, j=B, with w e t y u for the sharps). Holding three keys at once plays a triad — a d g for the I triad in C major, s f h for ii, d g j for iii, and so on up the diatonic scale — with chord-aware voice-leading on the staircase that keeps the same balls travelling between successive chords instead of spawning new ones.
Mobile gyroscopic Risset control. On any smartphone with a motion sensor, a “Tilt control” toggle on the Risset glissando demo (Fig. ∞.2) uses the browser’s DeviceOrientation API to steer the bipolar glide-rate slider directly from phone tilt: tilt left for descending, level for paused, tilt right for ascending, with ±45° spanning the full ±5× range.

Binaural-only bonus demos

Two new headphone-required demos added to the 2026 pass that demonstrate central binaural processing — effects that exist only at the brain’s cross-correlation stage, not at either eardrum:

ASMR Sound Walk — the same HRTF panning that powers the spatializer above also produces the close-mic’d, “beside the ear” intimacy that defines most ASMR content. Four synthesized sound types (soft taps, whispers, soft chimes, crinkles) route through the browser’s HRTF processor and animate along a slow orbit, random scatter, or ear-to-ear hover path around the listener. All sounds generated live; no recordings.

Glossary

The 200 + key terms that appear in red throughout the chapters are now collected on a dedicated glossary page, organized alphabetically with letter-jump navigation. Each entry links back to the chapter where the term is first introduced and defined in context.

Recommended relevantly related resources

A new curated resources page gathers outside sites that complement Sonic’s chapters, organized by category:

Studying sound — Karen Collins’ studyingsound.org research hub for the academic study of sound, listening, and audio culture.
PhET Interactive Simulations (CU Boulder) — six HTML5 sims: Sound Waves, Waves Intro, Wave Interference, Wave on a String, Magnets & Electromagnets, and Faraday’s Electromagnetic Lab (the last two underpin the transducer physics of chapter 5).
Paul Falstad’s applets — twelve interactive demos: Fourier series, Ripple Tank, Vibrating Membrane, Coupled Oscillators, Sound Interference, Loaded String, Digital Filter, 1-D Wave Box, 2-D Wave Equation, Mode Box, Bar Waves, and Vowel Synthesizer.
HyperPhysics (Carl Rod Nave, Georgia State) — the Sound & Hearing concept map.
Musical & physical acoustics — UNSW Music Acoustics (Joe Wolfe), UNSW Physics Animations, Dan Russell’s Acoustics & Vibration Animations (Penn State), and Eric J. Heller’s Why You Hear What You Hear.
Free audio tools — Audacity, Pure Data (Pd), Audiotool (browser-based DAW), and SoundHack (Tom Erbe).

Audio Self-Test

The new Audio Self-Test page runs an end-to-end loopback diagnostic: it synthesizes a 1 kHz tone, simultaneously opens the microphone input, and reads peak frequencies on both. Three independent verdicts:

PRODUCTION — the generated-signal analyzer confirms Web Audio is creating and routing the tone (rules out audio-context blocking, silent-ringer switch, etc.).
CONSUMPTION — the microphone analyzer confirms the browser is reading capture data (rules out mic permission denial or missing input device).
LOOP CLOSURE — the mic-detected peak matches the generated peak within ±30 Hz, proving the full speaker → ear-equivalent → mic round trip works on this device.

A failure-symptom interpretation table on the page maps common failure modes (silent ringer switch, mic permission, Bluetooth codec aliasing, …) to recommended remediation. Useful before debugging any specific demo — rule out the device, then look at the page.

Site-wide search (Pagefind)

A full-text search index is now built at deploy time using Pagefind and shipped as _pagefind/ alongside the rest of the site. A search trigger in the sidebar header opens a modal hosting Pagefind’s UI; results are heading-aware, with snippets and deep-links straight to the matching #id. Keyboard shortcuts: Ctrl ⌃/⌘-K from anywhere, or / when no input is focused. A ?search=<query> URL parameter auto-opens the modal with a prefilled query, so search-result links are shareable.

A companion site on Gaussian splats

The Radiance (splat) corner of the Spherical Harmonics Explorer grew large enough to deserve its own address. The Gaussian Splat Explorer reads the same basis as computer graphics does: a working 3D Gaussian Splatting renderer taken apart, with the projection, depth sorting, and front-to-back compositing shown as they happen. It adds a capture-and-fit section that compares a reference image against a rendered one with the error measured, a photosphere upload, and import of trained scenes and point clouds of one's own. The two sites share the same real spherical harmonics in the same ordering; only the reading changes, from gain over direction to color over direction.

Vocabulary & typography refinements

A careful pass through Chapters 2, 3, 4, and 7 distinguishes terminology more rigorously:

Amplitude / gain / scale in the linear domain; intensity / power / energy in the quadratic (dB) domain — previously the two were used interchangeably in places where the distinction matters pedagogically.
Chapter 2: “the entire intensity range of sounds” (was just “the entire range”) to keep the intensity vs. frequency-range distinction explicit; ambiguous arrow labels on the loudness-comparison rows replaced with plain “loudest (here)…(here) quietest” bookends.
Chapter 4: “efx” → SFX throughout (the industry-standard abbreviation for sound effects).
Chapter 1: the period in the f = 1/τ formula is now written with Greek τ (tau) instead of t, to disambiguate it from the time variable t already used elsewhere in the same passage (e.g. t₀ – t₄).
Fig 3.3 (guitar harmonics): audio buttons relabelled with their harmonic number alongside the string fraction, and a sample for the 6^th harmonic added so the audio set matches the six harmonic modes drawn in the figure.
Ordinal suffixes such as 1^st, 2^nd, 5^th render as proper typographic superscripts throughout (including inside CSS-uppercased control labels).
Octave abbreviated as 8^ve in figures and demo controls (the standard musicological convention).
Greek letters like α in control labels keep their lowercase form despite the surrounding uppercase styling.
Units like Hz, dB, ms preserve their canonical mixed case even when nested in uppercased labels.
Series notation uses two-dot ranges (e.g., n = 1..k) rather than three-dot ellipses, per mathematical convention.
Interaction-verb vocabulary (used throughout the site). The site’s default verb for any pointer-equivalent UI activation is click or tap. The others are reserved for distinct physical or contextual gestures:
- click or tap — physical actuation of a mouse button or trackpad (or keyboard Enter / Space on a focused control). Selecting, opening, drag-and-drop’s starting press — all “click or tap.”
- tap — a light, silent finger touch on a touch screen or a tap-to-click trackpad. Often functionally equivalent to click or tap, but referenced explicitly when the touch context matters.
- press — for keyboard keys (e.g., “press Shift ⇧+4”). Also: Force Click or tap on a Force Touch trackpad is a deeper second press, but the site doesn’t use Force Click or tap anywhere.
- hold / press and hold — sustained contact, on touch, trackpad, mouse button, or keyboard key (e.g., holding a Shepard-keyboard key to sustain the note indefinitely).
- drag — pointer-down + move + release (sliders, position dots, glissando).
- hover — cursor over an element without actuation (reveals a tooltip).
- type — keyboard text entry.
- scroll — scroll-wheel or two-finger swipe.
“Push” and “hit” are avoided; they connote sustained or violent interaction.
Typographic quotation marks throughout — straight ASCII "" and '' in body text have been converted to proper curly “” and apostrophes ’ via an HTML-aware pass that leaves tag attributes, scripts, styles, and code blocks untouched.
Volume-control row (Chapter 2) — the OS-style 0–7 volume buttons are now in increasing order starting at 0 (mute) on the left, matching the “0–7” range described in the surrounding text. Clicking or tapping 0 stops any currently-playing sample. The dB-step row beneath uses a fixed-column compact grid so all seven buttons sit on a single line, with the “loudest…quietest” bookends correctly aligned to the first and last buttons.

Technical improvements

The waveform visualization in the audio engine had a Y-axis inversion bug: positive samples were drawn at the bottom of the canvas. As a result, the “sawtooth” in the tone generator appeared as a reverse sawtooth. Fixed.
Web Audio on iOS Safari requires a one-shot silent-buffer playback inside a user gesture to fully unlock; without it, oscillator-based synthesis demos produced no sound on iPhone/iPad even though sample playback worked. Now unlocked automatically on first interaction.
The intensity-comparison demo’s axis labels (“loudest → quietest”) stacked vertically due to a CSS grid bug. Fixed.
The 3D Spatializer’s schematic head had its “nose” rendered as an inverted wedge with the point at the base of the head — reading more like a hat-brim than a nose. Now properly tip-up with the base flush against the head.
Source- and reverb-picker buttons in the 3D demos used custom classes (.spat-source-btn, .spat-reverb-btn) that inherited no CSS, so the selected state was invisible. The shared .waveform-btn.active rules now apply to all three.
Listener orientation is now explicitly reset between demos so the head-rotation demo in Chapter 9 cannot leave the spatializer pointing in a stale direction.
All HTML files now reference the JS and CSS with a versioned query string (?v=N), so any future update bumps the cache automatically without users needing to hard-refresh.
327 original audio examples were converted from AIFF (legacy Apple format) to MP3 for universal browser playback. The remaining stale .aif references in chapter HTML were tidied up.
The site is now fully responsive, with mobile navigation and a dark-mode-friendly visual palette.
Transport-control glyphs — every demo’s Play/Stop button now leads with a small ▶ / ■ icon, toggled in lockstep with the underlying state, so the role of the control is recognizable at a glance.
Fig 2.5’s spectrum analyzer was tapped downstream of the listening-level attenuator, so the displayed waveform could only ever fill ~35 % of the canvas and the trace appeared unsynced. The analyzer is now tapped directly at the clipper output (full ±1 range), with the listening gain applied only on the audio path to the speakers.
Optimised bundle delivery — JavaScript and CSS are optimised before upload so the served bundle is roughly half the size of the working sources.
Cache-buster query strings on interactive-demos.js are now normalized to a single version across all HTML pages on every deploy, so updates ship without stale-cache surprises.
The mention of the Twhirleds mobile app on the About the Authors page now links to its project home page in addition to the Google Play and App Store listings.
Hardened release process — multiple layered automated checks before and after each release: source-level validation, an integrity sanity check on each bundle, a server-side backup taken before any new bytes ship, file-permission belt-and-suspenders, post-release HTTP smoke tests across the site’s critical URLs, and automatic cleanup of old backups.
Site-wide search — full-text search index built at deploy time by Pagefind, indexed only inside data-pagefind-body (i.e. <main>) so sidebar boilerplate doesn’t dominate results.

Reflection Explorer (Figure 7.18)

The old Figure 7.17 animated five hand-drawn reflection paths between a fixed source and a fixed listener. It is now a working image-source model: the room is mirrored about its walls, every reflection becomes a straight line from a mirrored copy of the source, and the in-room path is recovered by folding that line back at each wall it crosses.

Drag the source (+) and the sink (−) anywhere in the room; the paths, the echogram, and every reading follow.
Reflection order 0–4 — 1, 5, 13, 25, or 41 paths in two dimensions.
Side, top-down, and 3D views. The 3D view mirrors all six surfaces rather than four, so ceiling and floor bounces join in: order 2 rises from 13 paths to 25, order 3 from 25 to 63. Height sliders move each endpoint vertically; dragging moves it across the floor.
Surface absorption and air absorption as separate controls, since one acts per bounce and the other per metre travelled. Both dim and thin the rays as they shorten the echogram spikes, because the picture and the plot share one attenuation law. At α = 1 nothing returns and only the direct sound survives.
Two ears. The sink becomes a head with a nose showing its facing; each ear gets its own echogram, drawn away from a shared center line, and every path launches two impulses that leave together and arrive apart. A head-size slider runs from 2 cm to 2 m, which exaggerates the interaural time and level differences until they are impossible to miss.
Helmholtz reciprocity. A Swap button exchanges the endpoints; the rays redraw reversed and the echogram does not move. The claim is checked by a test, not merely asserted.
The echogram now names both intervals it shows: the propagation delay from emission to the direct sound, and the pre-delay from there to the first reflection.

Rhythm Playground

A bonus page built around the rhythm wheel: concentric rings of steps read as one cycle, with the mathematics of the classic timelines exposed alongside.

A score pane writes whatever is playing as drum notation — each voice on its customary line or space, cymbals and metals with a × notehead and drums with a •, accents marked >, ghost strokes in parentheses, and a playhead in step with the wheel. Swing is stated above the staff the way a score states it, and only where the notation is literally true.
Timelines arrange a kit rather than cloning one line onto every ring: the line itself on the bell voice, the kick on the strong beats it lands on, a backbeat snare, and the pulse on the hat. Rings are added or retasked when the parts require it.
Clapping Music loads as two clapping parts, panned apart, the second shifting one step every twelve repeats — the interval Reich’s score specifies. All eleven twelve-beat patterns that satisfy his constraints are offered, derived in the page rather than transcribed.
Clap along silences one ring and scores your own claps against the onsets they should have landed on, timed on the audio clock.
Ghost, normal, and accent now read the same way in both displays, and take the same gestures.

What stayed the same

The chapter structure, pedagogical sequence, prose voice, original audio examples, and the underlying scientific content are all preserved. Where prose was edited, edits are confined to disambiguating overlapping terminology — not to rewriting the substance. The intent has been to make this longstanding educational resource render and behave well on current devices, not to redirect its content.