https://github.com/independent-coder/sinespace
Explore the fascinating world of sound synthesis with 12+ waveform types, real-time visualization, and professional audio effects.
https://github.com/independent-coder/sinespace
audio audio-analysis audiovisualizer noframework synthesizer webaudio webaudioapi
Last synced: 29 days ago
JSON representation
Explore the fascinating world of sound synthesis with 12+ waveform types, real-time visualization, and professional audio effects.
- Host: GitHub
- URL: https://github.com/independent-coder/sinespace
- Owner: independent-coder
- License: mit
- Created: 2026-01-23T22:07:50.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-01-26T02:35:41.000Z (about 1 month ago)
- Last Synced: 2026-01-26T18:17:49.678Z (about 1 month ago)
- Topics: audio, audio-analysis, audiovisualizer, noframework, synthesizer, webaudio, webaudioapi
- Language: JavaScript
- Homepage: https://independent-coder.github.io/SineSpace/
- Size: 13.8 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
SineSpace
**An Interactive Waveform Playground**
Explore the fascinating world of sound synthesis with 12+ waveform types, real-time visualization, and professional audio effects.
[](https://independent-coder.github.io/SineSpace/)
[](https://github.com/independent-coder/SineSpace)
[](LICENSE)
[](https://visitor-badge.laobi.icu/?page_id=Independent-Coder.SineSpace)
## Screenshots and Demos
Desktop
Mobile
Demo
## ✨ Features
### 🎛️ Waveform Types
- **🎵 Basic**: Sine, Square, Triangle, Sawtooth
- **🔧 Custom**: Custom Pulse Waves, Harmonic-rich, Noise-mixed
- **📊 Step & Digital**: Step/Quantized, DC/Constant, 8-bit/Bitcrusher, Sample & Hold
- **📁 Audio File**: Upload and play any audio file with visualization
### 🎨 Visual Effects
- **📺 CRT Oscilloscope** with authentic phosphor glow
- **🖥️ Clean Visualization Mode** for modern, crisp display
- **🔄 Visual Effects Toggle** - Switch between CRT and Clean modes
- **🚀 60 FPS Optimized** rendering for smooth animation
- **📊 Real-time Waveform Visualization**
- **📈 FFT Frequency Spectrum Analysis**
- **✨ Scanlines, Noise, and Flicker Effects** (CRT mode only)
### 🎛️ Interactive Controls
- **🎚️ Precision Frequency Control** (1Hz - 20kHz with logarithmic scaling)
- **🔊 Fine-tuned Gain Control** with smooth adjustments
- **🔄 Visual Effects Toggle** - Switch between CRT and Clean modes
- **🎮 Responsive Touch Interface** for mobile devices
- **🎯 Real-time Parameter Updates**
- **📁 Audio File Upload** with full media player controls
- **⏯️ Playback Controls**: Play/Pause, Seek, Time Display
- **🎚️ Progress Bar**: Click and drag to seek through audio
### 📱 Cross-Platform
- **🖥️ Desktop**: Full-featured experience with side-by-side visualizations
- **📱 Mobile**: Touch-optimized interface with adaptive layouts
- **💻 Tablet**: Balanced design for medium screens
- **🔄 Landscape Mode**: Optimized horizontal layouts
## 🚀 Quick Start
### 🌐 Live Demo
Open your browser and visit: **[https://independent-coder.github.io/SineSpace/](https://independent-coder.github.io/SineSpace/)**
### 💻 Local Setup
1. Clone the repository:
```bash
git clone https://github.com/independent-coder/SineSpace.git
cd SineSpace
```
2. Open `index.html` in your favorite web browser:
```bash
# Using Python 3
python -m http.server 8000
# Using Node.js
npx serve .
# Or simply open index.html directly
open index.html
```
3. Start exploring waveforms! 🎵
## � Usage Guide
### 🎵 Playing with Built-in Waveforms
1. **Select a waveform** from the dropdown menu
2. **Adjust frequency** using the slider (1Hz - 20kHz)
3. **Control volume** with the gain slider
4. **Press Start** to begin playback and visualization
5. **Switch waveforms** in real-time while playing
### 📁 Audio File Upload
1. **Select "📁 Upload Audio File"** from the waveform dropdown
2. **Choose your audio file** (MP3, WAV, OGG, WebM supported)
3. **Use the playback controls**:
- **Play/Pause Button**: Start/stop audio playback
- **Progress Bar**: Click or drag to seek to any position
- **Seek Buttons**: Skip forward/backward by 10 seconds
- **Time Display**: Shows current time / total duration
4. **Adjust volume** with the gain slider
5. **Watch real-time visualization** of your audio file
### 🎨 Visual Effects
- **CRT/Clean Toggle**: Switch between authentic CRT oscilloscope and modern clean display
- **Waveform Display**: Real-time oscilloscope visualization
- **Frequency Spectrum**: FFT analysis of audio frequencies
- **Responsive Layout**: Adapts to your screen size
## �️ Technical Stack
### 🎯 Core Technologies
- **HTML5** - Semantic markup and structure
- **CSS3** - Modern styling with animations and effects
- **Vanilla JavaScript** - No frameworks, pure web APIs
- **Web Audio API** - Professional audio synthesis
- **Canvas API** - Real-time visualizations
### 🎨 Design Features
- **Glassmorphism UI** with backdrop filters
- **Dark Theme** optimized for extended use
- **Responsive Design** with mobile-first approach
- **CSS Grid & Flexbox** for modern layouts
- **FontAwesome Icons** for enhanced UI
### 🔊 Audio Architecture
- **OscillatorNode** - Sound generation
- **GainNode** - Volume control
- **AnalyserNode** - Frequency analysis
- **WaveShaperNode** - Custom waveform synthesis
- **AudioBufferSourceNode** - Audio file playback
- **Real-time audio processing** with seek and time controls
## 📖 Usage Guide
## � Advanced Features
### 🎛️ Synthesis Techniques
- **Wave Shaping**: Custom waveform distortion
- **Audio File Processing**: Real-time visualization of uploaded audio
### 📁 Audio File Features
- **Multiple Formats**: MP3, WAV, OGG, WebM support
- **Full Playback Controls**: Play, pause, seek, time display
- **Real-time Visualization**: Waveform and spectrum analysis
- **Progress Bar Scrubbing**: Click and drag to seek
- **Resume Functionality**: Remembers position when stopped
- **Volume Integration**: Works with existing gain control
### 📱 Mobile Optimizations
- **Touch-Friendly Controls**: 44px minimum touch targets
- **Responsive Layouts**: Adaptive grid systems
- **Performance Optimization**: Efficient rendering on all devices
- **Gesture Support**: Smooth touch interactions
### 🎨 Visual Enhancements
- **CRT Phosphor Glow**: Authentic green phosphor effect
- **Scanline Simulation**: Horizontal line artifacts
- **Noise Overlay**: Subtle video noise texture
- **Flicker Animation**: Realistic monitor flicker
## 🔧 Development
### 📁 Project Structure
```
SineSpace/
├── index.html # Main application file
├── style.css # Styling and animations
├── script.js # Core application logic
├── assets/
│ └── favicon.svg # Application icon
├── README.md # Project documentation
└── .gitignore # Git ignore rules
```
### 🎯 Architecture
- **Modular Design**: Clean separation of concerns
- **Event-Driven**: Responsive user interactions
- **Audio Context Management**: Proper resource handling
- **Canvas Rendering**: Efficient visualization updates
### 🔊 Audio Processing
- **Context Management**: Single audio context instance
- **Node Routing**: Proper audio graph connections
- **Resource Cleanup**: Memory leak prevention
- **Error Handling**: Robust audio API usage
## 🌐 Browser Compatibility
### ✅ Supported Browsers
- **Chrome** 66+ (Web Audio API support)
- **Firefox** 60+ (Full feature support)
- **Safari** 12+ (iOS and desktop)
- **Edge** 79+ (Chromium-based)
- **Opera** 53+ (Web Audio API)
### 📱 Mobile Support
- **iOS Safari** 12+
- **Chrome Mobile** 66+
- **Firefox Mobile** 60+
- **Samsung Internet** 9+
## 🎨 Customization
### 🎛️ Adding New Waveforms
1. Create waveform generation function in `script.js`
2. Add option to HTML select element
3. Update `createCustomWaveform()` method
4. Test audio output and visualization
### 🎨 Styling Modifications
- **Colors**: Modify CSS variables in `style.css`
- **Effects**: Adjust CRT effect parameters
- **Layout**: Change grid configurations
- **Animations**: Update keyframe definitions
### 🔊 Audio Parameters
- **Frequency Range**: Modify slider limits
- **Waveform Curves**: Edit WaveShaper algorithms
- **Visualization**: Update canvas rendering
## 🤝 Contributing
### 🎯 How to Contribute
1. **Fork** the repository
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
4. **Push** to the branch (`git push origin feature/amazing-feature`)
5. **Open** a Pull Request
### 📝 Contribution Guidelines
- **Code Style**: Follow existing conventions
- **Documentation**: Update README for new features
- **Testing**: Ensure cross-browser compatibility
- **Performance**: Optimize for mobile devices
### 🐛 Bug Reports
- **Issue Template**: Use provided templates
- **Environment**: Specify browser and device
- **Steps to Reproduce**: Detailed reproduction steps
- **Expected Behavior**: Clear description of expected outcome
## 📄 License
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
### 📜 License Summary
- ✅ **Commercial use**: Allowed
- ✅ **Modification**: Allowed
- ✅ **Distribution**: Allowed
- ✅ **Private use**: Allowed
- ❌ **Liability**: No warranty provided
- ❌ **Trademark**: No trademark grant
## 🙏 Acknowledgments
### 🎵 Audio API Inspiration
- **Web Audio API** - W3C Audio Working Group
- **Audio Synthesis** - Computer Music pioneers
- **DSP Techniques** - Digital signal processing community
### 🎨 Design Resources
- **FontAwesome** - Icon library
- **Glassmorphism** - Modern UI design trend
- **CRT Effects** - Vintage monitor aesthetics
### 🌟 Community
- **GitHub** - Platform and community
- **Open Source** - Collaborative development
- **Web Audio Community** - Knowledge and inspiration
## 📞 Contact
### 🌐 Social Links
- **GitHub**: [@independent-coder](https://github.com/independent-coder)
- **Website**: [independent-coder.github.io](https://independent-coder.github.io/independent-coder/)
---
**🎵 Made with passion for sound synthesis and web technology 🎵**
[⭐ Star this repo](https://github.com/independent-coder/SineSpace) • [🍴 Fork this repo](https://github.com/independent-coder/SineSpace/fork) • [🐛 Report issues](https://github.com/independent-coder/SineSpace/issues)