Sound Wave Visualizer

An interactive web app for exploring audio waveforms. Pick a musical note, waveform type, and amplitude to hear the sound, see its plot, and view the corresponding mathematical equation rendered with MathJax.

Features

• Four waveform types: sine, cosine, square, and sawtooth
• 73 notes across seven octaves (C1–C7), selectable via a chromatic slider
• Live visualization with Plotly (zoomed to the first 20 ms of the wave)
• Audio playback generated server-side as OGG at 44.1 kHz
• Dynamic equations that update as you change parameters

Tech Stack

Layer	Tools
Backend	Python, Flask, NumPy, SoundFile
Frontend	HTML/CSS/JS, Plotly, noUiSlider, MathJax

Prerequisites

• Python 3.10+
• libsndfile (required by SoundFile for audio encoding)
  • Windows: usually installed automatically with the soundfile pip wheel
  • macOS: brew install libsndfile
  • Linux: sudo apt install libsndfile1 (Debian/Ubuntu) or equivalent

Local Setup

1. Clone the repository

   git clone https://github.com/<your-username>/sound-visualizer.git
   cd sound-visualizer

2. Create and activate a virtual environment (recommended)

   python -m venv venv
   
   # Windows
   venv\Scripts\activate
   
   # macOS / Linux
   source venv/bin/activate

3. Install dependencies

   pip install -r requirements.txt

4. Run the development server

   python app.py

5. Open the app in your browser at http://127.0.0.1:5000

Usage

1. Choose a waveform from the dropdown.
2. Drag the note slider to select a pitch (default is C3).
3. Adjust amplitude between 0 and 1.
4. The graph, equation, and audio preview update automatically when you release the slider or change another control.
5. Click Play Sound or use the audio player controls to listen.

Project Structure

sound-visualizer/
├── app.py                 # Flask API and waveform generation
├── frontend/
│   └── frontend.html      # Single-page UI
├── requirements.txt
├── LICENSE
└── README.md

API Endpoints

Method	Route	Description
GET	/	Serves the frontend
POST	/generate_wave	Returns generated audio (OGG blob)
POST	/graph_wave	Returns time/amplitude arrays (JSON)

Both POST endpoints expect JSON bodies with note, waveform type, and amplitude fields.

License

MIT — see LICENSE.