Project: Creative Apps - Music Composer

Track

Creative Apps (GitHub Copilot)

Project Name

music-composer

GitHub Username

@Haseeb-MernStack

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

Review the linked repository's README and project structure; the issue names React 18, TypeScript, Vite, Zustand, Tone.js, and Tailwind CSS but no target file or test. Run npm install and npm run dev, then compare the running app with the submission description; the issue provides no concrete completion criterion beyond the project submission.