Resonant Steps

Resonant Steps makes periodic motion audible. A repeating sequence creates its tones inside the browser with Web Audio sine oscillators. The canvas provides a visual companion, so sound has a visible state rather than starting invisibly in the background.

Controls

• Start sound: create and resume the audio context through a deliberate gesture, then begin at the first of eight steps. Loading the page does not start sound. While playing, the button reads “Sound is playing”.
• Tempo: 40–180 beats per minute, in steps of 1; initial value 96. One tone begins per beat, with an interval of 60 / tempo seconds.
• Mute: silence the output while the sequence continues. The button becomes Unmute; activating it restores sound without restarting the sequence.
• Stop: end the sequence, stop and disconnect its voices, close the audio context and clear the active-step display. Starting again begins at the first step.
• Audio and Output: the state reads Sound off, Starting sound, Playing or Muted as appropriate. The Output meter shows normalized signal level and returns to zero when muted or stopped.

Tab to the buttons and tempo slider. Buttons use the browser’s standard Enter or Space activation; the slider uses the arrow keys. Mouse, pen and touch can operate the same native controls. Start with a comfortable device volume before enabling sound.

The canvas is display-only: it is not a step editor or a keyboard instrument. The eight pitches are generated by the fixed sine-derived pattern below; tempo and transport are the player controls.

Try this

1. Observe the stopped state before starting. There should be no need to silence an autoplaying soundtrack.
2. Activate Start sound. Compare the visible sequence with the tones.
3. Change tempo and listen for the changed spacing between events.
4. Use Mute, then restore sound. Finally use Stop to finish the session.

flowchart LR
  U[Start gesture] --> A[Audio context]
  T[Tempo] --> S[Sequence clock]
  A --> S
  S --> O[Sine oscillators]
  O --> G[Output gain]
  M[Mute] --> G
  G --> L[Level and output]
  X[Stop] --> S

Generated sound

The basic tone is sample(t) = amplitude × sin(2π × frequency × t). Web Audio supplies the oscillator; changing frequency changes pitch. A gain envelope shapes each event rather than playing a recorded sample. Tempo governs when events occur, not the frequency of the individual waveform.

For step index i from 0 to 7, the pitch is 164.81 × 2^(n / 12) hertz, where n = round(7 + 5 × sin(2πi / 8) + 2 × sin(2πi / 3)). The sine-derived semitone offsets give the repeating pattern its contour.

Each tone has an 18-millisecond attack and a decaying gain envelope. Its envelope duration is the smaller of 0.7 seconds and 78% of a beat. The canvas connects the eight note positions with a sine-eased curve and highlights the current step.

There are no audio files, sample downloads or microphone inputs involved in synthesis. The visible forms are generated drawing geometry, not a video synchronized to a soundtrack. technique explains the shared zero-asset boundary.

Browser and audio limitations

The browser must provide a working Web Audio context and allow it to resume after your gesture. If audio cannot start, the visual toys remain independent of it. Check the visible audio state rather than assuming a pressed button guarantees sound.

The Output meter samples a post-master-gain analyser roughly every 30 milliseconds. It computes root-mean-square signal amplitude, multiplies it by 8 for display and clamps the result to 0–1. This is neither a calibrated loudness meter nor proof that a speaker is connected. Browser-tab mute, system volume and output routing remain outside the toy’s control.

Hiding the page stops audio rather than leaving it running in another tab. Returning does not restart it: choose Start sound again. A browser interruption of the audio context also stops the sequence. This is a playful sequencer, not a precision performance clock or recording system.

Reduced motion disables autonomous visual animation but does not prevent explicit audio playback. Beat events can still update the display. Use Mute or Stop when you want silence; reduced motion is not an audio preference.

Return to the playground guide, explore the silent glyph-loom, or read technique for the mathematical vocabulary.