{"id":29458341,"url":"https://github.com/gurghet/log-sonification-playground","last_synced_at":"2025-07-13T23:37:28.502Z","repository":{"id":301981165,"uuid":"1010843078","full_name":"gurghet/log-sonification-playground","owner":"gurghet","description":"Real-time audio visualization tool that transforms server logs and system metrics into immersive soundscapes using p5.js","archived":false,"fork":false,"pushed_at":"2025-06-29T23:13:38.000Z","size":327,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-30T00:21:06.183Z","etag":null,"topics":["audio","creative-coding","data-visualization","javascript","logs","metrics","monitoring","p5js","sonification","web-audio"],"latest_commit_sha":null,"homepage":null,"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/gurghet.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2025-06-29T22:58:42.000Z","updated_at":"2025-06-29T23:13:40.000Z","dependencies_parsed_at":"2025-06-30T00:21:08.195Z","dependency_job_id":"4ddcf71b-1947-4134-814c-370f56e8720b","html_url":"https://github.com/gurghet/log-sonification-playground","commit_stats":null,"previous_names":["gurghet/log-sonification-playground"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gurghet/log-sonification-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurghet%2Flog-sonification-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurghet%2Flog-sonification-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurghet%2Flog-sonification-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurghet%2Flog-sonification-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gurghet","download_url":"https://codeload.github.com/gurghet/log-sonification-playground/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gurghet%2Flog-sonification-playground/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265222997,"owners_count":23730327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","creative-coding","data-visualization","javascript","logs","metrics","monitoring","p5js","sonification","web-audio"],"created_at":"2025-07-13T23:37:15.801Z","updated_at":"2025-07-13T23:37:28.473Z","avatar_url":"https://github.com/gurghet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Log Sonification Playground\n\nA real-time audio visualization tool that transforms server logs and system metrics into immersive soundscapes using p5.js.\n\n## Live Demo\n\n🎵 **[Try the demo](https://gurghet.github.io/log-sonification-playground/demo.html)** - Pre-filled with examples, just click Play!\n\n📝 **[Open full editor](https://gurghet.github.io/log-sonification-playground/)** - For your own log data\n\n![Log Sonification in Action](screenshot.png)\n\n## Features\n\n### 🎵 Log Sonification\n- **JSON log format support** with timestamp-based scheduling\n- **Acoustic fingerprinting** - different message types trigger distinct waveforms:\n  - Network issues → sawtooth waves\n  - Security/auth → square waves  \n  - API calls → triangle waves\n  - Database operations → sine waves\n- **Dynamic sound properties** based on log characteristics:\n  - Log level → frequency (ERROR=low, WARN=mid, INFO=high, DEBUG=highest)\n  - Message complexity → envelope duration\n  - Response time → amplitude\n  - Message length → amplitude modulation\n\n### 📊 System Metrics Background\n- **CPU metrics integration** from Prometheus JSON format\n- **Background white noise** that correlates with CPU usage percentage\n- **Smooth amplitude transitions** between metric data points\n- **Multi-pod averaging** for clean audio representation\n\n### 🎛️ Real-time Visualization\n- **Split-panel debug view** with CPU metrics on left, log details on right\n- **Live CPU timeline** showing 1-minute sliding window with current position indicator\n- **Active sound tracking** with progress bars and acoustic properties\n- **Visual waveform indicators** using shapes (◆ sine, ▲ triangle, ■ square, ▼ sawtooth)\n\n### ⚙️ Configuration\n- **Timezone offset adjustment** for log timestamp synchronization\n- **Hot reloading** development server for rapid iteration\n- **Responsive design** for different screen sizes\n\n## Quick Start\n\n1. **Install dependencies**:\n   ```bash\n   npm install\n   ```\n\n2. **Start development server**:\n   ```bash\n   npm run dev\n   ```\n\n3. **Open browser** to `http://localhost:8080`\n\n4. **Paste your data**:\n   - JSON server logs in the main textarea\n   - Prometheus CPU metrics in the CPU section\n   - Adjust timezone offset if needed (default: +2 hours)\n\n5. **Click Play** to start the sonification\n\n## Data Formats\n\n### JSON Logs\n```json\n{\"timestamp\":\"2025-06-27 08:47:40.463\",\"level\":\"INFO\",\"thread\":\"grpc-default-executor-6\",\"logger\":\"com.example.grpc.GrpcLoggingRequest\",\"message\":\"[gRPC] Call received: method=com.example.grpc.ping.PingService/Ping, from=/192.168.1.100:44922\",\"context\":\"default\"}\n```\n\n### Prometheus CPU Metrics\n```json\n{\"status\":\"success\",\"data\":{\"resultType\":\"matrix\",\"result\":[{\"metric\":{\"container\":\"app-service\",\"pod\":\"app-service-0\"},\"values\":[[1751234003,\"2.44\"],[1751234018,\"2.48\"]]}]}}\n```\n\n## Technology Stack\n\n- **p5.js** - Creative coding framework for audio synthesis and visualization\n- **p5.sound** - Web Audio API wrapper for oscillators, envelopes, and effects\n- **live-server** - Hot reloading development server\n- **Vanilla JS** - No additional frameworks for maximum performance\n\n## Audio Architecture\n\n- **Dynamic oscillator pools** - Creates new oscillators for overlapping sounds to enable natural audio interference\n- **ADSR envelopes** - Configurable attack, decay, sustain, release for different message complexities\n- **Frequency mapping** - Log levels mapped to distinct frequency ranges\n- **Amplitude modulation** - Multiple factors influence volume (response time, message length, log level)\n- **Background noise layer** - CPU metrics drive continuous white noise amplitude\n\n## Development\n\nThe project uses hot reloading for rapid development. Changes to any file automatically refresh the browser. The access log is ignored to prevent infinite reload loops.\n\nBuilt for real-time monitoring of distributed systems through immersive audio feedback.\n\n## Quick Local Setup\n\n```bash\ngit clone https://github.com/gurghet/log-sonification-playground.git\ncd log-sonification-playground\nnpm run dev\n# Open http://localhost:8080\n```\n\n\u003e 💡 The `example-logs.json` and `example-cpu.json` files contain sample data for testing\n\n## Use Cases\n\n- **DevOps Monitoring** - Turn server logs into ambient soundscapes for background monitoring\n- **Security Operations** - Audio alerts for suspicious patterns in authentication logs  \n- **Performance Analysis** - Correlate CPU spikes with log events through synchronized audio\n- **Data Sonification Research** - Explore acoustic representations of temporal data\n- **Creative Coding** - Generate music from system metrics and application events\n- **Accessibility** - Audio feedback for visually impaired system administrators\n\n## Related Projects\n\nIf you're interested in log sonification, you might also like:\n- [Sonification Handbook](https://sonification.de/handbook/) - Academic resource on data sonification\n- [tone.js](https://tonejs.github.io/) - Web Audio framework for interactive music\n- [D3.js Audio](https://observablehq.com/@d3/audio) - Data-driven audio visualizations\n- [WebPd](https://github.com/sebpiq/WebPd) - Pure Data in the browser for audio synthesis\n\n## Contributing\n\nContributions welcome! Areas for improvement:\n- Additional audio synthesis techniques (FM, granular synthesis)\n- Machine learning for pattern recognition in logs  \n- WebRTC streaming for collaborative monitoring sessions\n- Integration with popular monitoring platforms (Grafana, Datadog)\n- Mobile-responsive touch controls\n- Additional metric types (memory, network, disk I/O)\n\n## License\n\nMIT License - Feel free to use in your own projects!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgurghet%2Flog-sonification-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgurghet%2Flog-sonification-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgurghet%2Flog-sonification-playground/lists"}