Transform your code into music. Hear your logic, feel your bugs, compose with commits.

Symphony.js is an interactive web-based development tool that merges a code editor with a generative audio engine, providing real-time auditory feedback about code structure, quality, and flow. Write code and experience it as music.

• 5-second splash screen with animated logo and typewriter text effect
• Fade-in background music that establishes the audio-visual nature
• Skip functionality - press any key or click to jump straight to the editor
• Responsive design that looks great on all devices

• Hear your code quality as you type with intelligent mood-based audio
• Three distinct moods that reflect code characteristics:
  • 🎼 HARMONIOUS: Clean, well-documented code → Major keys, smooth chords
  • 🎸 DISCORDANT: Syntax errors, malformed code → Minor keys, chaotic sounds
  • ⚡ INTENSE: Complex algorithms, deep nesting → Fast tempo, high energy

• Rhythm Instrument: Represents execution flow and typing patterns
• Harmony Instrument: Chord progressions based on code complexity
• Melody Instrument: Function calls and significant code events

• Generate 15-second musical pieces from your entire file
• Code structure mapped to musical phrases:
  • Imports → Steady beat patterns
  • Functions → Melodic development
  • Returns → Resolving chords

• Real-time waveform visualizer showing audio output
• Code quality indicators with visual metrics
• Split-screen layout: Editor on left, visualizer on right
• Dark theme optimized for extended coding sessions

• Mute Bugs: Silence error sounds while debugging
• Play Commit: Generate full file composition
• Language Support: JavaScript, TypeScript, Python
• Keyboard Shortcuts: Quick access to all features

• Node.js 18+ and npm
• Modern browser with Web Audio API support (Chrome, Firefox, Safari, Edge)

# Clone the repository
git clone https://github.com/akashsahu54/symphony-js.git
cd symphony-js

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

1. Watch the intro - Experience the 5-second splash screen (or press any key to skip)
2. Start typing code in the Monaco Editor
3. Listen as Symphony.js analyzes and sonifies your code
4. Click "Play Commit" to hear your entire file as a composition
5. Toggle "Mute Bugs" to silence error sounds while fixing issues

• Multi-sensory learning: Audio + visual feedback accelerates skill development
• Immediate error detection: Hear mistakes as you make them
• Pattern recognition: Internalize code quality through consistent audio cues
• Engaging practice: Gamification makes coding more enjoyable

• Background awareness: Audio alerts without breaking visual focus
• Error prevention: Catch syntax issues in real-time
• Complexity monitoring: Intense sounds signal when code needs refactoring
• Flow state: Maintain focus with ambient audio feedback

• Algorithmic music composition: Code becomes a creative medium
• Live coding performances: Use for algorithmic music shows
• Artistic expression: Generate unique soundscapes from code
• Educational demonstrations: Make code structure audible for teaching

• Audio feedback for developers with visual impairments
• Alternative quality indicators beyond visual cues
• Multi-modal interface supports different learning styles

• React 19.2: UI framework with hooks and context
• TypeScript 5.9: Type-safe development with strict mode
• Vite: Lightning-fast build tool and dev server
• Tone.js 15.1: Web Audio API framework for synthesis
• Monaco Editor 4.7: VS Code's editor component

symphony-js/
├── src/
│   ├── components/       # React UI components
│   │   ├── EditorPanel.tsx
│   │   ├── WaveformVisualizer.tsx
│   │   ├── ControlBar.tsx
│   │   └── ...
│   ├── contexts/         # React context providers
│   │   └── AudioEngineContext.tsx
│   ├── services/         # Business logic
│   │   ├── CodeAnalyzer.ts
│   │   ├── InstrumentManager.ts
│   │   └── PythonRunner.ts
│   ├── hooks/            # Custom React hooks
│   ├── types/            # TypeScript definitions
│   └── utils/            # Helper functions
├── public/               # Static assets
└── .kiro/                # Kiro AI specs and config

IntroScreen: 5-second splash screen with animations and music
IntroLogo: Animated SVG logo with pulse effect
CodeAnalyzer: Analyzes code structure, detects errors, calculates complexity
InstrumentManager: Manages Tone.js instruments and audio synthesis
AudioEngineContext: Global state for audio engine and playback
EditorPanel: Monaco Editor wrapper with language support
WaveformVisualizer: Real-time audio visualization canvas

Triggered by:

• Clean syntax with no errors
• Well-documented code (comments present)
• Moderate complexity (nesting depth ≤ 2)
• Proper code structure

Triggered by:

• Syntax errors or warnings
• Malformed code structure
• Missing brackets or semicolons
• Undefined variables

Triggered by:

• Complex algorithms
• Deep nesting (depth > 4)
• Recursive functions
• High cyclomatic complexity

Try these examples to experience different moods:

HARMONIOUS Example:

// Well-documented function
function calculateSum(a, b) {
  return a + b;
}

DISCORDANT Example:

// Syntax errors
fucntion broken( {
  retunr undefined
}

INTENSE Example:

// Complex matrix
def matrix_multiply(A, B):
    """
    Multiplies two matrices A and B.
    This is a classic example of high algorithmic complexity.
    """
    if len(A[0]) != len(B):
        print("Error: Incompatible matrix dimensions")
        return None

    # Initialize the result matrix with zeros
    result = [[0 for _ in range(len(B[0]))] for _ in range(len(A))]

    # Iterate through rows of A
    for i in range(len(A)):
        # Iterate through columns of B
        for j in range(len(B[0])):
            # Iterate through rows of B
            for k in range(len(B)):
                result[i][j] += A[i][k] * B[k][j]
    
    return result

# Example matrices:
matrix1 = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

matrix2 = [
    [9, 8, 7],
    [6, 5, 4],
    [3, 2, 1]
]

# This call should sound intense
print("Calculating matrix multiplication...")
product = matrix_multiply(matrix1, matrix2)
print(product)

# Start development server with HMR
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests (single execution)
npm run test

# Lint code
npm run lint

# Run all tests once
npm run test

# Run tests with UI
npm run test -- --ui

# Run specific test file
npm run test CodeAnalyzer.test.ts

npm run build

Output will be in the dist/ directory, ready for deployment to any static hosting service.

Symphony.js requires Web Audio API support:

• ✅ Chrome 34+
• ✅ Firefox 25+
• ✅ Safari 14.1+
• ✅ Edge 79+

Falls back to visual-only mode if audio is unavailable.

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and add tests
4. Run tests: npm run test
5. Commit your changes: git commit -m 'Add amazing feature'
6. Push to branch: git push origin feature/amazing-feature
7. Open a Pull Request

• Follow TypeScript strict mode conventions
• Write tests for new features
• Update documentation for API changes
• Follow existing code style (ESLint enforced)
• Keep components small and focused

• Symphony.js Requirements - Core feature requirements
• Symphony.js Design - Architecture and design decisions
• Symphony.js Tasks - Development roadmap

• Intro Screen Requirements - Splash screen requirements
• Intro Screen Design - Intro screen design specifications
• Intro Screen Tasks - Implementation tasks

• Technology Stack - Tech stack details
• Project Structure - File organization

• ✅ Engaging intro screen with animations and music
• ✅ Real-time audio feedback with three moods
• ✅ Commit compositions (15-second pieces)
• ✅ Multi-language support (JS, TS, Python)
• ✅ Visual waveform display
• ✅ Mute controls and keyboard shortcuts

• 🔄 User accounts and cloud save
• 🔄 Custom instrument selection
• 🔄 Export compositions (MIDI/WAV)
• 🔄 Mobile responsive design
• 🔄 More language support (Java, C++, Rust)

• 🔮 AI-powered code analysis and suggestions
• 🔮 Collaborative real-time coding
• 🔮 VS Code extension
• 🔮 Custom theme marketplace
• 🔮 Educational curriculum integration

• Large files (>1000 lines) use sampling for performance
• Audio requires user interaction to start (browser security)
• Some browsers may require headphones for best experience

Report issues on GitHub Issues.

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

• Monaco Editor - Microsoft's excellent code editor
• Tone.js - Powerful Web Audio framework
• React Team - For the amazing framework
• Vite Team - For blazing fast tooling

If you find Symphony.js helpful, please consider:

• ⭐ Starring the repository
• 🐦 Sharing on social media
• 🐛 Reporting bugs
• 💡 Suggesting features
• 🤝 Contributing code

You can contact me directly at akashsahu64158@gmail.com

Made with ❤️ and 🎵 by developer, for developers

Experience code in a whole new way. Start composing today.