Context: This project continues and expands the Music Education Interface (MEI), an educational web app that supports learners in building core instrumental skills (rhythm, fingering, intonation, articulation, timbre) through dedicated interactive modules. Learn more about the current app here: Alberto Acquilino
MEI already runs in the browser and is also available as a beta app on iOS and Android. The roadmap highlights mobile-first experiences and new practice components as key next steps.
Project description: The main goal is to make MEI robust, responsive and maintainable across mobile devices, and to ensure reliable store-ready builds for both Apple App Store and Google Play. The contributor is expected to work on mobile release engineering, including managing iOS and Android store builds and submission using existing developer accounts. In the second half of the project, the contributor will implement a new learning module: a Relative Intonation exercise that trains students to play in tune with what they hear, using the app’s existing score display, audio generation and tuner components. This component will be developed after the mobile app is stable and successfully published, and will reuse the existing modular architecture of MEI. By the end of GSoC, the project will deliver:
- A mobile-first MEI app that is responsive across screen sizes, stable and easier to maintain.
- A documented, repeatable release workflow for iOS and Android (build, versioning, store submission readiness & bug triage), building on the existing Capacitor setup.
- A new relative intonation exercise module, integrated into the current app using already-existing musical notation, synthesis and tuner features.
Why this project matters: Many music apps help with timing (metronomes) and absolute pitch (tuners), but real ensemble playing requires relative intonation: the ability of staying in tune with another sound (a partner musician, a synthesized sound; at unison or within a chord). Students often look at the tuner instead of learning to listen and adjust. This module trains the ear by letting the learner:
- See a note on a staff (music notation).
- Hear a reference sound in headphones (generated by the app).
- Play while matching the reference by ear, optionally using the tuner as training wheels.
The exercise supports two learning modes:
- Unison matching: the student plays the same note they hear.
- Chord completion: the app plays a chord with one note missing, and the student plays the missing note so the result sounds locked in and stable.
Objectives :-
Part A: Mobile UI/UX + Store Release Hardening (continuative)
- Refactor UI to be fully responsive (mobile-first layouts; small/large phones; tablets) and ensure consistent behavior across iOS, Android, and browser targets.
- Stabilize the mobile app release pipeline:
- Ensure reproducible builds with Ionic + Angular + Capacitor.
- Handle versioning correctly (iOS/Android) and document the process.
- Bug triage and fixes focused on real-device issues (audio I/O, permissions, latency, UI glitches, crashes, edge cases).
- Enable dark mode for the web-app
- Add screen reader support (enhanced accessibility)
- Improve developer documentation so future contributors can publish updates confidently.
Part B: New Module: “Relative Intonation” Exercise
- Design and implement a new exercise that combines existing components:
- Score rendering (display notes to play).
- Audio generation (play reference notes/chords).
- Tuner / pitch detection (optional live feedback).
- Implement the two modes:
- Mode 1: Unison (match pitch with a synthesized reference of the same instrument type).
- Mode 2: Chord completion (play the missing chord tone).
- Provide a simple scoring/feedback loop (e.g., in-tune percentage over time, stability indicator, and optional tuner view toggle).
Technologies and Frameworks
- Ionic + Angular + TypeScript (core stack).
- JavaScript/Web Audio (audio synthesis/playback).
- Capacitor iOS/Android toolchain (store builds and native integration).
- Responsive CSS / UI patterns for multi-screen support.
Suggested timeline (12 weeks)
- Weeks 1-2: onboarding, codebase exploration, reproduce local builds, identify top mobile pain points, define responsive layout plan.
- Weeks 3-6: implement responsive refactor, fix priority bugs, improve release docs; verify on real devices.
- Weeks 7-8: design Relative Intonation exercise UX and data flow, finalize spec, build scaffolding.
- Weeks 9-11: implement Mode 1 and Mode 2, integrate tuner option, add feedback/scoring, polish UX.
- Week 12: stabilization, documentation, final demo, final bugfix pass.
What can I do before GSoC?
- Familiarize yourself with the existing HarmonyHub codebase, particularly the front-end architecture.
- Explore responsive design principles and best practices for cross-platform development.
- Experiment with Angular and Ionic to understand their capabilities for building modular, reusable components.
Skills Required
- Strong Ionic + Angular + TypeScript/JavaScript skills.
- Proven experience building, releasing, and maintaining mobile apps on iOS and Android, including hands-on familiarity with App Store Connect and Google Play Console workflows.
- Understanding of responsive design and real-device testing.
- Basic comfort with audio concepts (latency, microphone permissions, pitch detection).
Bonus Skills
- Experience developing native mobile apps for iOS and Android.
- Music performance experience.
Skill level: Advanced
Time Commitment: Large (approx. 350 hours)
Lead mentor: Alberto Acquilino (aacquili@uwo.ca)
Backup mentors:
- Mirko D’Andrea (mirko.dandrea@gmail.com)
- Komal Bhalotia (bhalotiakomal60@gmail.com)
- Priyanshu (techarena955@gmail.com)
Project affiliation: This project is part of the research initiatives at Western University, aiming to improve music education through digital means.
GitHub repository: GitHub - albertoacquilino/music_education_interface · GitHub
Project website: Music Education Interface GSoC
GsoC 2025 Final Report: GSoC 2025: INCF | HarmonyHub: Front-end interface refractoring and expansion for multi-instrument support · GitHub
Tech Keywords: Front-End Development, Mobile App Development, Angular, Ionic, Responsive Design, Web Audio, Accessibility, UI/UX Design, Music Education