Manipulating Audio Waveforms with Web Audio: A JavaScript Introduction to Comparing Frequencies Silently

About this article
This article was created using an automated generation workflow powered by generative AI.
After reviewing the official documentation of the Web Audio API, we created a JavaScript learning resource that allows users to observe waveforms without producing sound. P1 to P5 are self-reviews within the same ChatGPT instance and are not independent AI evaluations.

Verification Status: 📘 Official specification verified / JavaScript syntax and frequency boundary 4-condition PASS / Actual browser, public Pages, and WordPress rendering unverified
Verified on October 31, 2026. Actual device audio playback, actual waveform rendering, mobile, print/PDF, and WordPress blue borders have not been confirmed.

If you change the frequency from 220 Hz to 440 Hz, how does the interval between the wave crests change?This learning material allows you to observe only the waveforms on the screen without producing sound. The objective is to understand how the period changes within the same time window, without confusing waveform changes with pitch.

First step: Observe the waveform in silence.

🔷 Interactive material (published, but browser execution not verified).
Open Web Audio Waveform Lab.
Daily Code README and completed source code (stored on GitHub).

1. On the page,click "Start (Muted Initially)".Audio output is disabled by default.

2. the frequencyslider from220 Hz to 440 HzMove.

3. Compare the peak-to-peak intervalof the blue wavewith the "440 Hz" display. After observation,click "Stop".Press.

Operation on real browsers has not been verified yet. The following results are predicted based on source code calculations and API specifications.

Look here after operation

Even if the frequency value doubles, the wave height (amplitude) does not double. The key aspects to observe on the screen are the number and interval of the peaks. Because the Canvas renders a fixed number of time-domain samples across the same width, higher frequencies result in shorter periods lined up. However, the displayed number of peaks also depends on the sampling frequency and device state. If "Reduce Motion" is enabled in your OS or browser, the design stops automatic rendering, so"Draw waveform once"to update. If it appears flat immediately after starting, wait a moment and redraw.

Why the waveform is visible even when the sound is muted

JavaScript handling audio contains components that generate sound and components that analyze sound.OscillatorNodegenerates a sine wave, andThe AnalyserNoderetrieves its waveform.The GainNodeadjusts the volume. In this tutorial, analysis is performed first and then the volume is set to 0, so the configuration observes the signal without sending sound to the ears.

flowchart LR
    A["周波数スライダー"] --> B["OscillatorNode"]
    B --> C["AnalyserNode"]
    C --> D["Canvasに波形描画"]
    C --> E["GainNode: 初期音量0"]
    E --> F["スピーカー"]

The "speaker" in the diagram represents the audio output path. Since the initial GainNode volume is 0, it is intentionally silent even though the path exists. There is no processing to capture sound from a microphone, nor does it read external music files.

To extract the waveform, we usegetByteTimeDomainData(). This method copies changes in sound over time as an array of numbers from 0 to 255 intoUint8Array. Values around 128 correspond to the center line, which is converted to the Canvas vertical coordinates to connect the lines. This displays thewaveform, which differs from thespectrumthat shows the volume for each frequency.

Core of the code: analyzing and rendering

The completed version also includes audio connection, stop processing, and accessibility support. Only the essential parts are shown here.

const samples = new Uint8Array(analyser.fftSize);
analyser.getByteTimeDomainData(samples);
const y = samples[i] / 255 * canvas.height;

samplesserves as a container that receives the waveform as numerical values. Each point is converted to the vertical position on the Canvas, and lines are drawn. The actual finished version updates the display usingrequestAnimationFrame, cancels the animation when stopped, and terminates the process usingAudioContext.close().

Why a start button is neededis also important. Browsers may restrict audio from playing automatically just by opening a page. Therefore, the creation ofAudioContextandresume()is structured so that it starts with the user's click. Because it can be observed while initially muted, audio playback is not a mandatory condition for learning.

Change one element and compare

After comparing 220 Hz and 440 Hz, next set it to660 Hz. Change only the frequency and leave the mute setting as it is.

At this point, it is important not to misunderstand that "high frequency = loud sound." Frequency is primarily related to pitch, and volume is a separate factor. After the experiment, press "Stop" and verify that the screen returns to a flat line.

Caution regarding volume
Mute is enabled by default. Unchecking it is designed to output a low-volume sound, but perception varies depending on device volume, earphones, and the surrounding environment. It cannot be used for hearing tests or for guaranteeing safe sound pressure levels. If you experience ear discomfort, stop immediately.

Troubleshooting

If the OS or browser hasreduced motion settings enabledautomatic animations are stopped, and a button is provided to draw the waveform just once. If color alone makes it hard to distinguish, please also check the text display of frequencies. Standard buttons and sliders operable via keyboard are used, but actual device testing with assistive technologies has not been performed.

If GitHub Pages does not open, deployment preparation or publication propagation may not be complete yet. Check the GitHub README anddocs/demos/audio-waveform-lab/source code, then proceed to run it safely on your own PC. The existence of a public URL and actual functionality are separate validation items.

Running on your own PC

The final version consists of two files: HTML and JavaScript. Place theindex.htmlandapp.jsfound in the README into the same folder and open them in your browser. If local file restrictions apply, serve them from a trusted local HTTP server. There is no need to output audio. There is no need to grant the browser permission for microphone, camera, or location data.

For work and study

In programming classes,You can observe the data flow of: numeric input -> signal generation -> analysis -> screen display.In foundational acoustics learning, it can be used as an introduction to explain the relationship between period and frequency. In business applications, you can also apply only the Canvas update mechanism without handling audio input.

On the other hand,it cannot be used for sound pressure measurement, hearing diagnosis, or noise regulation determination.This is because the waveform in this case is a sine wave generated within the browser and does not measure the sound of actual rooms or equipment. Visual movement and accuracy as a measuring instrument are two different things.

Additional Experiment: Verify why analysis is possible even in silence

Waveform display is not the same as "hearing sound from speakers." In Web Audio, the processes of waveform generation, analysis to extract numerical values, and determining the final volume are treated separately. There are configurations where, even with the volume set to 0 on the screen, the signal can be observed as numerical values as long as it reaches the analyzer. Check which nodes are connected where, and do not assume that the oscillator has stopped just because no sound is heard.

Lowering the frequency is expected to result in fewer wave crests visible within the same observation time. However, changing the rendering width or the number of samples used for display also changes how the crests appear. Comparing only the frequency differs from comparing the horizontal display scale. It is easier to troubleshoot by first checking if the display is updating, and then checking if the set frequency is reflected on the screen.

The height of the waveform is not necessarily the same as the actual volume. If the rendering process scales the signal values to fit the screen width or height, the line can be displayed larger without changing the volume. It is important to decide whether the observation target is the amplitude or the wave period before operating. When comparing different frequencies, fix the display magnification and verify that the scale has not changed.

Depending on the browser, the start of audio processing is restricted to user interaction. If it does not run immediately upon opening but runs after pressing a button, check the state of the AudioContext before jumping to conclusions about permission requirements. It is also important whether the stop button stopped only the rendering or the sound source as well. To ensure that unnecessary oscillators and rendering loops do not remain after termination, investigate the stop and resume processes separately.

Official Documentation

• MDN: AnalyserNode.getByteTimeDomainData()(Verified October 31, 2026)

• MDN: Web Audio API Best practices(Verified October 31, 2026)

• MDN: Using the Web Audio API(Verified October 31, 2026)

• MDN: Autoplay Guide(Verified November 1, 2026, regarding startup after user interaction)

GitHub Sample

• Daily-Code-Samples: Web Audio Waveform Lab (README and Final Version)

• Live Demo (Deployed and reached, real browser not verified)

Verification Scope

The JavaScript saved on GitHub was syntactically checked using V8, and four conditions were verified: frequency upper and lower limits, and invalid input.AudioContext startup, audio playback and rendering in a real browser, deployment to GitHub Pages, blue quotation boxes in WordPress, featured images, smartphones, and printing/PDF generation are unverified.Items delegated to existing WordPress styling are not redundantly inserted into the body, and no custom production CSS or unregistered images have been added.