Compare Proposal

Nothing to compare.

Create a midi-based music web page

  • Posted at : 2 months ago
  • Post Similar Project


Posted By -


Projects Posted : 1
Projects Paid : 0
Services Purchased : 0
Total Spent :
Feedbacks : 0 %

Project Details show (+) hide (-)


Create a web based piano application that is able to compare the midi notes in a song to what the actual user is playing. The user will be sending inputs through a midi-based Digital keyboard. This application must capture those midi notes and compare it with the original song. It's a single page application but there are 2 main sections of the page

Ingesting midi files as songs
⦁ Display the song/midi file as a musical notation on the screen. 
⦁ The application must be able ingest any midi file and display as musical notes with base clef and treble clef. We can provide some examples
⦁ Users can adjust the tempo to a slower beats per minute (bpm) or higher bpm
⦁ Clicking on Demo must play the midi file that's available as song as per the tempo set by the user

Play mode
⦁ When the user hits play button, based on the tempo of the song, the musical notes keep flowing from right to left
⦁ At the sametime, the application must capture the notes played by the user through Digital keyboard/piano as midi notes
⦁ Compare the song (midi file ingested) with what the user is playing through the Digital keyboard. Based on the comparison, the UI must display
⦁ Green - If there's a match between the notes
⦁ Red - if there's mismatch between the notes
⦁ The comparison should also take into account the temp at which the user is playing
⦁ Display progress bar to show how far the user had progressed while playing the song
⦁ Display the actual keys pressed by the user in the keyboard display show below with the keys label
⦁ Keyboard display must match the number of keys present in user's device
⦁ User must be able to stop the play mode at anytime

The web development must match with the UI design shown.

Design Preferences: Based on the design attached
Static pages: Single play page that has the song as well as what user is playing
Preferred Customizations:
Building based on the UI design provided would be sufficient
Technology Preferences: Front end - ReactJS, Backend - Cloud based solution (Azure or AWS)