SineSpace

An Interactive Waveform Playground

Explore the fascinating world of sound synthesis with 12+ waveform types, real-time visualization, and professional audio effects.

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
• 🏗️ Modular Architecture - Clean ES6 module structure
• 📊 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
• 📁 Modern Audio Upload - Drag & drop file upload with progress bar
• 🎵 Professional Audio Player - Clickable progress bar and clean controls
• 🎮 Responsive Touch Interface for mobile devices
• 🎯 Real-time Parameter Updates

📱 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/

💻 Local Setup

1. Clone the repository:

   git clone https://github.com/independent-coder/SineSpace.git
   cd SineSpace

2. Open index.html in your favorite web browser:

   # 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
• ES6 Modules - Modular JavaScript architecture
• Vanilla JavaScript - No frameworks, pure web APIs
• Web Audio API - Professional audio synthesis
• Canvas API - Real-time visualizations

🏗️ Modular Architecture

• SineSpaceCore - Main application controller
• AudioManager - Web Audio API functionality
• VisualizationManager - Canvas rendering and CRT effects
• UIManager - User interface interactions and controls
• WaveformGenerator - Custom waveform generation
• Clean separation of concerns for maintainability

🎨 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
• Smooth Parameter Transitions - Anti-click protection
• Exponential Ramps - Natural frequency and gain changes
• Professional Audio Quality - Crisp, clean sound without artifacts
• 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
├── js/                 # JavaScript modules
│   ├── main.js         # Application entry point
│   ├── SineSpaceCore.js # Main application controller
│   ├── AudioManager.js # Web Audio API functionality
│   ├── VisualizationManager.js # Canvas rendering
│   ├── UIManager.js    # User interface interactions
│   └── WaveformGenerator.js # Waveform generation
├── assets/
│   └── favicon.svg     # Application icon
├── README.md           # Project documentation
└── .gitignore          # Git ignore rules

🎯 Architecture

• Modular Design: ES6 modules with clean separation of concerns
• Event-Driven: Responsive user interactions
• Dependency Injection: Modular communication between components
• 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 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
• Website: independent-coder.github.io

---

🎵 Made with passion for sound synthesis and web technology 🎵

⭐ Star this repo • 🍴 Fork this repo • 🐛 Report issues