import { Piano } from 'react-piano';
import 'react-piano/dist/styles.css';
import ABCNotation from '@site/src/components/ABCNotation';


# Scales

adding notation versions as a way to learn the scales. I need to get a better understanding of the notation and how to read it. I also need to get a better understanding of the piano keys and how they relate to the notation.

<ABCNotation notation={`
X:1
L:1/8
C D E F G A B c|
`} />

<Piano
  noteRange={{ first: 48, last: 84 }}
  width={600}
  activeNotes={[60, 62, 64, 65, 67, 69, 71, 72]}
  playNote={(midiNumber) => {
    console.log(midiNumber);
  }}
  stopNote={(midiNumber) => {
    console.log(midiNumber);
  }}
/>
**C** 

<ABCNotation notation={`
X:1
L:1/8
C D _E F G _A _B|
`} />
<Piano
  noteRange={{ first: 48, last: 84 }}
  width={600}
  activeNotes={[60, 62, 63, 65, 67, 68, 70, 72]}
  playNote={(midiNumber) => {
    console.log(midiNumber);
  }}
  stopNote={(midiNumber) => {
    console.log(midiNumber);
  }}
/>
**[Cm](https://en.wikipedia.org/wiki/C_minor)** (Left): 5, 4, 3, 2, 1, 3, 2, 1 | (Right): 1, 2, 3, 1, 2, 3, 4, 5

![music-scales](/img/music-scales.jpg)
![music-scales](/img/music-scales-pentatonic.jpg)