Project inheritated by AVANT group ©AVANT 2024/2025, Januarry/2025 AVANT group will begin work on a new verision
·
PianoBlocksApp is a web application made for hobbists/enthusiasts of playing piano. This app provides a very simple way to visualize a persons piano playing, by reading his midi File.
Link to latest version https://react-piano-player-63qjc9wca-tzmcion.vercel.app/
I always wanted to create piano Tutorials like big youtubers, but I didn't want to pay for professional software, so I created it myself :). This app makes it super easy to create piano tutorials, it delivers some basic effects, basic sound, and if you can't record a midi file with softwares, you can record it there. Also with recording app gives you basic (super basic) sheet music. On top of that, app gives you plenty of ways to customize effects, colors, spped of playing. With this app you can learn and have fun.
- React
- Typescript
- HTML/CSS
- Sass (scss)
- Redux (a little)
- NPM library
-
User input
User Drags/chooses Midi file. He can configure options before that, or he can play demo file, then the Midi file is automatically imported -
Website proceses it
Website saves the file to localstorage and it procesess it. It uses a "/helpers/getNoteEventsJSON.ts" file (function) to remove all unnecesarry events. -
Website creates canvas animation
Canvas animation is created, frame rate is 60fps or 144 fps (depends on the screen type).
Just like every other github repo
git init
git pull https://github.com/tzmcion/ReactPianoPlayer
npm i
Or git clone
git clone https://github.com/tzmcion/ReactPianoPlayer
- In Official version you can find Donation page, but I deleted it here
- Some dependencies in
package.lockare not used - Please report every issue and bug
- If you'd like to work on this app, I will explain how every file works to you with pleasure, just write :)
- soundfont-player
- midi-parser-js
- react-youtube
- rgb-hex
- sass
MIT license