music 🎹

notes/music/abcjs.mdx

@@ -1,21 +1,73 @@
 import { Piano } from 'react-piano';
 import 'react-piano/dist/styles.css';
 import ABCNotation from '@site/src/components/ABCNotation';
+import ReactPlayer from 'react-player'
 
 # 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.
+Flipping through a bunch of pdfs or watching videos for scales isn't going to cut it so I'm adding two libraries to help me make some 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.js](https://www.abcjs.net/)
 - [ABC Notation](https://en.wikipedia.org/wiki/ABC_notation)
 
 
-## Piano Example
+<ReactPlayer
+  url='https://davidawindham.com/wha/music-notation.mp4'
+  controls={true}
+  width='100%'
+  height='100%'
+/>
+
+## React Piano Example 
+
+## C Major Scale
+
+<Piano
+  noteRange={{ first: 48, last: 74 }}
+  width={600}
+  activeNotes={[60, 62, 64, 65, 67, 69, 71, 72]}
+  playNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+  stopNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+/>
+
+```js
+<Piano
+  noteRange={{ first: 48, last: 74 }}
+  width={600}
+  activeNotes={[60, 62, 64, 65, 67, 69, 71]}
+  playNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+  stopNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+/>
+```
+
+## D Major Scale
+
+<Piano
+  noteRange={{ first: 48, last: 74 }}
+  width={600}
+  activeNotes={[50, 52, 54, 55, 57, 59, 61, 62]}
+  playNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+  stopNote={(midiNumber) => {
+    console.log(midiNumber);
+  }}
+/>
 
+```js
 <Piano
   noteRange={{ first: 48, last: 74 }}
   width={600}
+  activeNotes={[50, 52, 54, 55, 57, 59, 61, 62]}
   playNote={(midiNumber) => {
     console.log(midiNumber);
   }}
@@ -23,6 +75,7 @@ Flipping through a bunch of pdfs for scales isn't going to cut it so I'm adding
     console.log(midiNumber);
   }}
 />
+```
 
 ## ABC Notation Example
 
@@ -33,7 +86,18 @@ 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:
+```js
+<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''|
+`} 
+/>
+
+```
 
 <ABCNotation 
   notation={`X:1
@@ -49,4 +113,24 @@ K:C
       console.log(abcElem);
     }
   }}
-/>
+/>
+
+```js
+<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

@@ -12,9 +12,22 @@
 
 In Obsidian, I'm able to use the ABC Notation ( https://en.wikipedia.org/wiki/ABC_notation ) via https://www.abcjs.net - will need to pull the library in for using it here. 
 
-```sh
+I added two tools for [Music Notation](abcjs) but I can only use them with ```mdx``` using ```jsx``` embedding.
 
-```music-abc
+```js
+<ABC 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''|
+`} 
+/>
+
+```
+
+```js
 {
   "tablature": [{"instrument": "piano"}]
 }

src/css/custom.css

@@ -145,4 +145,17 @@ form input {
     max-width: 100%;
     height: auto;
   }
+}
+
+.ReactPiano__Key--active.ReactPiano__Key--natural {
+  background: #25c2a0 !important;
+}
+.ReactPiano__Key--active.ReactPiano__Key--natural {
+  border: 1px solid #1d957b !important;
+}
+.ReactPiano__Key--active.ReactPiano__Key--accidental {
+  background: #156e5b !important;
+}
+.ReactPiano__Key--active.ReactPiano__Key--accidental {
+  border: 1px solid rgb(16, 68, 57) !important;
 }

src/pages/help.md

@@ -61,6 +61,7 @@ npm run serve
 
 ---
 
+- **25/04/47** - added abcjs ^6.4.4 & react-piano ^3.1.3 for [/Notes/Music/Notation](/notes/music/abcjs)
 - **25/01/23** - 3.6.3 -> 3.7.0
 - **24/24/02** - 3.6.1 -> 3.6.3
 - **24/11/17** - upgrades ( 3.5.2 👉🏼 3.6.1 ) all good 👍🏼