Audio Spectrum Analyzer and Recorder

Introduction to live microphone spectrum analysis

This audio spectrum analyzer treats your live microphone signal as its input rather than asking you to enter values in fields. It examines the incoming sound by frequency and turns that analysis into the moving bars on the canvas, answering a practical question: where is the signal energy concentrated right now? Unlike a waveform display that primarily shows changing amplitude over time, this view separates the sound into frequency regions. It can reveal whether the current sound is weighted toward bass, midrange, treble, hum, hiss, or a more complicated mix. That makes the display useful for a quick microphone check, a room-noise inspection, a speech demonstration, or an introduction to frequency-domain audio.

The companion recorder captures a fixed five-second sample after the analyzer has been started. You can save that clip as a WebM audio file and use it as a reference while comparing conditions: for example, a quiet room and a noisy room, two microphone distances, or the sound of a fan, instrument, or small speaker. The session remains browser based: start monitoring, observe the spectrum, record a short sample when needed, and stop the microphone when you are finished.

How this audio spectrum analyzer works

This live microphone spectrum analyzer receives sound from the browser’s audio capture system, analyzes it repeatedly, and renders the latest frequency information as a bar graph. The microphone is the source, the Web Audio analyser performs the frequency-domain processing, and the canvas is the visual output. Each redraw shows the relative energy distributed across the analyzer’s frequency bins, making changes in room tone, voices, tones, and other sounds easy to compare visually.

The recording control uses the same active microphone stream as the spectrum view. Once monitoring is running, you can capture a five-second sample and download it without moving to another tool. This is useful for retaining a reference clip while testing an environment or comparing how a source changes from one setup to another.

What the microphone spectrum display is measuring

The microphone spectrum display begins with a time-varying waveform: air-pressure changes converted into an audio signal. For many audio checks, loudness alone is not enough; the useful question is which frequency components are present. The analyser estimates the signal level in a collection of narrow frequency bins. Lower-frequency content, including rumble, hum, and bass notes, is shown toward the left. Higher-frequency content, including hiss, speech consonants, and bright harmonics, appears farther right.

Speech usually produces a changing cluster of bars instead of one isolated line. Sustained vowels often strengthen lower and middle regions, while sharp consonants can briefly add higher-frequency activity. A steady pure tone can appear as a more concentrated peak. Continuous ventilation or electrical noise may hold activity in approximately the same area, whereas keyboard clicks and taps tend to create short, broad bursts. These shapes help distinguish persistent tonal noise from transient events.

The chart uses the analyser’s current byte-frequency data, so its bar heights are relative display values rather than calibrated acoustic measurements. Taller bars mean stronger energy in that displayed frequency bin at that instant. Use the graph for visual comparison, troubleshooting, and learning; it is not a laboratory sound-pressure meter.

How to use the audio spectrum controls

Start the audio spectrum analyzer by pressing Start. If required, your browser will request microphone permission. After access is granted, the page creates an audio context, connects the microphone stream to an analyser node, and continuously redraws the spectrum canvas. Stop becomes available to end the session, while Record 5s becomes available for a short capture.

Press Record 5s while the microphone stream is active to save a sample. The recorder runs for five seconds, stops automatically, and exposes a link for downloading the generated WebM audio file. For a simple comparison, record in a quiet room, near a fan, and while speaking from a consistent distance. Those clips can provide useful context for the different spectrum patterns you observe.

Use Stop to finish live spectrum monitoring. Stopping turns off the microphone tracks and closes the active audio context for the session. To begin another check, press Start again. This is particularly useful on laptops and phones when you do not want the microphone left active unnecessarily.

Audio spectrum processing behind the bars

This audio spectrum analyzer does not calculate a single score or total. Its analyser node reads successive frames of microphone audio and supplies an array of frequency-bin values for the canvas to draw. The page sets the analyser’s fftSize to 2048, so the browser uses 2048-sample analysis frames; the resulting frequencyBinCount array contains the bar data used by the display.

Each bar is therefore a visual representation of one returned bin, not a weighted total of unlike inputs. The drawing code scales each byte-frequency value from its range of 0 to 255 to the canvas height. A value nearer 255 produces a taller bar, while a value nearer 0 produces a short bar. Color changes from left to right, but color does not change the measured value.

FFT size affects the tradeoff between frequency detail and responsiveness. With the 2048 setting used here, the browser has a fixed analysis frame size for its estimate. In general, increasing an FFT size can provide finer frequency separation while requiring a longer frame; decreasing it can make visual changes feel more immediate while providing coarser frequency detail. The page presents the analyser’s live output rather than attempting to identify instruments, musical notes, or noise sources automatically.

What each audio analyzer element means

The audio analyzer interface is deliberately compact. Start activates microphone capture and the live spectrum. Stop ends the current microphone session. Record 5s records five seconds from the active stream. The canvas is the live frequency display, and the result area communicates microphone and recording status both visibly and to assistive technologies.

Because this tool has no numeric text fields, interpretation matters more than unit entry. Read horizontally from low to high frequency and vertically as relative intensity. Watch changes over time: a feature that remains in the same region may indicate a steady tone or persistent noise, while a feature that flashes briefly is more likely to be a transient sound. Compare like-for-like recordings and microphone positions when you need a meaningful visual comparison.

Worked example: voice, room tone, and a low hum

To use the live audio spectrum for a basic voice-and-noise check, press Start and remain quiet briefly. The remaining activity may reflect room tone, computer fans, air conditioning, or microphone self-noise. Next, speak a sustained vowel at a steady distance from the microphone. The spectrum should show stronger activity across low and middle regions, often with several adjacent peaks rather than a single bar. Then stop speaking and introduce a steady noise source such as a nearby fan. A source with a persistent low-frequency component should make the left portion of the display more active and more stable.

Record one five-second sample for each condition if you want a reference. After each recording completes, download it and name it for the condition, such as speech-near-mic or fan-background. This creates a repeatable observation that connects what you heard with the spectrum pattern shown at the time, without implying that the display supplies a calibrated noise measurement.

How to interpret a live audio spectrum sensibly

A sensible reading of the live audio spectrum starts with the sound you expect to hear rather than with a search for exact values. A deep hum should favor lower frequencies; hiss should add comparatively more high-frequency activity; speech should change constantly and generally show more mid-band structure than a pure tone. When the chart’s shape broadly matches the audible source, it is providing a useful qualitative picture.

The display also has clear limits. It does not automatically name musical notes, diagnose a noise source, or provide calibrated decibel values for compliance work. It is not a substitute for dedicated acoustic measurement equipment. Its value is immediate visual evidence of how energy is distributed across the displayed bins and how that distribution changes over time. That is often sufficient for confirming that a microphone is active, spotting a recurring hum, comparing rooms, or demonstrating bass-heavy and treble-heavy audio.

Audio spectrum limitations and browser behavior

This audio spectrum and recording tool depends on browser support for microphone access, the Web Audio API, canvas rendering, and MediaRecorder. The analyzer cannot start if microphone permission is denied. Recording support and playback compatibility can vary by browser, device, application, and operating system. The page creates the available recording as a WebM audio blob for download.

Microphone hardware also affects the displayed spectrum. Laptop microphones, phones, USB headsets, and external audio interfaces can each color the incoming sound differently. Device processing such as automatic gain control, noise suppression, and echo cancellation may alter both the audible signal and the pattern on the graph. Two devices in the same room can therefore produce different-looking displays. Relative comparisons made with the same device and setup are generally more informative than comparisons across unrelated devices.

The graph updates from short analysis frames, so a clap, tap, or click may be visible only briefly, while a steady tone can appear more stable. For a controlled comparison, keep microphone position, speaking distance, and environment as consistent as possible. That reduces the chance that a setup change, rather than the sound source, explains the difference you see.

Practical tips for clearer spectrum results

For a clearer audio spectrum demonstration, reduce competing background noise before starting and keep a consistent microphone distance when comparing speech. When testing a tone generator or speaker, use a moderate level to avoid clipping or distortion. If the graph remains inactive, check that the browser has permission, the intended microphone is selected, and the operating-system input is not muted. A busy display in an apparently quiet room can reflect ambient sound, microphone gain, or built-in device processing.

Used with those limitations in mind, this page is a compact audio teaching and troubleshooting tool. You can hear a source, see its changing spectral footprint, save a brief reference recording, and repeat the observation in a different condition. That workflow can help students, podcasters, hobbyists, and anyone seeking a quick browser-based view of microphone frequency content.