Kretz Audio Visualizer

Introduction

Welcome to the Audio Visualizer! This tool, built entirely within a single HTML file using JavaScript, allows you to "see" the sound happening on your computer or from specific sources in real-time. It features:

• Stereo Oscilloscope: Displays the audio waveform (amplitude over time) for the left and right channels separately, with a helpful dBFS grid.

• Spectrum Analyzer: Shows the distribution of frequencies (bass to treble) within the sound at any given moment.

• Master L/R Meter: Provides a peak level reading in dBFS (Decibels Full Scale) for the left and right channels, with standard color coding (green/yellow/red).

• Stereo Width Meter: Indicates the correlation between the left and right channels, giving a sense of the stereo image (mono vs. wide vs. out-of-phase).

• Multiple Audio Sources: You can visualize audio from:

  • Local audio files (MP3, WAV, etc.)

  • Your computer's microphone or line-in input.

  • Audio playing in a specific browser tab or potentially system-wide audio (requires specific user action during screen sharing).

  • An internal sine wave test tone generator with adjustable frequency and gain.

This document will guide you through setting up and using the tool effectively.

Interface Overview

The tool's interface is divided into several key sections:

• Top Section:

  • Controls: Contains the main settings and actions:

    • Select Audio Source: Radio buttons to choose where the audio comes from.

    • Player/Tone Controls: Specific controls (file input, frequency/gain sliders) appear here depending on the selected source.

    • Start/Stop Visualization: Buttons to begin and end the audio capture and visualization process.

    • Status Message: Displays instructions, progress, or error messages.

  • Stereo Width Meter: A horizontal bar showing the phase correlation between left and right channels.

  • Master Meter: Two vertical bars showing the peak dBFS levels for the Left (L) and Right (R) channels, with dB markings alongside.

• Main Visualizers:

  • Stereo Oscilloscope: Two larger canvases displaying the Left and Right channel waveforms against a dBFS grid. Also shows the current peak dBFS value numerically below each scope.

  • Spectrum Analyzer: A canvas showing the frequency spectrum (low frequencies on the left, high on the right) with frequency labels and a peak frequency readout.

Using the Features (Selecting Audio Sources)

This is the core of using the tool. Choose your desired audio source using the radio buttons before clicking "Start Visualization".

• General Operation:

  1. Click the radio button corresponding to the audio source you want to use.

  2. Configure any specific options for that source (e.g., select a file, adjust tone frequency/gain).

  3. Click the Start Visualization button.

  4. Grant any necessary permissions when prompted by your browser.

  5. The visualizations should begin.

  6. Click the Stop Visualization button when finished.

• A) Local File:

  1. Select the "Local File" radio button. The file player controls will appear.

  2. Click the Choose File button.

  3. Select an audio file (MP3, WAV, OGG, FLAC supported) from your computer.

  4. The status message will confirm the file is loaded, and the Start Visualization button will become enabled.

  5. Click Start Visualization.

  6. Use the built-in <audio> player controls (play, pause, seek, volume) to play the file. The visualizers will react to the audio being played.

  7. Click Stop Visualization to disconnect the player from the visualizer (playback might continue in the player itself).

• B) Microphone / Line In:

  1. Select the "Microphone / Line In" radio button.

  2. Click Start Visualization.

  3. Your browser will likely ask for permission to access your microphone. You must grant permission for this to work.

  4. The tool will start visualizing audio from your system's default microphone or line-in device.

  5. Note: This mode only visualizes the input; it does not play the microphone sound back through your speakers via this tool (to avoid feedback loops). You might hear your microphone through your OS monitoring if that's enabled separately.

• C) Screen / Tab Audio:

  1. Select the "Screen / Tab Audio" radio button.

  2. Click Start Visualization.

  3. Your browser will prompt you to choose what to share (Entire Screen, Window, or Browser Tab). This is the most critical step:

     • Look carefully for a checkbox or toggle labeled "Share audio", "Share system audio", or "Share tab audio". You MUST enable this option.

     • Select the specific Tab, Window, or Screen that is producing the audio you want to visualize. Sharing a specific Tab with the "Share tab audio" option checked is often the most reliable. Sharing the Entire Screen with system audio might capture all computer sounds, but support varies greatly between browsers and operating systems.

     • Click "Share" or "Allow" in the browser prompt.

  4. If successful and audio sharing was enabled, the visualizers will show the audio from the selected source.

  5. Note: Similar to the microphone, this mode only visualizes; it does not play the captured screen/tab audio back through your speakers via this tool.

• D) Test Tone:

  1. Select the "Test Tone" radio button. The Frequency and Gain controls will appear.

  2. Use the Frequency slider or number input to set the desired sine wave frequency (1 Hz to 20000 Hz).

  3. Use the Gain slider or number input to set the desired output level in dBFS (-60 dBFS to 0 dBFS). Note: The tool automatically compensates for the sine wave's peak level, so setting the gain to -12dBFS means the resulting peaks measured by the meters should be very close to -12dBFS.

  4. Click Start Visualization.

  5. The tool will generate the sine wave and visualize it. You will also hear the tone through your speakers.

Understanding the Displays

• Stereo Oscilloscope:

  • What it shows: A graph of audio amplitude (vertical axis) against time (horizontal axis). It shows the instantaneous shape of the sound wave for the left and right channels.

  • Grid: The horizontal lines represent amplitude levels in dBFS (Decibels Full Scale), where 0 dBFS is the maximum possible digital level. This helps you gauge how loud the signal is relative to clipping. The center line represents silence (zero amplitude).

  • Readout: The number below each scope shows the peak dBFS level detected within the most recent analysis window.

• Spectrum Analyzer:

  • What it shows: A graph of the signal's strength (vertical axis) across different frequencies (horizontal axis). Low frequencies (bass) are on the left, high frequencies (treble) are on the right.

  • Frequency Scale: The horizontal axis is logarithmic, meaning lower frequencies take up more space, which better matches human hearing perception. Labels indicate common frequency points (e.g., 100 Hz, 1k Hz = 1000 Hz).

  • Readout: Shows the approximate frequency with the highest energy ("Peak Frequency").

• Master Meter:

  • What it shows: The recent peak level for the left and right channels, displayed on a vertical scale from -30 dBFS up to +3 dBFS.

  • Colors: Typically Green for lower levels, Yellow for mid-levels (approaching nominal full level), and Red for levels at or above 0 dBFS (indicating potential clipping).

  • Calibration Note: For the 'Test Tone' source, the meter reading should closely match the Gain setting you selected, thanks to internal calibration. For other sources, it shows the actual measured peak level.

• Stereo Width Meter:

  • What it shows: The phase relationship or correlation between the left and right channels.

  • +1 (Right): Indicates the L and R signals are highly correlated or identical (mono signal).

  • 0 (Center): Indicates the L and R signals are largely uncorrelated (wide stereo image).

  • -1 (Left): Indicates the L and R signals are highly correlated but out of phase (can cause cancellation issues, especially when summed to mono).

6. Troubleshooting & Tips

• • Permissions: Did you grant microphone permission when prompted (for Mic source)?

  • Audio Sharing: Did you explicitly check the "Share audio" box when selecting a Screen/Tab source? This is the most common reason this mode fails. Try sharing a specific browser tab known to be playing audio first.

  • Correct Source Selected? Ensure the radio button matches the source you intend to use.

Limitations

• System-Wide Audio Capture: Capturing all audio output from all applications using standard browser APIs is unreliable and depends heavily on your OS, browser, and settings when using the "Screen / Tab Audio" source. True system-wide capture usually requires virtual audio routing software (like VB-CABLE, Loopback, BlackHole).

• Browser Compatibility: While designed for modern browsers, minor differences in API implementation or permission prompts might exist.

Conclusion

This tool provides a versatile way to visualize different audio sources directly in your browser. By understanding how to select sources, grant permissions, and interpret the different displays, you can gain valuable insights into the characteristics of your audio signals. Enjoy exploring the world of sound visually!