A real-time audio DSP demo website for guitar impulse response processing, built with TypeScript and Vite.
- Real-time Impulse Response Processing: Load custom impulse response files and apply convolution in real-time
- Audio Sample Playback: Upload guitar/audio samples and hear them processed
- Dry/Wet Mix Control: Blend between the original (dry) and processed (wet) signals
- Volume Control: Adjust the master output volume
- Metal/Rock Themed UI: Dark, edgy design with vibrant accents perfect for guitar enthusiasts
- Web Audio API: Utilizes the browser's native Web Audio API for high-quality audio processing
- Zero Latency: Real-time processing with no perceptible delay
- Cross-Browser Support: Works on all modern browsers
- Node.js (v16 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/joseamena/DSPWebPreviewer.git
# Navigate to the project directory
cd DSPWebPreviewer
# Install dependencies
npm install# Start the development server
npm run devThe application will be available at http://localhost:3000
# Build for production
npm run buildThe built files will be in the dist directory.
# Preview the production build
npm run preview- Load an Impulse Response: Click "Choose IR file..." to upload an impulse response audio file (WAV, MP3, etc.)
- Load an Audio Sample: Click "Choose audio sample..." to upload a guitar or other audio sample
- Play Dry: Click "
▶️ Play Dry (Original)" to hear the unprocessed audio - Play Wet: Click "
▶️ Play Wet (Processed)" to hear the audio with impulse response convolution applied - Adjust Mix: Use the Dry/Wet Mix slider to blend between the original and processed signals
- Adjust Volume: Use the Volume slider to control the output level
📖 For detailed usage instructions, examples, and troubleshooting, see USAGE.md
Impulse responses are essential for using this application. Here are some sources:
- Redwirez - Free guitar cabinet IRs (requires registration)
- GuitarHack - Free metal/rock cabinet impulses
- God's Cab - Free Celestion G12M cabinet IRs
- OpenAir - Free room and reverb impulse responses
- Voxengo Impulses - Free reverb and acoustic impulse responses
- OwnHammer - Professional guitar cabinet IRs
- Celestion - Official speaker cabinet IRs
- ML Sound Lab - High-quality cabinet simulations
- Two Notes - Wall of Sound IR collections
You can create custom impulse responses by:
- Recording a space or equipment with a test signal (sine sweep or impulse)
- Using deconvolution software to extract the IR
- Popular tools: REW (Room EQ Wizard), Altiverb XL, Voxengo Deconvolver
- TypeScript: Type-safe JavaScript for robust code
- Vite: Fast build tool and dev server
- Web Audio API: Browser-native audio processing
- ConvolverNode: For impulse response convolution
- CSS3: Modern styling with gradients and animations
DSPWebPreviewer/
├── src/
│ ├── main.ts # Main application logic and AudioDSPProcessor class
│ ├── style.css # UI styling (metal/rock themed)
│ └── types.d.ts # TypeScript type definitions
├── public/
│ └── vite.svg # Vite logo asset
├── index.html # Main HTML entry point
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite build configuration
├── README.md # This file
└── USAGE.md # Detailed usage guide
- AudioDSPProcessor: Main class handling audio context, file loading, and processing
- Web Audio Graph: Dynamic routing with dry/wet paths and convolver node
- Event Handlers: File uploads, playback controls, and real-time parameter adjustments
The application uses the Web Audio API's ConvolverNode to perform real-time convolution between the audio sample and the impulse response. This simulates the acoustic characteristics of the space or equipment captured in the impulse response file.
Audio Sample → [Dry Path] ──────────→ Dry Gain → Master Gain → Output
↓
[Wet Path] → Convolver → Wet Gain ↗
- FFT Processing: The ConvolverNode uses Fast Fourier Transform to convert both audio signals to frequency domain
- Convolution: Multiplies the frequency representations together
- IFFT: Converts back to time domain for playback
- Real-time Mixing: Dry and wet signals are continuously blended based on the mix control
Load a cabinet IR (Mesa Boogie, Marshall, etc.) to process a direct guitar signal (DI track). Perfect for:
- Home recording without mic'ing an amp
- Re-amping tracks with different cabinet tones
- Quick tone previews during songwriting
Use room or hall IRs to add realistic acoustic spaces:
- Vocal processing with natural reverb
- Simulating concert hall acoustics
- Creating ambient guitar textures
Preview tracks with different acoustic characteristics:
- A/B testing different cabinet IRs
- Finding the right reverb space
- Stem processing with consistent ambience
Understand audio processing concepts:
- Hear the difference between dry and processed signals
- Experiment with convolution in real-time
- Compare different impulse responses
- Chrome/Edge: ✅ Full support
- Firefox: ✅ Full support
- Safari: ✅ Full support
- Opera: ✅ Full support
- IR Length: Best performance with IRs under 5 seconds
- File Size: Audio samples up to 50MB work smoothly
- Sample Rate: Any sample rate (browser handles resampling)
- Bit Depth: 16-bit or 24-bit audio files recommended
- Longer IRs (>10 seconds) may cause slight CPU spikes on mobile devices
- Stereo IRs provide better spatial accuracy but use more processing power
- Close other audio-intensive browser tabs for best performance
- On mobile, keep screen on during playback for optimal performance
- Safari (iOS): May require user interaction to initialize audio context
- Chrome: Hardware acceleration enabled by default for best performance
- Firefox: Excellent stability with large IR files
- Mobile Browsers: Some latency may occur with very long IRs (>15 seconds)
- Node.js v16 or higher
- npm or yarn package manager
- Modern browser with Web Audio API support
npm run dev- Starts Vite dev server on
http://localhost:3000 - Hot Module Replacement (HMR) enabled
- TypeScript type checking in real-time
- Changes reflect instantly in browser
npm run build- Compiles TypeScript to JavaScript
- Minifies and bundles all assets
- Optimizes for production performance
- Output directory:
dist/ - Ready to deploy to any static hosting
TypeScript compilation happens automatically during build. To check types manually:
npx tsc --noEmit- TypeScript: Configured in
tsconfig.jsonwith strict mode - Vite: Custom port (3000) configured in
vite.config.ts - Module Type: ES Modules (
"type": "module"in package.json)
Contributions are welcome! Here's how you can help:
- 🐛 Bug Reports: Open an issue describing the problem, steps to reproduce, and your environment
- ✨ Feature Requests: Suggest new features or improvements via issues
- 📝 Documentation: Improve README, USAGE.md, or add code comments
- 🎨 UI/UX: Enhance the interface or user experience
- 🔧 Code: Submit pull requests with bug fixes or new features
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes with clear, descriptive commits
- Test thoroughly in multiple browsers
- Update documentation if needed
- Submit a PR with a clear description of changes
- Follow existing TypeScript patterns
- Use meaningful variable and function names
- Add comments for complex logic
- Maintain type safety (no
anytypes without justification)
- Tested in Chrome/Edge
- Tested in Firefox
- Tested in Safari (if possible)
- No console errors
- Audio plays correctly
- All controls work as expected
- Web Audio API Community: For excellent documentation and examples
- Impulse Response Creators: Thanks to all the audio engineers creating and sharing IRs
- Vite Team: For the blazing-fast build tool
- TypeScript Team: For making JavaScript development more robust
- Open Source Community: For inspiration and support
Special thanks to the guitar and audio production communities for feedback and use cases.
ISC