diff --git a/package.json b/package.json
index 96b1c76..9ce93c2 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,16 @@
"@types/react": "^18.2.74",
"@types/react-dom": "^18.2.24",
"astro": "^4.5.16",
+ "jsdom": "^24.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.4",
- "vexflow": "5.0.0-alpha.3"
+ "verovio": "^4.1.0"
+ },
+ "devDependencies": {
+ "@types/jsdom": "^21.1.6",
+ "@types/node": "^20.12.7",
+ "@types/verovio": "^3.13.4"
}
}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 20926c4..90de885 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,7 +25,10 @@ dependencies:
version: 18.2.24
astro:
specifier: ^4.5.16
- version: 4.5.16(typescript@5.4.4)
+ version: 4.5.16(@types/node@20.12.7)(typescript@5.4.4)
+ jsdom:
+ specifier: ^24.0.0
+ version: 24.0.0
react:
specifier: ^18.2.0
version: 18.2.0
@@ -38,9 +41,20 @@ dependencies:
typescript:
specifier: ^5.4.4
version: 5.4.4
- vexflow:
- specifier: 5.0.0-alpha.3
- version: 5.0.0-alpha.3
+ verovio:
+ specifier: ^4.1.0
+ version: 4.1.0
+
+devDependencies:
+ '@types/jsdom':
+ specifier: ^21.1.6
+ version: 21.1.6
+ '@types/node':
+ specifier: ^20.12.7
+ version: 20.12.7
+ '@types/verovio':
+ specifier: ^3.13.4
+ version: 3.13.4
packages:
@@ -148,7 +162,7 @@ packages:
'@astrojs/markdown-remark': 5.0.0
'@mdx-js/mdx': 3.0.1
acorn: 8.11.3
- astro: 4.5.16(typescript@5.4.4)
+ astro: 4.5.16(@types/node@20.12.7)(typescript@5.4.4)
es-module-lexer: 1.5.0
estree-util-visit: 2.0.0
github-slugger: 2.0.0
@@ -198,7 +212,7 @@ packages:
astro: ^3.0.0 || ^4.0.0
tailwindcss: ^3.0.24
dependencies:
- astro: 4.5.16(typescript@5.4.4)
+ astro: 4.5.16(@types/node@20.12.7)(typescript@5.4.4)
autoprefixer: 10.4.19(postcss@8.4.38)
postcss: 8.4.38
postcss-load-config: 4.0.2(postcss@8.4.38)
@@ -1181,6 +1195,14 @@ packages:
'@types/unist': 3.0.2
dev: false
+ /@types/jsdom@21.1.6:
+ resolution: {integrity: sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==}
+ dependencies:
+ '@types/node': 20.12.7
+ '@types/tough-cookie': 4.0.5
+ parse5: 7.1.2
+ dev: true
+
/@types/mdast@4.0.3:
resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}
dependencies:
@@ -1201,6 +1223,11 @@ packages:
'@types/unist': 2.0.10
dev: false
+ /@types/node@20.12.7:
+ resolution: {integrity: sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==}
+ dependencies:
+ undici-types: 5.26.5
+
/@types/prop-types@15.7.12:
resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
dev: false
@@ -1218,6 +1245,10 @@ packages:
csstype: 3.1.3
dev: false
+ /@types/tough-cookie@4.0.5:
+ resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+ dev: true
+
/@types/unist@2.0.10:
resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
dev: false
@@ -1226,6 +1257,10 @@ packages:
resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
dev: false
+ /@types/verovio@3.13.4:
+ resolution: {integrity: sha512-IM4AGwbnbsn9IF72Z2Vy2mcCCEJZobtZjd9XyB6VovhZlJoUbW9m34X0twW0NgID+tVhbP6s1rMphXkoy4c6qQ==}
+ dev: true
+
/@ungap/structured-clone@1.2.0:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: false
@@ -1241,7 +1276,7 @@ packages:
'@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4)
'@types/babel__core': 7.20.5
react-refresh: 0.14.0
- vite: 5.2.8
+ vite: 5.2.8(@types/node@20.12.7)
transitivePeerDependencies:
- supports-color
dev: false
@@ -1342,6 +1377,15 @@ packages:
hasBin: true
dev: false
+ /agent-base@7.1.1:
+ resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
+ engines: {node: '>= 14'}
+ dependencies:
+ debug: 4.3.4
+ transitivePeerDependencies:
+ - supports-color
+ dev: false
+
/ansi-align@3.0.1:
resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
dependencies:
@@ -1418,7 +1462,7 @@ packages:
hasBin: true
dev: false
- /astro@4.5.16(typescript@5.4.4):
+ /astro@4.5.16(@types/node@20.12.7)(typescript@5.4.4):
resolution: {integrity: sha512-1nOVsMq2OJiXnG6gO0Y77vTAboGN9nLQSy/8SGazq4h6x+alzbsMbQbArBgvaLzOSUXD0m91XLs3D8bOSuavrQ==}
engines: {node: '>=18.14.1', npm: '>=6.14.0'}
hasBin: true
@@ -1479,7 +1523,7 @@ packages:
tsconfck: 3.0.3(typescript@5.4.4)
unist-util-visit: 5.0.0
vfile: 6.0.1
- vite: 5.2.8
+ vite: 5.2.8(@types/node@20.12.7)
vitefu: 0.2.5(vite@5.2.8)
which-pm: 2.1.1
yargs-parser: 21.1.1
@@ -1499,6 +1543,10 @@ packages:
- typescript
dev: false
+ /asynckit@0.4.0:
+ resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+ dev: false
+
/autoprefixer@10.4.19(postcss@8.4.38):
resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
engines: {node: ^10 || ^12 || >=14}
@@ -1805,6 +1853,13 @@ packages:
dev: false
optional: true
+ /combined-stream@1.0.8:
+ resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+ engines: {node: '>= 0.8'}
+ dependencies:
+ delayed-stream: 1.0.0
+ dev: false
+
/comma-separated-tokens@2.0.3:
resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
dev: false
@@ -1842,10 +1897,25 @@ packages:
hasBin: true
dev: false
+ /cssstyle@4.0.1:
+ resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
+ engines: {node: '>=18'}
+ dependencies:
+ rrweb-cssom: 0.6.0
+ dev: false
+
/csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
dev: false
+ /data-urls@5.0.0:
+ resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+ engines: {node: '>=18'}
+ dependencies:
+ whatwg-mimetype: 4.0.0
+ whatwg-url: 14.0.0
+ dev: false
+
/debug@4.3.4:
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
engines: {node: '>=6.0'}
@@ -1858,6 +1928,10 @@ packages:
ms: 2.1.2
dev: false
+ /decimal.js@10.4.3:
+ resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+ dev: false
+
/decode-named-character-reference@1.0.2:
resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
dependencies:
@@ -1880,6 +1954,11 @@ packages:
dev: false
optional: true
+ /delayed-stream@1.0.0:
+ resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+ engines: {node: '>=0.4.0'}
+ dev: false
+
/dequal@2.0.3:
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
engines: {node: '>=6'}
@@ -1965,7 +2044,6 @@ packages:
/entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
- dev: false
/es-module-lexer@1.5.0:
resolution: {integrity: sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==}
@@ -2197,6 +2275,15 @@ packages:
signal-exit: 4.1.0
dev: false
+ /form-data@4.0.0:
+ resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+ engines: {node: '>= 6'}
+ dependencies:
+ asynckit: 0.4.0
+ combined-stream: 1.0.8
+ mime-types: 2.1.35
+ dev: false
+
/fraction.js@4.3.7:
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
dev: false
@@ -2459,6 +2546,13 @@ packages:
space-separated-tokens: 2.0.2
dev: false
+ /html-encoding-sniffer@4.0.0:
+ resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+ engines: {node: '>=18'}
+ dependencies:
+ whatwg-encoding: 3.1.1
+ dev: false
+
/html-escaper@3.0.3:
resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
dev: false
@@ -2471,11 +2565,38 @@ packages:
resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
dev: false
+ /http-proxy-agent@7.0.2:
+ resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+ engines: {node: '>= 14'}
+ dependencies:
+ agent-base: 7.1.1
+ debug: 4.3.4
+ transitivePeerDependencies:
+ - supports-color
+ dev: false
+
+ /https-proxy-agent@7.0.4:
+ resolution: {integrity: sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==}
+ engines: {node: '>= 14'}
+ dependencies:
+ agent-base: 7.1.1
+ debug: 4.3.4
+ transitivePeerDependencies:
+ - supports-color
+ dev: false
+
/human-signals@5.0.0:
resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
engines: {node: '>=16.17.0'}
dev: false
+ /iconv-lite@0.6.3:
+ resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+ engines: {node: '>=0.10.0'}
+ dependencies:
+ safer-buffer: 2.1.2
+ dev: false
+
/ieee754@1.2.1:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
dev: false
@@ -2596,6 +2717,10 @@ packages:
engines: {node: '>=12'}
dev: false
+ /is-potential-custom-element-name@1.0.1:
+ resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+ dev: false
+
/is-reference@3.0.2:
resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
dependencies:
@@ -2656,6 +2781,42 @@ packages:
argparse: 2.0.1
dev: false
+ /jsdom@24.0.0:
+ resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==}
+ engines: {node: '>=18'}
+ peerDependencies:
+ canvas: ^2.11.2
+ peerDependenciesMeta:
+ canvas:
+ optional: true
+ dependencies:
+ cssstyle: 4.0.1
+ data-urls: 5.0.0
+ decimal.js: 10.4.3
+ form-data: 4.0.0
+ html-encoding-sniffer: 4.0.0
+ http-proxy-agent: 7.0.2
+ https-proxy-agent: 7.0.4
+ is-potential-custom-element-name: 1.0.1
+ nwsapi: 2.2.8
+ parse5: 7.1.2
+ rrweb-cssom: 0.6.0
+ saxes: 6.0.0
+ symbol-tree: 3.2.4
+ tough-cookie: 4.1.3
+ w3c-xmlserializer: 5.0.0
+ webidl-conversions: 7.0.0
+ whatwg-encoding: 3.1.1
+ whatwg-mimetype: 4.0.0
+ whatwg-url: 14.0.0
+ ws: 8.16.0
+ xml-name-validator: 5.0.0
+ transitivePeerDependencies:
+ - bufferutil
+ - supports-color
+ - utf-8-validate
+ dev: false
+
/jsesc@2.5.2:
resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
engines: {node: '>=4'}
@@ -3332,6 +3493,18 @@ packages:
picomatch: 2.3.1
dev: false
+ /mime-db@1.52.0:
+ resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+ engines: {node: '>= 0.6'}
+ dev: false
+
+ /mime-types@2.1.35:
+ resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+ engines: {node: '>= 0.6'}
+ dependencies:
+ mime-db: 1.52.0
+ dev: false
+
/mime@3.0.0:
resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
engines: {node: '>=10.0.0'}
@@ -3449,6 +3622,10 @@ packages:
path-key: 4.0.0
dev: false
+ /nwsapi@2.2.8:
+ resolution: {integrity: sha512-GU/I3lTEFQ9mkEm07Q7HvdRajss8E1wVMGOk3/lHl60QPseG+B3BIQY+JUjYWw7gF8cCeoQCXd4N7DB7avw0Rg==}
+ dev: false
+
/object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
@@ -3574,7 +3751,6 @@ packages:
resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
dependencies:
entities: 4.5.0
- dev: false
/path-browserify@1.0.1:
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
@@ -3768,6 +3944,10 @@ packages:
resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
dev: false
+ /psl@1.9.0:
+ resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+ dev: false
+
/pump@3.0.0:
resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
requiresBuild: true
@@ -3777,6 +3957,15 @@ packages:
dev: false
optional: true
+ /punycode@2.3.1:
+ resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+ engines: {node: '>=6'}
+ dev: false
+
+ /querystringify@2.2.0:
+ resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+ dev: false
+
/queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: false
@@ -3945,6 +4134,10 @@ packages:
engines: {node: '>=0.10.0'}
dev: false
+ /requires-port@1.0.0:
+ resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+ dev: false
+
/resolve@1.22.8:
resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
hasBin: true
@@ -4027,6 +4220,10 @@ packages:
fsevents: 2.3.3
dev: false
+ /rrweb-cssom@0.6.0:
+ resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+ dev: false
+
/run-parallel@1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
dependencies:
@@ -4037,6 +4234,17 @@ packages:
resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
dev: false
+ /safer-buffer@2.1.2:
+ resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+ dev: false
+
+ /saxes@6.0.0:
+ resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+ engines: {node: '>=v12.22.7'}
+ dependencies:
+ xmlchars: 2.2.0
+ dev: false
+
/scheduler@0.23.0:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
dependencies:
@@ -4294,6 +4502,10 @@ packages:
engines: {node: '>= 0.4'}
dev: false
+ /symbol-tree@3.2.4:
+ resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+ dev: false
+
/tailwindcss@3.4.3:
resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
engines: {node: '>=14.0.0'}
@@ -4396,6 +4608,23 @@ packages:
is-number: 7.0.0
dev: false
+ /tough-cookie@4.1.3:
+ resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
+ engines: {node: '>=6'}
+ dependencies:
+ psl: 1.9.0
+ punycode: 2.3.1
+ universalify: 0.2.0
+ url-parse: 1.5.10
+ dev: false
+
+ /tr46@5.0.0:
+ resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
+ engines: {node: '>=18'}
+ dependencies:
+ punycode: 2.3.1
+ dev: false
+
/trim-lines@3.0.1:
resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
dev: false
@@ -4454,6 +4683,9 @@ packages:
resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==}
dev: false
+ /undici-types@5.26.5:
+ resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+
/unherit@3.0.1:
resolution: {integrity: sha512-akOOQ/Yln8a2sgcLj4U0Jmx0R5jpIg2IUyRrWOzmEbjBtGzBdHtSeFKgoEcoH4KYIG/Pb8GQ/BwtYm0GCq1Sqg==}
dev: false
@@ -4575,6 +4807,11 @@ packages:
unist-util-visit-parents: 6.0.1
dev: false
+ /universalify@0.2.0:
+ resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+ engines: {node: '>= 4.0.0'}
+ dev: false
+
/update-browserslist-db@1.0.13(browserslist@4.23.0):
resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
hasBin: true
@@ -4586,12 +4823,20 @@ packages:
picocolors: 1.0.0
dev: false
+ /url-parse@1.5.10:
+ resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+ dependencies:
+ querystringify: 2.2.0
+ requires-port: 1.0.0
+ dev: false
+
/util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
dev: false
- /vexflow@5.0.0-alpha.3:
- resolution: {integrity: sha512-Los8mo4YI1xNYxrD9OfRheoc7nhI9ynQ3pP6Sj58gG0I+AOUPkKBoWtHYTm+XqBgtv0AzhkPAKVjuLu4voI5Fw==}
+ /verovio@4.1.0:
+ resolution: {integrity: sha512-HjSMVOlpOeK73mLEF/QVG/2UpFI3hvoGF0p324XwD+/qlcVdfJbJhic4FnIFJGxOcH4WNo0WVEjKP6R93VY/ew==}
+ engines: {node: '>= 14.18.0'}
dev: false
/vfile-location@5.0.2:
@@ -4632,7 +4877,7 @@ packages:
vfile-message: 4.0.2
dev: false
- /vite@5.2.8:
+ /vite@5.2.8(@types/node@20.12.7):
resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
@@ -4660,6 +4905,7 @@ packages:
terser:
optional: true
dependencies:
+ '@types/node': 20.12.7
esbuild: 0.20.2
postcss: 8.4.38
rollup: 4.14.1
@@ -4675,7 +4921,7 @@ packages:
vite:
optional: true
dependencies:
- vite: 5.2.8
+ vite: 5.2.8(@types/node@20.12.7)
dev: false
/volar-service-css@0.0.34(@volar/language-service@2.1.6):
@@ -4818,10 +5064,42 @@ packages:
resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
dev: false
+ /w3c-xmlserializer@5.0.0:
+ resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+ engines: {node: '>=18'}
+ dependencies:
+ xml-name-validator: 5.0.0
+ dev: false
+
/web-namespaces@2.0.1:
resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
dev: false
+ /webidl-conversions@7.0.0:
+ resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+ engines: {node: '>=12'}
+ dev: false
+
+ /whatwg-encoding@3.1.1:
+ resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+ engines: {node: '>=18'}
+ dependencies:
+ iconv-lite: 0.6.3
+ dev: false
+
+ /whatwg-mimetype@4.0.0:
+ resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+ engines: {node: '>=18'}
+ dev: false
+
+ /whatwg-url@14.0.0:
+ resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==}
+ engines: {node: '>=18'}
+ dependencies:
+ tr46: 5.0.0
+ webidl-conversions: 7.0.0
+ dev: false
+
/which-pm-runs@1.1.0:
resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
engines: {node: '>=4'}
@@ -4882,6 +5160,28 @@ packages:
dev: false
optional: true
+ /ws@8.16.0:
+ resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
+ engines: {node: '>=10.0.0'}
+ peerDependencies:
+ bufferutil: ^4.0.1
+ utf-8-validate: '>=5.0.2'
+ peerDependenciesMeta:
+ bufferutil:
+ optional: true
+ utf-8-validate:
+ optional: true
+ dev: false
+
+ /xml-name-validator@5.0.0:
+ resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+ engines: {node: '>=18'}
+ dev: false
+
+ /xmlchars@2.2.0:
+ resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+ dev: false
+
/y18n@5.0.8:
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
engines: {node: '>=10'}
diff --git a/src/assets/haydn-piano-sonata-6-slice00.musicxml b/src/assets/haydn-piano-sonata-6-slice00.musicxml
new file mode 100644
index 0000000..1641fc4
--- /dev/null
+++ b/src/assets/haydn-piano-sonata-6-slice00.musicxml
@@ -0,0 +1,2669 @@
+
+
+
+
+ Untitled score
+
+
+ Composer / arranger
+
+ MuseScore 4.2.1
+ 2024-04-21
+
+
+
+
+
+
+
+
+
+ Piano
+ Pno.
+
+ Piano
+ keyboard.piano
+
+
+
+ 1
+ 1
+ 78.7402
+ 0
+
+
+
+
+
+
+ 6
+
+ -2
+
+
+ 2
+
+ G
+ 2
+
+
+ F
+ 4
+
+
+
+
+ Adagio
+
+ 1
+
+
+
+
+ (dolce)
+
+ 1
+
+
+
+ D
+ 5
+
+ 3
+ 1
+ eighth
+ down
+ 1
+
+
+ 3
+
+
+
+ 3
+ 5
+ eighth
+ 2
+
+
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+
+
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ E
+ -1
+ 5
+
+ 3
+ 1
+ eighth
+ down
+ 1
+ begin
+
+
+
+
+
+
+
+
+
+ D
+ 5
+
+ 3
+
+ 1
+ eighth
+ down
+ 1
+ end
+
+
+
+
+
+
+
+ D
+ 5
+
+ 1
+
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+ 24
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ C
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ C
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+
+
+
+
+
+ C
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ C
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 5
+
+ 1
+ 1
+ 16th
+ natural
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ B
+ -1
+ 4
+
+ 1
+ 1
+ 16th
+
+ 3
+ 2
+
+ up
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 3
+ 2
+
+ up
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 4
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 3
+ 2
+
+ up
+ 1
+ continue
+ end
+
+
+
+
+
+
+ G
+ 4
+
+ 3
+ 1
+ eighth
+ up
+ 1
+ end
+
+
+
+ 3
+ 1
+ eighth
+ 1
+
+
+
+ D
+ 5
+
+ 3
+ 1
+ eighth
+ down
+ 1
+
+
+ 24
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ sharp
+ down
+ 2
+ begin
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ C
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ F
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ D
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+ 24
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ C
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ F
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ C
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ F
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ F
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ F
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ D
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ F
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ D
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ F
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+
+ C
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ B
+ 4
+
+ 1
+ 1
+ 16th
+ natural
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 5
+
+ 1
+ 1
+ 16th
+ natural
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+
+ B
+ -1
+ 4
+
+ 1
+ eighth
+ flat
+ up
+ 1
+
+
+
+
+
+
+ A
+ 4
+
+ 6
+ 1
+ quarter
+ up
+ 1
+
+
+
+
+
+
+ F
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+ 24
+
+
+
+ E
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ E
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ E
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ C
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ E
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ C
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 5
+ eighth
+ up
+ 2
+
+
+
+
+
+
+ F
+ 3
+
+ 6
+ 5
+ quarter
+ down
+ 2
+
+
+
+
+
+
+
+
+
+
+ C
+ 4
+
+ 6
+ 5
+ quarter
+ down
+ 2
+
+
+
+ F
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ F
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+ light-heavy
+
+
+
+
diff --git a/src/assets/haydn-piano-sonata-6-slice01.musicxml b/src/assets/haydn-piano-sonata-6-slice01.musicxml
new file mode 100644
index 0000000..137a6ea
--- /dev/null
+++ b/src/assets/haydn-piano-sonata-6-slice01.musicxml
@@ -0,0 +1,1342 @@
+
+
+
+
+ Untitled score
+
+
+ Composer / arranger
+
+ MuseScore 4.2.1
+ 2024-04-21
+
+
+
+
+
+
+
+
+
+ Piano
+ Pno.
+
+ Piano
+ keyboard.piano
+
+
+
+ 1
+ 1
+ 78.7402
+ 0
+
+
+
+
+
+
+ 6
+
+ -2
+
+
+ 2
+
+ G
+ 2
+
+
+ F
+ 4
+
+
+
+
+ Adagio
+
+ 1
+
+
+
+
+ (dolce)
+
+ 1
+
+
+
+ D
+ 5
+
+ 3
+ 1
+ eighth
+ down
+ 1
+
+
+ 3
+
+
+
+ 3
+ 5
+ eighth
+ 2
+
+
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+
+
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ E
+ -1
+ 5
+
+ 3
+ 1
+ eighth
+ down
+ 1
+ begin
+
+
+
+
+
+
+
+
+
+ D
+ 5
+
+ 3
+
+ 1
+ eighth
+ down
+ 1
+ end
+
+
+
+
+
+
+
+ D
+ 5
+
+ 1
+
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ G
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ B
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+ 24
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ C
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ C
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+
+
+
+
+
+ C
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ C
+ 6
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ A
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 5
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ E
+ -1
+ 5
+
+ 1
+ 1
+ 16th
+
+ 6
+ 4
+
+ down
+ 1
+ continue
+ continue
+
+
+
+ C
+ 5
+
+ 1
+ 1
+ 16th
+ natural
+
+ 6
+ 4
+
+ down
+ 1
+ end
+ end
+
+
+
+
+
+
+ B
+ -1
+ 4
+
+ 1
+ 1
+ 16th
+
+ 3
+ 2
+
+ up
+ 1
+ begin
+ begin
+
+
+
+
+
+
+ D
+ 5
+
+ 1
+ 1
+ 16th
+
+ 3
+ 2
+
+ up
+ 1
+ continue
+ continue
+
+
+
+ F
+ 1
+ 4
+
+ 1
+ 1
+ 16th
+ sharp
+
+ 3
+ 2
+
+ up
+ 1
+ continue
+ end
+
+
+
+
+
+
+ G
+ 4
+
+ 3
+ 1
+ eighth
+ up
+ 1
+ end
+
+
+
+ 3
+ 1
+ eighth
+ 1
+
+
+
+ D
+ 5
+
+ 3
+ 1
+ eighth
+ down
+ 1
+
+
+ 24
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ sharp
+ down
+ 2
+ begin
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ F
+ 1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ A
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ begin
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ continue
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+ G
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+ end
+
+
+
+
+ B
+ -1
+ 3
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
+ D
+ 4
+
+ 3
+ 5
+ eighth
+ down
+ 2
+
+
+
+
diff --git a/src/components/Notation/index.tsx b/src/components/Notation/index.tsx
deleted file mode 100644
index dbb0010..0000000
--- a/src/components/Notation/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from 'react';
-import * as Vexflow from 'vexflow';
-
-export const Notation = () => {
- const ref = React.useRef(null);
- const id = React.useId();
-
- React.useEffect(() => {
- const render = (id: string) => {
- const el = window.document.getElementById(id);
- if (!el) {
- return;
- }
-
- el.innerHTML = '';
- const { Factory } = Vexflow;
- const width = el.clientWidth;
- const vf = new Factory({
- renderer: { elementId: id, width, height: 300 },
- });
-
- vf.getContext().scale(0.75, 0.75);
-
- const score = vf.EasyScore();
- let currentX = 20;
- let currentY = 40;
-
- const getCurrentBar = (width: number) => {
- const system = vf.System({
- x: currentX,
- y: currentY,
- width,
- });
- currentX += width;
- return system;
- };
-
- let system = getCurrentBar(130);
- system.addStave({
- voices: [
- score.voice([
- ...score.notes('D5/8'),
- ], {
- time: '1/8',
- })
- ]
- })
- .addClef('treble')
- .addKeySignature('Gm')
- .addTimeSignature('C')
- .setTempo(
- {
- name: 'Adagio.'
- },
- -30
- );
-
- system.addStave({
- voices: [
- score.voice([
- ...score.notes('D3/8/r', { clef: 'bass' }),
- ], {
- time: '1/8',
- })
- ]
- })
- .addClef('bass')
- .addKeySignature('Gm')
- .addTimeSignature('C');
-
- system.addConnector('brace');
- system.addConnector('singleLeft');
- system.addConnector('singleRight');
-
- system = getCurrentBar(350);
-
- system
- .addStave({
- voices: [
- score.voice(
- [
- ...score.tuplet(
- score.beam(
- score.notes('G5/16, B5, A5, G5, F#5, G5'),
- ),
- {
- ratioed: false,
- notesOccupied: 4,
- }
- ),
- ...score.tuplet(
- score.beam(
- score.notes('G5/16, F5, G5, D6, F5, G5'),
- ),
- {
- ratioed: false,
- notesOccupied: 4,
- yOffset: Infinity,
- }
- ),
- // ...score.beam(score.notes('E5/8, D5')),
- ...score.beam(score.notes('E5/8, D5')),
- ...score.tuplet(
- score.beam(
- score.notes('D5/16, E5, F5, G5, A5, B5'),
- ),
- {
- ratioed: false,
- notesOccupied: 4,
- yOffset: Infinity,
- }
- ),
- ]
- ),
- ]
- });
-
- system
- .addStave({
- voices: [
- score.voice([
- ...score.beam(
- score.notes('(G3 B3 D4)/8, (G3 B3 D4)', { clef: 'bass' })
- ),
- ...score.beam(
- score.notes('(G3 B3 D4)/8, (G3 B3 D4)', { clef: 'bass' })
- ),
- ...score.beam(
- score.notes('(G3 C4)/8, (G3 B3)', { clef: 'bass' })
- ),
- ...score.beam(
- score.notes('(G3 B3)/8, (G3 B3)', { clef: 'bass' })
- ),
- ]),
- ]
- });
-
- system.addConnector('singleLeft');
- system.addConnector('singleRight');
-
- vf.draw();
- };
-
- render(id);
- }, []);
-
- return (
-
- );
-};
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 70ea150..176e9db 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -12,6 +12,8 @@ const { title } = Astro.props.frontmatter || Astro.props;
{title}