Tone the Ear

demo link | alternative demo link

A small Progressive Web App about ear training.

Features

• A virtual piano
  • Displays the currently played note
• A perfect pitch trainer
  • Plays a random note based on users' choice
  • Has a build-in timer and answer correctness check mechanism
  • Provides useful statistics to help users understand their progress
• A Transcription Practice Page
  • Uses the Onsets and Frames: Dual-Objective Piano Transcription Model to transcribe user uploaded non-midi audio files and example audio files
  • Uses libraries from @magenta/music to process user uploaded midi files and example midi files stored on Firebase
  • Visualizes the note sequence, audio spectrum (currently only support non-midi audio files), and midi in JSON format
  • Supports playback of uploaded audio file and the midi generated by the transcription model. Gives user options to mute either or both
• More to come...

Screenshots

Home:

Virtual Piano:

Perfect Pitch Training Menu:

Perfect Pitch Training:

Transcription Practice Menu:

Transcription Practice with midi file:

Transcription Practice with non-midi audio file:

Technologies

Main Technologies Used

• React
• Material-ui
• Firebase
• @magenta/music

Details about Implementation

• Set up the app with create-react-app
• Use Material Design from Material-UI
• Add mutiple 'pages' to this single page web app using react-router-dom
• Connect thie app to Firebase using react-redux-firebase
  • Using high order component
• Write Python script using Mido Library to generate the list of example files
• Retrieve example files from Firebase's storage
• Combine React's ref forwarding technique and recompose utility to interoperate third-party libraries with a component that takes a reference as parameter for its child component
• Use react virtualized table to display large content
• Make a workaround solution feasible for users to choose for a large input problem of TensorFlow.js on Chrome

Disclaimer

My only knowledge about music comes from the experience in learning an unpopular music instrument that requires almost zero knowledge about music theory.

Create an issue if there is something wrong, please.

Credits

Example Files

The midi files are from Classical Piano Midi Page and are distributed under cc-by-sa Germany License.

The full list of sources and authors of the example audio files can be found here.

Ideas

Thank @tianlanzi, a pianist, for the instructions and ideas about transcription practice and professional feedback.