{"id":39248026,"url":"https://github.com/tzmcion/reactpianoplayer","last_synced_at":"2026-01-18T00:00:33.257Z","repository":{"id":39985863,"uuid":"415617109","full_name":"tzmcion/ReactPianoPlayer","owner":"tzmcion","description":"Web Midi Player for Piano Midis with visualization. Written in typescript and react, on MIT license","archived":false,"fork":false,"pushed_at":"2025-09-19T15:55:19.000Z","size":45485,"stargazers_count":33,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-19T17:50:38.258Z","etag":null,"topics":["midi","midi-player","piano-blocks","piano-keyboard","piano-midi","piano-player"],"latest_commit_sha":null,"homepage":"https://pianoblocksapp.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tzmcion.png","metadata":{"files":{"readme":"README.md","changelog":"changeIndex.txt","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"custom":["https://www.paypal.com/donate/?hosted_button_id=J6GQGKHC7H7SG"]}},"created_at":"2021-10-10T14:59:01.000Z","updated_at":"2025-09-19T15:55:24.000Z","dependencies_parsed_at":"2025-09-10T13:28:11.319Z","dependency_job_id":null,"html_url":"https://github.com/tzmcion/ReactPianoPlayer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/tzmcion/ReactPianoPlayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactPianoPlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactPianoPlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactPianoPlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactPianoPlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tzmcion","download_url":"https://codeload.github.com/tzmcion/ReactPianoPlayer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactPianoPlayer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28523008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T23:53:28.710Z","status":"ssl_error","status_checked_at":"2026-01-17T23:52:20.131Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["midi","midi-player","piano-blocks","piano-keyboard","piano-midi","piano-player"],"created_at":"2026-01-18T00:00:12.519Z","updated_at":"2026-01-18T00:00:33.223Z","avatar_url":"https://github.com/tzmcion.png","language":"TypeScript","funding_links":["https://www.paypal.com/donate/?hosted_button_id=J6GQGKHC7H7SG"],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/tzmcion\"\u003e\n    \u003cimg src=\"./public/PBA_logo.png\" alt=\"Logo\" width=\"100\" height=\"100\"\u003e\n    \u003ch3\u003ePIANO-BLOCKS-APP\u003c/h3\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003ePiano MIDI player/visualizer designed for MIDI playback with various visual configurations and effects \u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n\u003c!--     \u003ca href=\"https://github.com/tzmcion/bio-meeting/wiki\"\u003e\u003cstrong\u003eExplore the docs\u003c/strong\u003e\u003c/a\u003e --\u003e\n    \u003ca href=\"https://react-piano-player-tymota-aprions-projects.vercel.app/\"\u003eVisit Latest Version of the app\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png\" title=\"ReactJS\" width=\"33\" /\u003e\n  \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1024px-Typescript_logo_2020.svg.png\" title=\"TypeScript\" width=\"33\" /\u003e\n  \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/a/a0/MIDI_LOGO.svg\" title=\"MIDI\" width=\"33\" /\u003e\n  \u003cimg src=\"https://vitest.dev/logo.svg\" width=\"33\" title=\"Vite/Vitest\" /\u003e\n  \u003cimg src=\"https://cdn.worldvectorlogo.com/logos/redux.svg\" width=\"33\" title=\"Redux\" /\u003e\n  \u003cimg src=\"https://sass-lang.com/assets/img/styleguide/seal-color.png\" width=\"33\" title=\"SASS/SCSS\" /\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n# Webb App for MIDI playback with visualization\n\nPianoBlocksApp 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 the MIDI recording. It's main focus is to implement - alongside MIDI player - pallet of effects and configuration of the visuals. Essentially, this app is designed to be recorded and used for a video creation for YouTube, or other websites/purposes. If you are looking for a MIDI player app for music learning, please fell free to use this app, but I recomend a better application: \u003ca href=\"https://github.com/Bewelge/MIDIano\"\u003eMIDIano\u003c/a\u003e\n\u003e [!IMPORTANT]\n Version of the app on \"main\" branch is not always up-to-date and does not alwasy contain all the bugs fixed\n\n![til](./.github/preview.gif)\n\n## Description\n\nApp is a MIDI-player. What it does it converts the inserted midi file, verifies it's compatibility, compresess all the tracks to single track, and plays the file. The main goal of the app is not to facilitate learning process for musicians, rather to find a simple way of recreating fancy videos found in online-creators channels on YouTube, or other streaming platforms. The app provides a pallete of options and effects to implement during playback.\n\n\u003e[!TIP]\n\u003e \u003cb\u003eMain Advantages of Piano-Blocks-App:\u003c/b\u003e\n\u003e \u003cul\u003e\n\u003e  \u003cli\u003ePlayback Stop/Pause/Reset/Jump Forward-Backwards\u003c/li\u003e\n\u003e   \u003cli\u003eIndependent sound from piano - sound will realistically still be played if a key is pressed\u003c/li\u003e\n\u003e   \u003cli\u003eIndependent effects canvas - Effects will still render even if the playback is paused\u003c/li\u003e\n\u003e   \u003cli\u003eVisual configuration - Visualization can be easily configured\u003c/li\u003e\n\u003e   \u003cli\u003eMobile devices compatibility - altough performance can be poor, app is compatibile with mobile devices\u003c/li\u003e\n\u003e   \u003cli\u003ePresets - App comes with ready presets to choose from - either better for performance or visuals\u003c/li\u003e\n\u003e \u003c/ul\u003e\n\n\n### How does the app work ? \n\n![app schema](https://user-images.githubusercontent.com/64361206/156896648-36977f49-34ac-4b7c-ade3-990c13f6612d.JPG)\n\n\u003col\u003e\n \u003cli\u003e\n  \u003cb\u003eUser input\u003c/b\u003e\u003c/br\u003e\n  User Drags/chooses Midi file. He can configure options before that, using the preview view to see the results\n \u003c/li\u003e\n \u003cli\u003e\n  \u003cb\u003eWebsite proceses the inserted MIDI\u003c/b\u003e\u003c/br\u003e\n  Website saves the file to localstorage, checks it's extensions, converts the MIDI format to compatibile with the app - Midi has 3 different formats used. It also combines multiple tracks into one single track.\n \u003c/li\u003e\n \u003cli\u003e\n \u003cb\u003eWebsite creates canvas animation\u003c/b\u003e\u003c/br\u003e\n  Canvas animation is created, the app uses 5 separate canvas elements to render everything properlly.\n \u003c/li\u003e\n\u003c/ol\u003e\n\n## Installation\n\nJust like every other github repo\n\n```\ngit init\ngit pull https://github.com/tzmcion/ReactPianoPlayer\nnpm i \n```\n\nOr git clone\n\n```\ngit clone https://github.com/tzmcion/ReactPianoPlayer\n```\n\n\u003e [!CAUTION]\n\u003e * Sometimes multiple resizing can cause BUGs to appear - please refresh the page if that happens\n\u003e * Currently the record page is being reworked on - sorry for the inconvinience\n\u003e * Many more effects and configuration options will appear in the future\n\u003e * Some dependencies in `package.lock` are not used\n\u003e * Many files and classes are currently set as @deprecated, be aware if you clone this repository\n\u003e * If you'd like to work on this app, I will explain how every file works to you with pleasure, just write :)\n\n\n## License\n\n__MIT__ license\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzmcion%2Freactpianoplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftzmcion%2Freactpianoplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzmcion%2Freactpianoplayer/lists"}