School of Science and Technology 科技學院
Computing Programmes 電腦學系
| Programme | Bachelor of Computing with Honours in Internet Technology Bachelor of Science with Honours in Computer Science |
| Supervisor | Dr. Keith Lee |
| Areas | Intelligent Applications |
| Year of Completion | 2025 |
This project aims to develop a web application for piano learner to learn music theory and piano techniques with practices in a more attractive way to increase student motivation to learn piano. The web application need user connect to a MIDI piano for real time interactions. The web application will exploit AI to transform music style for students to learn piano from diverse repertoire. Also, web applications will design more like a game. We want to create a solution that can make the music learning more engaging and personalize.
To reach our aim, we decided few of project objectives for a clearer direction.
Demonstration Video
Presentation Video
Front-End Application
Back-End Server
Figure 1: The GPIO Layout of the Raspberry Pi 4
Database Layer
Design Philosophy & Value Proposition
Figure 2: Software (UI function design)
AI Generation (ai_gen) Features
The AI Generation Interface consists of two key sections:
Educational & Engagement Benefits
Sustained Engagement:
With endless stylistic variations, users face fresh challenges that keep learning dynamic and rewarding.
Figure 3: AI Generation
Daily Task
Figure 4 shows that when the user presses the “Task” option, an interface containing the progress of all tasks will be displayed. The difference between this interface and the home page is that it not only displays the tasks that have been started but also lists all unstated tasks. This design allows users to clearly understand their learning progress and the tasks they can perform in the future.
Figure 4: Task (full Information)
Home page:
Example:
Ch1-1 Learn how to identify notes on the keyboard, such as middle C
Ch1-2 Using middle C as a base point, learn the notes that make up the C chord (C, E, G).
Ch1-3 Consolidate middle c knowledge
Figure 5: Main Page
Have video before each lesson, user always interesting visual more than text. Also provide information to summary all what video tech.
Figure 6: Piano Lesson
Figure 7: Hand Position
Music Import / Select
User can upload self-prepared midi file to perform practice or select midi file uploaded before. User can practice with her favorite music, make piano practice more enjoyable.
User can upload self-prepared midi file to perform practice or select midi file uploaded before. User can practice with her favorite music, make piano practice more enjoyable.
Figure 8: Music List
Playing Note Interface:
MIDI & Visual Keyboard Integration
The system communicates with a MIDI keyboard to reflect real-time input on a visual piano keyboard, alongside interactive note tracking and feedback.
Figure 9: Music Note
When finish playing, result page has been shown. Overview of performance measure can be found here. If click again button, will play music again. If click Back button, will back to main page. If click Detail button, will show detail of this play.
Figure 10: Performance Score
Various statistics of user learning performance and preference:
Contain statistics to indicate preference of user. Include recent 7 day of number of lessons completed, number of music played, number of task finish and best note played accuracy per music.
Figure 11: Preference
System will record each record user music played. User can easily find her practice record with systematic design.
Wav to MIDI conversion
this feature currently focuses on converting WAV audio files into MIDI format to support other key functionalities of the platform.
Figure 12: transform music input form
Customized Learning Experience:
This function empowers users to learn piano using music that resonates with them—familiar or personally meaningful—boosting motivation and aligning practice with individual progress and goals.
Figure 13: Generated music sheet (Twinkle Twinkle little star.wav)
Keyboard connection
To enhance the user experience, we’ve enabled keyboard controls for the virtual piano and display key notations to guide users on which keys correspond to which piano notes.
Figure 14: Keyboard connection UI
The project successfully met its objectives by creating a web platform that integrates gamification with real-time MIDI interaction to enhance beginner music education. This section highlights key achievements, limitations, and paths forward.
Key Achievements
Limitations
Jonathan handles all external affairs include business development, patents write up and public relations. He is frequently interviewed by media and is considered a pioneer in 3D printing products.
After graduating from OUHK, Krutz obtained an M.Sc. in Engineering Management from CityU. He is now completing his second master degree, M.Sc. in Biomedical Engineering, at CUHK. Krutz has a wide range of working experience. He has been with Siemens, VTech, and PCCW.
Hugo Leung Wai-yin, who graduated from his four-year programme in 2015, won the Best Paper Award for his ‘intelligent pill-dispenser’ design at the Institute of Electrical and Electronics Engineering’s International Conference on Consumer Electronics – China 2015.
The pill-dispenser alerts patients via sound and LED flashes to pre-set dosage and time intervals. Unlike units currently on the market, Hugo’s design connects to any mobile phone globally. In explaining how it works, he said: ‘There are three layers in the portable pillbox. The lowest level is a controller with various devices which can be connected to mobile phones in remote locations. Patients are alerted by a sound alarm and flashes. Should they fail to follow their prescribed regime, data can be sent via SMS to relatives and friends for follow up.’ The pill-dispenser has four medicine slots, plus a back-up with a LED alert, topped by a 500ml water bottle. It took Hugo three months of research and coding to complete his design, but he feels it was worth all his time and effort.
Hugo’s public examination results were disappointing and he was at a loss about his future before enrolling at the OUHK, which he now realizes was a major turning point in his life. He is grateful for the OUHK’s learning environment, its industry links and the positive guidance and encouragement from his teachers. The University is now exploring the commercial potential of his design with a pharmaceutical company. He hopes that this will benefit the elderly and chronically ill, as well as the society at large.
Soon after completing his studies, Hugo joined an automation technology company as an assistant engineer. He is responsible for the design and development of automation devices. The target is to minimize human labor and increase the quality of products. He is developing products which are used in various sections, including healthcare, manufacturing and consumer electronics.
| Course Code | Title | Credits | |
|---|---|---|---|
| COMP S321F | Advanced Database and Data Warehousing | 5 | |
| COMP S333F | Advanced Programming and AI Algorithms | 5 | |
| COMP S351F | Software Project Management | 5 | |
| COMP S362F | Concurrent and Network Programming | 5 | |
| COMP S363F | Distributed Systems and Parallel Computing | 5 | |
| COMP S382F | Data Mining and Analytics | 5 | |
| COMP S390F | Creative Programming for Games | 5 | |
| COMP S492F | Machine Learning | 5 | |
| ELEC S305F | Computer Networking | 5 | |
| ELEC S348F | IOT Security | 5 | |
| ELEC S371F | Digital Forensics | 5 | |
| ELEC S431F | Blockchain Technologies | 5 | |
| ELEC S425F | Computer and Network Security | 5 |
| Course Code | Title | Credits | |
|---|---|---|---|
| ELEC S201F | Basic Electronics | 5 | |
| IT S290F | Human Computer Interaction & User Experience Design | 5 | |
| STAT S251F | Statistical Data Analysis | 5 |
| Course Code | Title | Credits | |
|---|---|---|---|
| COMPS333F | Advanced Programming and AI Algorithms | 5 | |
| COMPS362F | Concurrent and Network Programming | 5 | |
| COMPS363F | Distributed Systems and Parallel Computing | 5 | |
| COMPS380F | Web Applications: Design and Development | 5 | |
| COMPS381F | Server-side Technologies and Cloud Computing | 5 | |
| COMPS382F | Data Mining and Analytics | 5 | |
| COMPS390F | Creative Programming for Games | 5 | |
| COMPS413F | Application Design and Development for Mobile Devices | 5 | |
| COMPS492F | Machine Learning | 5 | |
| ELECS305F | Computer Networking | 5 | |
| ELECS363F | Advanced Computer Design | 5 | |
| ELECS425F | Computer and Network Security | 5 |
