GitHub Audio - React Edition
A modern React + TypeScript + Vite reimplementation of the GitHub Audio project that converts real-time GitHub events into beautiful music and visualizations.
🎵 What is GitHub Audio?
GitHub Audio listens to events happening across GitHub and converts them into music notes and visual effects. Each type of GitHub event (pushes, issues, pull requests, etc.) produces different sounds and visual elements, creating a unique musical experience from the world's largest code repository.
✨ Features
- Real-time GitHub Events: Connects to live GitHub event streams via WebSocket
- Audio Generation: Different GitHub events trigger different musical notes
- Push events → Celesta sounds
- Issues/PRs → Clav sounds
- Random swell sounds for ambiance
- Dual Visualization Modes:
- 2D Mode: D3.js powered animations with colored circles for each event
- 3D Mode: Three.js powered 3D space with colorful floating spheres, a realistic fireball sun, gravitational effects, and a stunning starfield with 10,000 realistically twinkling stars
- Interactive 3D Experience: Orbit controls for zooming, panning, and rotating the 3D scene with realistic gravitational pull animations
- Event Filtering: Filter events by organization or repository name
- Volume Control: Adjustable audio volume
- Responsive Design: Works on desktop and mobile devices
- Modern Architecture: Built with React, TypeScript, styled-components, and Vite
🛠️ Tech Stack
- Frontend Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: styled-components (CSS-in-JS)
- Audio: Howler.js
- 2D Visualizations: D3.js
- 3D Visualizations: Three.js (vanilla implementation for maximum compatibility)
- State Management: React Hooks
- WebSockets: Native WebSocket API
🚀 Getting Started
Prerequisites
- Node.js 18+
- npm or yarn
Installation
- Clone the repository:
git clone https://github.com/debugger22/github-audio.git
cd github-audio/react-app
- Install dependencies:
npm install
- Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173 -
Click the play button to start listening to GitHub's musical symphony!
Building for Production
npm run build
The built files will be in the dist/ directory.
🎮 How to Use
- Start Listening: Click the large play button to begin
- Choose Visualization Mode: Use the 2D/3D toggle in the bottom right corner
- 2D Mode: Classic flat visualization with animated circles
- 3D Mode: Immersive 3D space with floating spheres that are gradually pulled into a realistic fireball sun
- Adjust Volume: Use the volume slider in the top right
- Filter Events: Enter organization or repository names to filter specific events
- 3D Navigation (3D mode only):
- Mouse drag: Rotate the camera around the scene
- Mouse wheel: Zoom in and out
- Right-click drag: Pan the camera
- Enjoy: Watch the visual effects and listen to the music generated by GitHub activity
🎨 Event Types & Sounds
| GitHub Event | Sound | Visual Color | Description |
|---|---|---|---|
| PushEvent | Celesta | Purple | Code pushes to repositories |
| CreateEvent | Celesta | Red | Repository/branch creation |
| IssuesEvent | Clav | Green | Issue activities |
| PullRequestEvent | Clav | Green | Pull request activities |
| IssueCommentEvent | Clav | Green | Comments on issues/PRs |
| WatchEvent | Celesta | Orange | Repository stars |
| ForkEvent | Celesta | Blue | Repository forks |
| ReleaseEvent | Celesta | Orange | New releases |
| DeleteEvent | Celesta | Red | Deletions |
🔧 Development
Project Structure
src/
├── components/ # React components
│ └── Visualization.tsx
├── hooks/ # Custom React hooks
│ ├── useAudio.ts # Audio management
│ └── useWebSocket.ts # WebSocket connection
├── App.tsx # Main application component
├── main.tsx # Application entry point
└── index.css # Global styles
Key Components
- App.tsx: Main application component with layout and state management
- Visualization.tsx: D3.js-powered visual effects component
- useAudio.ts: Custom hook for managing Howler.js audio
- useWebSocket.ts: Custom hook for GitHub event streaming
Scripts
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
🌐 Deployment
The app can be deployed to any static hosting service:
- Vercel
- Netlify
- GitHub Pages
- AWS S3 + CloudFront
🔗 Related Projects
- Original GitHub Audio - The original vanilla JavaScript version
- Rust Server - The backend WebSocket server
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
👨💻 Author
Created by @debugger22
⚠️ Disclaimer
This project is not affiliated with GitHub Inc. in any way.