This project is a simple audio spectrum analyzer that visualizes real-time audio input from the microphone. It features two main visualizations:
- A real-time frequency spectrum display.
- A spectrogram showing the intensity of frequencies over time.
Additionally, it includes functionality to detect and log the top z
peaks in the frequency spectrum.
See demo here: https://deftio.github.io/WebAudioSpectrum
- Real-Time Frequency Spectrum: Visualizes frequencies in real-time as they are captured from the microphone.
- Spectrogram Display: Shows how the spectrum changes over time, plotting the last
m
frames vertically. - Peak Detection: Identifies and logs the top
z
peaks in the spectrum for detailed analysis.
- A modern web browser that supports HTML5, JavaScript, and the Web Audio API.
- Microphone access on the device running the analyzer.
- Open
index.html
in your browser to start the application. - Click the "Start Sampling" button to begin capturing audio from your microphone.
- View the real-time spectrum and the developing spectrogram on the page.
- Top peaks in the current spectrum snapshot are logged to the console.
index.html
: The HTML file that hosts the application.audioSpectrum.js
: The JavaScript file that handles audio processing and visualization.styles.css
: Optional CSS file for custom styling (if separate fromindex.html
).
updateSpectrum()
: Handles the animation loop for real-time updates to the visualizations.draw()
: Renders the real-time frequency spectrum.drawSpectrogram()
: Updates the spectrogram visualization.findTopZPeaks(data, z)
: Analyzes the frequency data array to find the topz
peaks.
Contributions to the project are welcome! Please adhere to the following guidelines:
- Fork the repository and create your feature branch.
- Ensure your code adheres to the existing style to maintain consistency.
- Submit a pull request with a clear description of your changes.
This project is released under the MIT License. See the LICENSE
file for more information.