music 🎹

notes/music/abcjs.mdx

@@ -0,0 +1,52 @@
+import { Piano } from 'react-piano';
+import 'react-piano/dist/styles.css';
+import ABCNotation from '@site/src/components/ABCNotation';
+
+# Notation
+
+Flipping through a bunch of pdfs for scales isn't going to cut it so I'm adding two libraries to help me with music notation. The first is a library for rendering piano keys and the second is a library for rendering ABC notation.
+
+- [react-piano](https://github.com/kevinsqi/react-piano)
+- [abcjs](https://www.abcjs.net/)
+- [ABC Notation](https://en.wikipedia.org/wiki/ABC_notation)
+
+
+## Piano Example
+
+<Piano
+  noteRange={{ first: 48, last: 74 }}
+  width={600}
+  playNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+  stopNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+/>
+
+## ABC Notation Example
+
+<ABCNotation notation={`X:1
+T:Example
+M:4/4
+L:1/8
+K:C
+C,D,E,F, G,A,B,C DEFG ABcd|efgab c'd'e'f' g'a'b'c''|`} />
+
+You can add interactive features by setting more options:
+
+<ABCNotation 
+  notation={`X:1
+T:Example with chord symbols
+M:4/4
+L:1/4
+K:C
+"C"CDEF|"G"GABc|"F"FEDC|"C"C4|`} 
+  options={{
+    add_classes: true,
+    responsive: 'resize',
+    clickListener: (abcElem) => {
+      console.log(abcElem);
+    }
+  }}
+/>

notes/music/music.md

@@ -28,6 +28,9 @@ K: G
 |:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
 ```
 
+## References
+
+- 
 
 
 ## See Also

package-lock.json

@@ -14,6 +14,7 @@
         "@docusaurus/theme-mermaid": "^3.7.0",
         "@mdx-js/mdx": "^3.0.0",
         "@mdx-js/react": "^3.0.0",
+        "abcjs": "^6.4.4",
         "clsx": "^2.0.0",
         "docusaurus-lunr-search": "^3.3.2",
         "docusaurus-plugin-matomo": "^0.0.8",
@@ -21,6 +22,7 @@
         "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-piano": "^3.1.3",
         "react-player": "^2.14.1"
       }
     },
@@ -4812,6 +4814,16 @@
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
+    "node_modules/abcjs": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/abcjs/-/abcjs-6.4.4.tgz",
+      "integrity": "sha512-dT3Z2vb8yihbiPMzSoup0JOcvO2je4qpFNlTD+kS5VBelE3AASAs18dS5qeMWkZeqCz7kI/hz62B2lpMDugWLA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/paulrosen"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -10493,6 +10505,12 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/just-range": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/just-range/-/just-range-2.2.0.tgz",
+      "integrity": "sha512-JKHygNvIu+tX/+oOI+zNznQE0M8jM241fsjuac2i9OBlIXD7w4CGGuakXYc6Dne5vv9pEXgmCv8+WEFKwiGFTg==",
+      "license": "MIT"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10631,6 +10649,12 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -17622,6 +17646,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/react-piano": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/react-piano/-/react-piano-3.1.3.tgz",
+      "integrity": "sha512-5SDFzprP+ICEMOJRkB0iqHo1qGcZpinRJ0ZW4HZu0pT6NftK+MpVN19VhXzd+MMN9C7QyGNB0nO4nd/cpGko/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "just-range": "^2.1.0",
+        "lodash.difference": "^4.5.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-player": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.14.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "@docusaurus/theme-mermaid": "^3.7.0",
     "@mdx-js/mdx": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "abcjs": "^6.4.4",
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.3.2",
     "docusaurus-plugin-matomo": "^0.0.8",
@@ -27,6 +28,7 @@
     "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-piano": "^3.1.3",
     "react-player": "^2.14.1"
   },
   "browserslist": {

sidebarsnotes.js

@@ -114,6 +114,7 @@ module.exports = {
         id:'music/music',
       },
       items: [
+        'music/abcjs',
       ]
     },
     {

src/components/ABCNotation.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+import abcjs from 'abcjs';
+
+export default function ABCNotation({ 
+  notation, 
+  responsive = true,
+  width = 600, 
+  options = {} 
+}) {
+  const divRef = useRef(null);
+
+  useEffect(() => {
+    if (divRef.current && notation) {
+      // Clear previous rendering
+      divRef.current.innerHTML = '';
+      
+      // Render ABC notation
+      abcjs.renderAbc(divRef.current, notation, {
+        responsive: responsive ? 'resize' : undefined,
+        add_classes: true,
+        staffwidth: responsive ? undefined : width,
+        ...options
+      });
+    }
+  }, [notation, responsive, width, options]);
+
+  return <div ref={divRef} className="abcjs-container" />;
+}