a Three.js, React, and Tone.js interactive project.
Features
Reviving the old project, I wanted to make sure the app will function more than showing a piano floating in a white void. Ok sure, it’s now placed in a peach void, but more than that, my plan was to make the piano interactive and be more visually appealing while keeping good user experiences.
The challenge for UX was especially with mobile devices not only for the small screen sizes their hardware limitations. Since the tactile will be too microscopic to hit and there are iOS conflicts with Tone.js at the time of the build, I decided to show a warning for the limitations and disable some features that are heavier to process. Regardless, a user can still interact with the piano on a mobile device if they choose to.
With Tone.JS, the app is able to support both musical typing with a normal keyboard and a MIDIÂ Controller keyboard. Users can also point and click on desktop and tap on touch devices. A set of 7 songs I worked on are available for demo playback as well.
A metronome is also interactive and can be turned on. Other settings are also available to modify things such as the volume, tempo of both the metronome and demo playback, transposition of keys, pedals that either soften sustain or create a sostenuto effect, reverb knobs, as well as 4 different voices for the piano.
Assets
More than code work was required to revive the project. the 3D model was optimized for web using blender and maps for the shader material were modified in Photoshop as well. Some buttons were modified and or removed to reflect the functionalities I wanted to include. Though 3D modeling is a new role I’ve taken on and has been challenging, it was also enjoyable and a true learning experience.
On the audio side, I was able to use my musical skillsets I have never used on a web project before. Logic Pro was used to clean up the MIDI tracks for the song demos to optimize for playback on the web. Up to 7 songs are added not only for flexing my musical capabilities, but also to test the capacity of polyphony, and automated BPM and control changes. A few songs are from popular cartoon tv shows, OPM songs, and song covers, some published on several music platforms and some that I’m still working on.
Samples used were also processed, especially the bark samples of my dog Mochi which is used for one of the voice presets (she does not like hearing her own voice recording).