Project: Creative Apps - Music Composer #24
Description
Track
Creative Apps (GitHub Copilot)
Project Name
music-composer
GitHub Username
Repository URL
https://github.com/Haseeb-MernStack/Emotion-Based-Music-Generator-Piano-Roll-Sequencer
Project Description
Music Composer is a modern web-based interactive music generation and sequencing application built for the Microsoft Agents League 2026 – Creative Apps track.
The application transforms musical ideas into structured compositions through emotion-based generation, real-time synthesis, and an interactive piano roll interface.
Users can:
• Generate melodies based on emotional input (e.g., happy, sad, dark, energetic)
• Visualize generated notes inside a structured piano roll grid
• Click cells to manually compose or edit melodies
• Play notes using their computer keyboard
• Hear real-time sound synthesis directly in the browser
• Modify compositions step-by-step in a sequencer-style interface
• Prepare compositions for future MIDI export
The project is built using React 18, TypeScript, Vite, Zustand for state management, and Tone.js for real-time Web Audio synthesis.
The architecture separates musical logic (emotion engine, scale logic, chord structure) from UI rendering (piano roll, controls), making the system modular and scalable.
GitHub Copilot was used extensively during development for:
• Generating reusable React components
• Suggesting TypeScript types and interfaces
• Assisting with state management logic
• Debugging AudioContext and browser gesture restrictions
• Structuring the piano roll grid system
• Improving project architecture and modular separation
The project follows clean code principles and modular folder structure for scalability and future enhancements such as MIDI export and chord progression logic.
Demo Video or Screenshots
Demo Video: https://www.youtube.com/watch?v=5Tgks1aBTRQ
Screenshots: https://github.com/Haseeb-MernStack/Emotion-Based-Music-Generator-Piano-Roll-Sequencer/screenshots
Primary Programming Language
TypeScript/JavaScript
Key Technologies Used
React 18 — Frontend framework
TypeScript — Type-safe development
Vite — Fast build tool and development server
Zustand — Lightweight state management
Tone.js — Web Audio synthesis engine
Tailwind CSS — Utility-first styling
GitHub Copilot — AI-assisted development
Web Audio API — Browser-based audio engine
Git & GitHub — Version control and hosting
Submission Type
Individual
Team Members
One Man Army
Submission Requirements
- My project meets the track-specific challenge requirements
- My repository includes a comprehensive README.md with setup instructions
- My code does not contain hardcoded API keys or secrets
- I have included demo materials (video or screenshots)
- My project is my own work with proper attribution for any third-party code
- I agree to the Code of Conduct
- I have read and agree to the Disclaimer
- My submission does NOT contain any confidential, proprietary, or sensitive information
- I confirm I have the rights to submit this content and grant the necessary licenses
Quick Setup Summary
Clone the repository:
git clone https://github.com/Haseeb-MernStack/Emotion-Based-Music-Generator-Piano-Roll-Sequencer
Install dependencies:
npm install
Run development server:
npm run dev
Open browser at:
http://localhost:5173
Technical Highlights
Full frontend architecture — Built a complete interactive music application using React and modular component architecture with clean separation between UI and engine logic.
Interactive piano roll sequencer — Developed a dynamic grid-based note system that maps vertical pitch values and horizontal time steps, allowing users to compose visually.
Emotion-based melody engine — Implemented structured musical logic that generates note sequences based on emotional states, demonstrating programmatic music theory integration.
Real-time Web Audio synthesis — Integrated Tone.js to generate live audio directly in the browser, handling AudioContext gesture restrictions properly.
Keyboard-to-note mapping — Enabled users to play notes using computer keyboard input mapped to musical pitch values.
State-driven UI rendering — Used Zustand for centralized state management, ensuring the piano roll, audio playback, and generation engine share a single source of truth.
Scalable architecture — Designed folder structure separating engine logic, UI components, and state layer, making the project extensible for MIDI export and advanced sequencing features.
GitHub Copilot integration — Used Copilot for component generation, refactoring suggestions, TypeScript typing improvements, and debugging assistance during development.
Challenges & Learnings
Challenges:
• Browser AudioContext restrictions — Learned how to properly initialize Tone.js after user gestures to avoid playback blocking.
• Grid rendering performance — Ensured unique React keys and optimized rendering for grid-based layout.
• State synchronization — Managed synchronization between visual piano roll and audio playback.
• Musical structure design — Implemented scalable note and scale logic for emotion-based generation.
Learnings:
• How to build a modular music engine in the browser.
• How Web Audio works inside modern browsers.
• How to manage complex UI state with lightweight state management tools.
• How to design scalable frontend architecture for creative applications.
• How GitHub Copilot accelerates structured development workflows.
Contact Information
https://www.linkedin.com/in/haseeb-mernstack/ or https://github.com/Haseeb-MernStack or mernstackerr@gmail.com
Country/Region
Pakistan