Audio Visualizer for OBS

A real-time audio visualization web app designed for use as an OBS Browser Source. Creates beautiful circle-based animations that respond to microphone input, similar to the examples from Sonia Boller's audible-visuals project.

Features

• 🎤 Real-time microphone input processing
• 🎵 Audio file playback support (local & remote WAV files)
• 🌀 Dynamic circle-based visualizations
• 🎨 Customizable colors, intensity, and size
• 🖥️ OBS Browser Source compatible
• ⚡ Smooth performance with Web Audio API
• 🔧 URL parameter configuration
• 📊 Frequency-based animation (bass, mid, treble)
• 🖼️ Optional center image with audio-reactive scaling and synchronized rotation

Quick Start

1. Clone or download the files
2. Serve the files using any web server:

   # Using Python 3
   python3 -m http.server 8000
   
   # Using Node.js (if you have live-server installed)
   npx live-server
   
   # Using PHP
   php -S localhost:8000

3. Open in browser: http://localhost:8000
4. For microphone input: Allow microphone access when prompted
5. For audio file input: Add audioFile parameter to URL and click on the page to start playback
6. Add as OBS Browser Source (see OBS Setup section)

URL Parameters

Configure the visualization by adding parameters to the URL:

Parameter	Type	Default	Description
intensity	float	1.0	Controls the sensitivity of the animation to audio (0.1 - 5.0)
color	string	#00ff88	Hex color code for the circles
radius	float	100	Base radius of the circles in pixels
circles	integer	1	Number of concentric circles (1 - 5)
speed	float	1.0	Animation speed multiplier (0.1 - 3.0)
thickness	float	2	Line thickness of the circles (1 - 10)
image	string	null	URL to center image (PNG/JPG/SVG)
imageSize	float	0.5	Image size relative to radius (0.1 - 2.0)
imageRotation	float	0.8	Image rotation speed relative to circles (0.0 - 2.0)
audioFile	string	null	Local or remote WAV audio file URL (overrides microphone)

Example Configurations

Basic Green Circle (Default)

http://localhost:8000/

High Intensity Purple

http://localhost:8000/?intensity=2.5&color=%23ff00ff&radius=150

Multiple Blue Circles

http://localhost:8000/?color=%234444ff&circles=3&thickness=3&radius=80

Fast Red Animation

http://localhost:8000/?color=%23ff4444&speed=2.0&intensity=1.5&thickness=4

Large Gentle Cyan

http://localhost:8000/?color=%2300ffff&radius=200&intensity=0.8&speed=0.5&thickness=1

Rainbow Effect (URL encode for %)

http://localhost:8000/?color=%23ff6b6b&circles=4&intensity=1.8&speed=1.5

OBS Preset - Subtle Background

http://localhost:8000/?intensity=0.6&color=%232196F3&radius=120&circles=2&thickness=2&speed=0.8

OBS Preset - Dynamic Foreground

http://localhost:8000/?intensity=3.0&color=%23ff9800&radius=80&circles=1&thickness=5&speed=1.2

With Center Image - Logo/Brand

http://localhost:8000/?intensity=2.0&color=%234CAF50&radius=150&image=https://your-domain.com/logo.png&imageSize=0.7

Local Smol Der Podcast Logo Example

http://localhost:8000/?intensity=2.0&color=%23A855F7&radius=140&circles=3&image=smol%20der.svg&imageSize=0.8&speed=0.8&imageRotation=0.9

Animated Icon Example

http://localhost:8000/?intensity=1.5&color=%23ff6b35&radius=120&circles=2&image=https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Question_mark_%28black%29.svg/200px-Question_mark_%28black%29.svg.png&imageSize=0.6

Audio File Examples

Local WAV File with Smol Der Logo

http://localhost:8000/?intensity=2.0&color=%23A855F7&radius=140&circles=3&audioFile=Digital%20Spark%202%20-%20Smol%20Der%20Choice.wav&image=smol%20der.svg&imageSize=0.8&imageRotation=0.9

Remote WAV File - High Energy Orange

http://localhost:8000/?intensity=2.5&color=%23ff6b35&radius=120&circles=2&audioFile=https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba-online-audio-converter.com_-1.wav&imageSize=0.6

Local Audio File - Minimal Blue Visualization

http://localhost:8000/?intensity=1.5&color=%234CAF50&radius=100&circles=1&audioFile=Digital%20Spark%202%20-%20Smol%20Der%20Choice.wav&thickness=3

Remote Audio with Custom Settings

http://localhost:8000/?intensity=3.0&color=%23E91E63&radius=180&circles=4&audioFile=https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba-online-audio-converter.com_-1.wav&thickness=2&speed=1.2

Audio File Usage

When using the audioFile parameter, the visualizer will load your specified WAV file instead of using microphone input.

Important Notes:

• User Interaction Required: Due to browser security policies, you must click anywhere on the page to start audio playback
• Click to Start: A "Click to Start Audio" message will appear - simply click to begin
• Automatic Fallback: If the audio file fails to load, the app automatically falls back to microphone input
• Supported Formats: Currently supports WAV files (local files or remote URLs with CORS headers)
• File Locations: Local files should be placed in the same directory as the HTML file

Console Messages:

• 🎧 Loading audio file: [filename] - Audio file is being loaded
• ✅ Audio file loaded successfully - Ready for user interaction
• 👆 Click anywhere to start audio playback - Waiting for user click
• 🎵 Audio playback started after user interaction - Audio is now playing
• 🎵 Audio file - Audio visualization running - Visualization active

OBS Studio Setup

1. Add Browser Source:

   • Right-click in Sources → Add → Browser Source
   • Name it "Audio Visualizer"

2. Configure Browser Source:

   • URL: http://localhost:8000/?your-parameters-here
   • Width: 1920 (or your canvas width)
   • Height: 1080 (or your canvas height)
   • ✅ Check "Shutdown source when not visible"
   • ✅ Check "Refresh browser when scene becomes active"

3. Audio Setup:

   • Make sure your microphone is working in your browser
   • Test the visualization before going live
   • Consider using OBS audio filters for better audio processing

Technical Details

Audio Processing

• Uses Web Audio API for real-time frequency analysis
• FFT Size: 256 (provides good balance of resolution and performance)
• Frequency Ranges:
  • Bass: 0-8 bins (low frequencies)
  • Mid: 8-32 bins (mid frequencies)
  • Treble: 32-64 bins (high frequencies)

Visualization Algorithm

• Circle positions calculated using trigonometric functions
• Radius modulated by frequency amplitude and configured intensity
• Multiple circles create layered depth effect
• Smooth animation using requestAnimationFrame

Browser Compatibility

• ✅ Chrome 66+
• ✅ Firefox 60+
• ✅ Safari 11.1+
• ✅ Edge 79+

Note: Microphone access requires HTTPS in production or localhost for development.

Troubleshooting

Microphone Not Working

• Check browser permissions: Look for microphone icon in address bar
• Use HTTPS: Some browsers require secure connection for microphone access
• Check device: Ensure microphone is connected and working in other apps

Poor Performance

• Lower circle count: Reduce circles parameter
• Reduce intensity: Lower intensity parameter
• Check CPU usage: Close other demanding applications

No Visualization

• Check audio input: Ensure microphone is picking up sound
• Increase intensity: Try intensity=3.0 to see if visualization appears
• Browser console: Open dev tools (F12) to check for errors

File Structure

audioviz/
├── index.html          # Main HTML file with canvas and controls
├── script.js           # Audio processing and visualization logic
└── README.md          # This documentation

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

James Puckett - Created with Claude Code

Credits

Inspired by Sonia Boller's audible-visuals project. Built with vanilla JavaScript and Web Audio API.