A modern React + TypeScript + Vite reimplementation of the GitHub Audio project that converts real-time GitHub events into beautiful music and visualizations.

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.

• 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

• 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

• Node.js 18+
• npm or yarn

1. Clone the repository:

git clone https://github.com/debugger22/github-audio.git
cd github-audio/react-app

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

5. Click the play button to start listening to GitHub's musical symphony!

npm run build

The built files will be in the dist/ directory.

1. Start Listening: Click the large play button to begin
2. 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
3. Adjust Volume: Use the volume slider in the top right
4. Filter Events: Enter organization or repository names to filter specific events
5. 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
6. Enjoy: Watch the visual effects and listen to the music generated by GitHub activity

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

• 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

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

The app can be deployed to any static hosting service:

• Vercel
• Netlify
• GitHub Pages
• AWS S3 + CloudFront

• Original GitHub Audio - The original vanilla JavaScript version
• Rust Server - The backend WebSocket server

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.

Created by @debugger22

This project is not affiliated with GitHub Inc. in any way.

• The Next Web
• Product Hunt