{"id":18893057,"url":"https://github.com/bhollis/flash-piano","last_synced_at":"2026-05-04T19:42:02.488Z","repository":{"id":188376333,"uuid":"675859676","full_name":"bhollis/flash-piano","owner":"bhollis","description":"A web component that adds a playable piano to your website.","archived":false,"fork":false,"pushed_at":"2023-08-15T08:22:02.000Z","size":545,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T02:45:36.237Z","etag":null,"topics":["custom-elements","piano","piano-keyboard","web-audio","web-components","web-midi"],"latest_commit_sha":null,"homepage":"","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/bhollis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-07T22:45:22.000Z","updated_at":"2023-08-15T08:21:37.000Z","dependencies_parsed_at":"2023-08-15T04:27:53.158Z","dependency_job_id":null,"html_url":"https://github.com/bhollis/flash-piano","commit_stats":null,"previous_names":["bhollis/flash-piano"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Fflash-piano","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Fflash-piano/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Fflash-piano/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhollis%2Fflash-piano/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhollis","download_url":"https://codeload.github.com/bhollis/flash-piano/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239869222,"owners_count":19710485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["custom-elements","piano","piano-keyboard","web-audio","web-components","web-midi"],"created_at":"2024-11-08T08:07:12.751Z","updated_at":"2026-02-26T18:30:15.581Z","avatar_url":"https://github.com/bhollis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flash Piano\n\n[\u003cimg width=\"1114\" alt=\"Screenshot 2023-08-14 at 7 12 27 PM\" src=\"https://github.com/bhollis/flash-piano/assets/313208/ac0beb97-71a9-41a5-9a02-2107060871a1\"\u003e](https://method-behind-the-music.com/piano/)\n\n[Play the piano!](https://method-behind-the-music.com/piano/)\n\nThe \"Flash Piano\" is the modern successor to a Macromedia Flash-based piano I built in 1999. Now that Flash is gone, I've rebuilt it on top of modern browser technology, making use of Web Components, the Web Audio API, and Web MIDI.\n\nThe Flash Piano is a web component, meaning you can use it in any website from any framework - it works just like a normal HTML component:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"\"\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/flash-piano\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cflash-piano\u003e\u003c/flash-piano\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThere are no attributes to configure. There are two CSS variables you can use to customize the piano:\n\n```css\nflash-piano {\n  --piano-key-width: 50px;\n  --piano-keybed-color: blue;\n}\n```\n\nSetting `--piano-key-width` will scale the entire piano up or down.\n\nIf you have a MIDI keyboard connected, you can play the piano with it while the piano is focused (click on it first).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhollis%2Fflash-piano","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhollis%2Fflash-piano","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhollis%2Fflash-piano/lists"}