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);
    }
  }}
/>