{"id":41780786,"url":"https://github.com/independent-coder/sinespace","last_synced_at":"2026-01-30T09:45:58.394Z","repository":{"id":334307357,"uuid":"1140886322","full_name":"independent-coder/SineSpace","owner":"independent-coder","description":"Explore the fascinating world of sound synthesis with 12+ waveform types, real-time visualization, and professional audio effects.","archived":false,"fork":false,"pushed_at":"2026-01-26T02:35:41.000Z","size":14429,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-26T18:17:49.678Z","etag":null,"topics":["audio","audio-analysis","audiovisualizer","noframework","synthesizer","webaudio","webaudioapi"],"latest_commit_sha":null,"homepage":"https://independent-coder.github.io/SineSpace/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/independent-coder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-23T22:07:50.000Z","updated_at":"2026-01-26T02:37:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/independent-coder/SineSpace","commit_stats":null,"previous_names":["independent-coder/sinespace"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/independent-coder/SineSpace","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/independent-coder%2FSineSpace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/independent-coder%2FSineSpace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/independent-coder%2FSineSpace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/independent-coder%2FSineSpace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/independent-coder","download_url":"https://codeload.github.com/independent-coder/SineSpace/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/independent-coder%2FSineSpace/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28805315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T05:43:52.625Z","status":"ssl_error","status_checked_at":"2026-01-27T05:43:48.957Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-analysis","audiovisualizer","noframework","synthesizer","webaudio","webaudioapi"],"created_at":"2026-01-25T04:00:52.551Z","updated_at":"2026-01-27T06:00:36.474Z","avatar_url":"https://github.com/independent-coder.png","language":"JavaScript","readme":"\n\n\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eSineSpace\u003c/h1\u003e\n\u003cimg src=\"assets/logo.svg\" alt=\"SineSpace Logo\" width=\"100px\" height=\"100px\"\u003e\n\n**An Interactive Waveform Playground**\n\nExplore the fascinating world of sound synthesis with 12+ waveform types, real-time visualization, and professional audio effects.\n\n[![Live Demo](https://img.shields.io/badge/Live-Demo-00d4ff\u0026logo=html5)](https://independent-coder.github.io/SineSpace/)\n[![GitHub](https://img.shields.io/badge/GitHub-Repository-7b2ff7\u0026logo=github)](https://github.com/independent-coder/SineSpace)\n[![License](https://img.shields.io/badge/License-MIT-green)](LICENSE)\n[![Visitor Count](https://visitor-badge.laobi.icu/badge?page_id=Independent-Coder.SineSpace)](https://visitor-badge.laobi.icu/?page_id=Independent-Coder.SineSpace)\n\n\u003c/div\u003e\n\n## Screenshots and Demos\n\n\u003ch3\u003eDesktop\u003c/h3\u003e \u003cimg src=\"assets/screenshots/full-size.png\" alt=\"SineSpace Screenshot\" width=\"250px\"\u003e\n\n\u003ch3\u003eMobile\u003c/h3\u003e \u003cimg src=\"assets/screenshots/mobile.png\" alt=\"SineSpace Screenshot\" width=\"250px\"\u003e\n\n\u003ch3\u003eDemo\u003c/h3\u003e \u003cimg src=\"assets/screenshots/demo.gif\" alt=\"SineSpace Demo\" width=\"500px\"\u003e\n\n## ✨ Features\n\n### 🎛️ Waveform Types\n- **🎵 Basic**: Sine, Square, Triangle, Sawtooth\n- **🔧 Custom**: Custom Pulse Waves, Harmonic-rich, Noise-mixed\n- **📊 Step \u0026 Digital**: Step/Quantized, DC/Constant, 8-bit/Bitcrusher, Sample \u0026 Hold\n- **📁 Audio File**: Upload and play any audio file with visualization\n\n### 🎨 Visual Effects\n- **📺 CRT Oscilloscope** with authentic phosphor glow\n- **🖥️ Clean Visualization Mode** for modern, crisp display\n- **🔄 Visual Effects Toggle** - Switch between CRT and Clean modes\n- **🚀 60 FPS Optimized** rendering for smooth animation\n- **📊 Real-time Waveform Visualization**\n- **📈 FFT Frequency Spectrum Analysis**\n- **✨ Scanlines, Noise, and Flicker Effects** (CRT mode only)\n\n### 🎛️ Interactive Controls\n- **🎚️ Precision Frequency Control** (1Hz - 20kHz with logarithmic scaling)\n- **🔊 Fine-tuned Gain Control** with smooth adjustments\n- **🔄 Visual Effects Toggle** - Switch between CRT and Clean modes\n- **🎮 Responsive Touch Interface** for mobile devices\n- **🎯 Real-time Parameter Updates**\n- **📁 Audio File Upload** with full media player controls\n- **⏯️ Playback Controls**: Play/Pause, Seek, Time Display\n- **🎚️ Progress Bar**: Click and drag to seek through audio\n\n### 📱 Cross-Platform\n- **🖥️ Desktop**: Full-featured experience with side-by-side visualizations\n- **📱 Mobile**: Touch-optimized interface with adaptive layouts\n- **💻 Tablet**: Balanced design for medium screens\n- **🔄 Landscape Mode**: Optimized horizontal layouts\n\n## 🚀 Quick Start\n\n### 🌐 Live Demo\nOpen your browser and visit: **[https://independent-coder.github.io/SineSpace/](https://independent-coder.github.io/SineSpace/)**\n\n### 💻 Local Setup\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/independent-coder/SineSpace.git\n   cd SineSpace\n   ```\n\n2. Open `index.html` in your favorite web browser:\n   ```bash\n   # Using Python 3\n   python -m http.server 8000\n   \n   # Using Node.js\n   npx serve .\n   \n   # Or simply open index.html directly\n   open index.html\n   ```\n\n3. Start exploring waveforms! 🎵\n\n## � Usage Guide\n\n### 🎵 Playing with Built-in Waveforms\n1. **Select a waveform** from the dropdown menu\n2. **Adjust frequency** using the slider (1Hz - 20kHz)\n3. **Control volume** with the gain slider\n4. **Press Start** to begin playback and visualization\n5. **Switch waveforms** in real-time while playing\n\n### 📁 Audio File Upload\n1. **Select \"📁 Upload Audio File\"** from the waveform dropdown\n2. **Choose your audio file** (MP3, WAV, OGG, WebM supported)\n3. **Use the playback controls**:\n   - **Play/Pause Button**: Start/stop audio playback\n   - **Progress Bar**: Click or drag to seek to any position\n   - **Seek Buttons**: Skip forward/backward by 10 seconds\n   - **Time Display**: Shows current time / total duration\n4. **Adjust volume** with the gain slider\n5. **Watch real-time visualization** of your audio file\n\n### 🎨 Visual Effects\n- **CRT/Clean Toggle**: Switch between authentic CRT oscilloscope and modern clean display\n- **Waveform Display**: Real-time oscilloscope visualization\n- **Frequency Spectrum**: FFT analysis of audio frequencies\n- **Responsive Layout**: Adapts to your screen size\n\n## �️ Technical Stack\n\n### 🎯 Core Technologies\n- **HTML5** - Semantic markup and structure\n- **CSS3** - Modern styling with animations and effects\n- **Vanilla JavaScript** - No frameworks, pure web APIs\n- **Web Audio API** - Professional audio synthesis\n- **Canvas API** - Real-time visualizations\n\n### 🎨 Design Features\n- **Glassmorphism UI** with backdrop filters\n- **Dark Theme** optimized for extended use\n- **Responsive Design** with mobile-first approach\n- **CSS Grid \u0026 Flexbox** for modern layouts\n- **FontAwesome Icons** for enhanced UI\n\n### 🔊 Audio Architecture\n- **OscillatorNode** - Sound generation\n- **GainNode** - Volume control\n- **AnalyserNode** - Frequency analysis\n- **WaveShaperNode** - Custom waveform synthesis\n- **AudioBufferSourceNode** - Audio file playback\n- **Real-time audio processing** with seek and time controls\n\n## 📖 Usage Guide\n\n## � Advanced Features\n\n### 🎛️ Synthesis Techniques\n- **Wave Shaping**: Custom waveform distortion\n- **Audio File Processing**: Real-time visualization of uploaded audio\n\n### 📁 Audio File Features\n- **Multiple Formats**: MP3, WAV, OGG, WebM support\n- **Full Playback Controls**: Play, pause, seek, time display\n- **Real-time Visualization**: Waveform and spectrum analysis\n- **Progress Bar Scrubbing**: Click and drag to seek\n- **Resume Functionality**: Remembers position when stopped\n- **Volume Integration**: Works with existing gain control\n\n### 📱 Mobile Optimizations\n- **Touch-Friendly Controls**: 44px minimum touch targets\n- **Responsive Layouts**: Adaptive grid systems\n- **Performance Optimization**: Efficient rendering on all devices\n- **Gesture Support**: Smooth touch interactions\n\n### 🎨 Visual Enhancements\n- **CRT Phosphor Glow**: Authentic green phosphor effect\n- **Scanline Simulation**: Horizontal line artifacts\n- **Noise Overlay**: Subtle video noise texture\n- **Flicker Animation**: Realistic monitor flicker\n\n## 🔧 Development\n\n### 📁 Project Structure\n```\nSineSpace/\n├── index.html          # Main application file\n├── style.css           # Styling and animations\n├── script.js           # Core application logic\n├── assets/\n│   └── favicon.svg     # Application icon\n├── README.md           # Project documentation\n└── .gitignore          # Git ignore rules\n```\n\n### 🎯 Architecture\n- **Modular Design**: Clean separation of concerns\n- **Event-Driven**: Responsive user interactions\n- **Audio Context Management**: Proper resource handling\n- **Canvas Rendering**: Efficient visualization updates\n\n### 🔊 Audio Processing\n- **Context Management**: Single audio context instance\n- **Node Routing**: Proper audio graph connections\n- **Resource Cleanup**: Memory leak prevention\n- **Error Handling**: Robust audio API usage\n\n## 🌐 Browser Compatibility\n\n### ✅ Supported Browsers\n- **Chrome** 66+ (Web Audio API support)\n- **Firefox** 60+ (Full feature support)\n- **Safari** 12+ (iOS and desktop)\n- **Edge** 79+ (Chromium-based)\n- **Opera** 53+ (Web Audio API)\n\n### 📱 Mobile Support\n- **iOS Safari** 12+\n- **Chrome Mobile** 66+\n- **Firefox Mobile** 60+\n- **Samsung Internet** 9+\n\n## 🎨 Customization\n\n### 🎛️ Adding New Waveforms\n1. Create waveform generation function in `script.js`\n2. Add option to HTML select element\n3. Update `createCustomWaveform()` method\n4. Test audio output and visualization\n\n### 🎨 Styling Modifications\n- **Colors**: Modify CSS variables in `style.css`\n- **Effects**: Adjust CRT effect parameters\n- **Layout**: Change grid configurations\n- **Animations**: Update keyframe definitions\n\n### 🔊 Audio Parameters\n- **Frequency Range**: Modify slider limits\n- **Waveform Curves**: Edit WaveShaper algorithms\n- **Visualization**: Update canvas rendering\n\n## 🤝 Contributing\n\n### 🎯 How to Contribute\n1. **Fork** the repository\n2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)\n3. **Commit** your changes (`git commit -m 'Add amazing feature'`)\n4. **Push** to the branch (`git push origin feature/amazing-feature`)\n5. **Open** a Pull Request\n\n### 📝 Contribution Guidelines\n- **Code Style**: Follow existing conventions\n- **Documentation**: Update README for new features\n- **Testing**: Ensure cross-browser compatibility\n- **Performance**: Optimize for mobile devices\n\n### 🐛 Bug Reports\n- **Issue Template**: Use provided templates\n- **Environment**: Specify browser and device\n- **Steps to Reproduce**: Detailed reproduction steps\n- **Expected Behavior**: Clear description of expected outcome\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n### 📜 License Summary\n- ✅ **Commercial use**: Allowed\n- ✅ **Modification**: Allowed\n- ✅ **Distribution**: Allowed\n- ✅ **Private use**: Allowed\n- ❌ **Liability**: No warranty provided\n- ❌ **Trademark**: No trademark grant\n\n## 🙏 Acknowledgments\n\n### 🎵 Audio API Inspiration\n- **Web Audio API** - W3C Audio Working Group\n- **Audio Synthesis** - Computer Music pioneers\n- **DSP Techniques** - Digital signal processing community\n\n### 🎨 Design Resources\n- **FontAwesome** - Icon library\n- **Glassmorphism** - Modern UI design trend\n- **CRT Effects** - Vintage monitor aesthetics\n\n### 🌟 Community\n- **GitHub** - Platform and community\n- **Open Source** - Collaborative development\n- **Web Audio Community** - Knowledge and inspiration\n\n## 📞 Contact\n\n### 🌐 Social Links\n- **GitHub**: [@independent-coder](https://github.com/independent-coder)\n- **Website**: [independent-coder.github.io](https://independent-coder.github.io/independent-coder/)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**🎵 Made with passion for sound synthesis and web technology 🎵**\n\n[⭐ 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)\n\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findependent-coder%2Fsinespace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findependent-coder%2Fsinespace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findependent-coder%2Fsinespace/lists"}