Building a Cancellable Web Audio Tone Sequence (and the CSS Bug That Hid Nothing)

A recent update to a browser bass test introduced a feature that plays tones at frequencies of 150, 120, 100, 80, 63, 50, 40, 31.5, 25, and 20 Hz sequentially when the user presses a button. The test started as a simple concept but quickly became a valuable lesson in cancellation, clicks, and a CSS bug.

The initial approach to sequencing tones with async/await involved creating an oscillator for each step in a loop and waiting for the specified duration before moving on to the next step. However, this method had a major limitation - it did not account for user actions such as stopping, starting a new tone, or hiding the tab. As a result, the loop would continue playing tones even when the user requested otherwise.

To address this issue, the author turned to a simple counter-based cancellation pattern. Each time the stop function is called, the counter increments, invalidating any running sequences that do not match the current generation value. This approach allows for a single point of cancellation, making the code easier to manage and ensuring that all stopping methods adhere to the same cancellation logic.

The Stop button, starting another tone, the "I can't hear it" button, and the visibilitychange event all call the stop function, providing consistent behavior across different user interactions.

One key aspect of the solution was preventing clicks when starting or stopping sine waves. Abruptly turning a sine wave on or off produces an audible click, particularly noticeable at low frequencies on subwoofers. To avoid this issue, the author implemented gain ramps in and out of each tone, creating an exponential increase and decrease in the gain value over a specified duration. This technique smooths the transition between tones and eliminates the unwanted clicks that would otherwise be heard.