ed.brz9.dev/proj/chordboard/table.html

409 lines
46 KiB
HTML

<tr>
<td class="notename"> {{ getGoodNote(0) }} </td>
<td class="chordblock" v-on:click="playChord(0,'M')" v-bind:style="{ 'background-color' : spice2Color(0,'M')}"></td>
<td class="chordblock" v-on:click="playChord(0,'M6')" v-bind:style="{ 'background-color' : spice2Color(0,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(0,'M7m')" v-bind:style="{ 'background-color' : spice2Color(0,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(0,'M7M')" v-bind:style="{ 'background-color' : spice2Color(0,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(0,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(0,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(0,'M9')" v-bind:style="{ 'background-color' : spice2Color(0,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(0,'M69')" v-bind:style="{ 'background-color' : spice2Color(0,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(0,'m')" v-bind:style="{ 'background-color' : spice2Color(0,'m')}"></td>
<td class="chordblock" v-on:click="playChord(0,'m6')" v-bind:style="{ 'background-color' : spice2Color(0,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(0,'m7m')" v-bind:style="{ 'background-color' : spice2Color(0,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(0,'m7M')" v-bind:style="{ 'background-color' : spice2Color(0,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(0,'madd9')" v-bind:style="{ 'background-color' : spice2Color(0,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(0,'m9')" v-bind:style="{ 'background-color' : spice2Color(0,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(0,'m69')" v-bind:style="{ 'background-color' : spice2Color(0,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus2')" v-bind:style="{ 'background-color' : spice2Color(0,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus26')" v-bind:style="{ 'background-color' : spice2Color(0,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus27')" v-bind:style="{ 'background-color' : spice2Color(0,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(0,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus4')" v-bind:style="{ 'background-color' : spice2Color(0,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus46')" v-bind:style="{ 'background-color' : spice2Color(0,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus47')" v-bind:style="{ 'background-color' : spice2Color(0,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(0,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(0,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(0,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(0,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(0,'dim')" v-bind:style="{ 'background-color' : spice2Color(0,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(0,'dim7')" v-bind:style="{ 'background-color' : spice2Color(0,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(0,'b5')" v-bind:style="{ 'background-color' : spice2Color(0,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(0,'aug')" v-bind:style="{ 'background-color' : spice2Color(0,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(0,'aug7')" v-bind:style="{ 'background-color' : spice2Color(0,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(0,'p4')" v-bind:style="{ 'background-color' : spice2Color(0,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(0,'TT')" v-bind:style="{ 'background-color' : spice2Color(0,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(0,'p5')" v-bind:style="{ 'background-color' : spice2Color(0,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(1) }} </td>
<td class="chordblock" v-on:click="playChord(1,'M')" v-bind:style="{ 'background-color' : spice2Color(1,'M')}"></td>
<td class="chordblock" v-on:click="playChord(1,'M6')" v-bind:style="{ 'background-color' : spice2Color(1,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(1,'M7m')" v-bind:style="{ 'background-color' : spice2Color(1,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(1,'M7M')" v-bind:style="{ 'background-color' : spice2Color(1,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(1,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(1,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(1,'M9')" v-bind:style="{ 'background-color' : spice2Color(1,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(1,'M69')" v-bind:style="{ 'background-color' : spice2Color(1,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(1,'m')" v-bind:style="{ 'background-color' : spice2Color(1,'m')}"></td>
<td class="chordblock" v-on:click="playChord(1,'m6')" v-bind:style="{ 'background-color' : spice2Color(1,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(1,'m7m')" v-bind:style="{ 'background-color' : spice2Color(1,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(1,'m7M')" v-bind:style="{ 'background-color' : spice2Color(1,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(1,'madd9')" v-bind:style="{ 'background-color' : spice2Color(1,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(1,'m9')" v-bind:style="{ 'background-color' : spice2Color(1,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(1,'m69')" v-bind:style="{ 'background-color' : spice2Color(1,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus2')" v-bind:style="{ 'background-color' : spice2Color(1,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus26')" v-bind:style="{ 'background-color' : spice2Color(1,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus27')" v-bind:style="{ 'background-color' : spice2Color(1,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(1,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus4')" v-bind:style="{ 'background-color' : spice2Color(1,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus46')" v-bind:style="{ 'background-color' : spice2Color(1,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus47')" v-bind:style="{ 'background-color' : spice2Color(1,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(1,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(1,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(1,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(1,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(1,'dim')" v-bind:style="{ 'background-color' : spice2Color(1,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(1,'dim7')" v-bind:style="{ 'background-color' : spice2Color(1,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(1,'b5')" v-bind:style="{ 'background-color' : spice2Color(1,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(1,'aug')" v-bind:style="{ 'background-color' : spice2Color(1,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(1,'aug7')" v-bind:style="{ 'background-color' : spice2Color(1,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(1,'p4')" v-bind:style="{ 'background-color' : spice2Color(1,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(1,'TT')" v-bind:style="{ 'background-color' : spice2Color(1,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(1,'p5')" v-bind:style="{ 'background-color' : spice2Color(1,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(2) }} </td>
<td class="chordblock" v-on:click="playChord(2,'M')" v-bind:style="{ 'background-color' : spice2Color(2,'M')}"></td>
<td class="chordblock" v-on:click="playChord(2,'M6')" v-bind:style="{ 'background-color' : spice2Color(2,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(2,'M7m')" v-bind:style="{ 'background-color' : spice2Color(2,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(2,'M7M')" v-bind:style="{ 'background-color' : spice2Color(2,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(2,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(2,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(2,'M9')" v-bind:style="{ 'background-color' : spice2Color(2,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(2,'M69')" v-bind:style="{ 'background-color' : spice2Color(2,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(2,'m')" v-bind:style="{ 'background-color' : spice2Color(2,'m')}"></td>
<td class="chordblock" v-on:click="playChord(2,'m6')" v-bind:style="{ 'background-color' : spice2Color(2,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(2,'m7m')" v-bind:style="{ 'background-color' : spice2Color(2,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(2,'m7M')" v-bind:style="{ 'background-color' : spice2Color(2,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(2,'madd9')" v-bind:style="{ 'background-color' : spice2Color(2,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(2,'m9')" v-bind:style="{ 'background-color' : spice2Color(2,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(2,'m69')" v-bind:style="{ 'background-color' : spice2Color(2,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus2')" v-bind:style="{ 'background-color' : spice2Color(2,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus26')" v-bind:style="{ 'background-color' : spice2Color(2,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus27')" v-bind:style="{ 'background-color' : spice2Color(2,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(2,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus4')" v-bind:style="{ 'background-color' : spice2Color(2,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus46')" v-bind:style="{ 'background-color' : spice2Color(2,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus47')" v-bind:style="{ 'background-color' : spice2Color(2,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(2,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(2,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(2,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(2,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(2,'dim')" v-bind:style="{ 'background-color' : spice2Color(2,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(2,'dim7')" v-bind:style="{ 'background-color' : spice2Color(2,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(2,'b5')" v-bind:style="{ 'background-color' : spice2Color(2,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(2,'aug')" v-bind:style="{ 'background-color' : spice2Color(2,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(2,'aug7')" v-bind:style="{ 'background-color' : spice2Color(2,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(2,'p4')" v-bind:style="{ 'background-color' : spice2Color(2,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(2,'TT')" v-bind:style="{ 'background-color' : spice2Color(2,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(2,'p5')" v-bind:style="{ 'background-color' : spice2Color(2,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(3) }} </td>
<td class="chordblock" v-on:click="playChord(3,'M')" v-bind:style="{ 'background-color' : spice2Color(3,'M')}"></td>
<td class="chordblock" v-on:click="playChord(3,'M6')" v-bind:style="{ 'background-color' : spice2Color(3,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(3,'M7m')" v-bind:style="{ 'background-color' : spice2Color(3,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(3,'M7M')" v-bind:style="{ 'background-color' : spice2Color(3,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(3,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(3,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(3,'M9')" v-bind:style="{ 'background-color' : spice2Color(3,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(3,'M69')" v-bind:style="{ 'background-color' : spice2Color(3,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(3,'m')" v-bind:style="{ 'background-color' : spice2Color(3,'m')}"></td>
<td class="chordblock" v-on:click="playChord(3,'m6')" v-bind:style="{ 'background-color' : spice2Color(3,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(3,'m7m')" v-bind:style="{ 'background-color' : spice2Color(3,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(3,'m7M')" v-bind:style="{ 'background-color' : spice2Color(3,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(3,'madd9')" v-bind:style="{ 'background-color' : spice2Color(3,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(3,'m9')" v-bind:style="{ 'background-color' : spice2Color(3,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(3,'m69')" v-bind:style="{ 'background-color' : spice2Color(3,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus2')" v-bind:style="{ 'background-color' : spice2Color(3,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus26')" v-bind:style="{ 'background-color' : spice2Color(3,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus27')" v-bind:style="{ 'background-color' : spice2Color(3,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(3,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus4')" v-bind:style="{ 'background-color' : spice2Color(3,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus46')" v-bind:style="{ 'background-color' : spice2Color(3,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus47')" v-bind:style="{ 'background-color' : spice2Color(3,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(3,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(3,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(3,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(3,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(3,'dim')" v-bind:style="{ 'background-color' : spice2Color(3,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(3,'dim7')" v-bind:style="{ 'background-color' : spice2Color(3,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(3,'b5')" v-bind:style="{ 'background-color' : spice2Color(3,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(3,'aug')" v-bind:style="{ 'background-color' : spice2Color(3,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(3,'aug7')" v-bind:style="{ 'background-color' : spice2Color(3,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(3,'p4')" v-bind:style="{ 'background-color' : spice2Color(3,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(3,'TT')" v-bind:style="{ 'background-color' : spice2Color(3,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(3,'p5')" v-bind:style="{ 'background-color' : spice2Color(3,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(4) }} </td>
<td class="chordblock" v-on:click="playChord(4,'M')" v-bind:style="{ 'background-color' : spice2Color(4,'M')}"></td>
<td class="chordblock" v-on:click="playChord(4,'M6')" v-bind:style="{ 'background-color' : spice2Color(4,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(4,'M7m')" v-bind:style="{ 'background-color' : spice2Color(4,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(4,'M7M')" v-bind:style="{ 'background-color' : spice2Color(4,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(4,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(4,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(4,'M9')" v-bind:style="{ 'background-color' : spice2Color(4,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(4,'M69')" v-bind:style="{ 'background-color' : spice2Color(4,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(4,'m')" v-bind:style="{ 'background-color' : spice2Color(4,'m')}"></td>
<td class="chordblock" v-on:click="playChord(4,'m6')" v-bind:style="{ 'background-color' : spice2Color(4,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(4,'m7m')" v-bind:style="{ 'background-color' : spice2Color(4,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(4,'m7M')" v-bind:style="{ 'background-color' : spice2Color(4,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(4,'madd9')" v-bind:style="{ 'background-color' : spice2Color(4,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(4,'m9')" v-bind:style="{ 'background-color' : spice2Color(4,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(4,'m69')" v-bind:style="{ 'background-color' : spice2Color(4,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus2')" v-bind:style="{ 'background-color' : spice2Color(4,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus26')" v-bind:style="{ 'background-color' : spice2Color(4,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus27')" v-bind:style="{ 'background-color' : spice2Color(4,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(4,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus4')" v-bind:style="{ 'background-color' : spice2Color(4,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus46')" v-bind:style="{ 'background-color' : spice2Color(4,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus47')" v-bind:style="{ 'background-color' : spice2Color(4,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(4,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(4,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(4,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(4,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(4,'dim')" v-bind:style="{ 'background-color' : spice2Color(4,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(4,'dim7')" v-bind:style="{ 'background-color' : spice2Color(4,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(4,'b5')" v-bind:style="{ 'background-color' : spice2Color(4,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(4,'aug')" v-bind:style="{ 'background-color' : spice2Color(4,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(4,'aug7')" v-bind:style="{ 'background-color' : spice2Color(4,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(4,'p4')" v-bind:style="{ 'background-color' : spice2Color(4,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(4,'TT')" v-bind:style="{ 'background-color' : spice2Color(4,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(4,'p5')" v-bind:style="{ 'background-color' : spice2Color(4,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(5) }} </td>
<td class="chordblock" v-on:click="playChord(5,'M')" v-bind:style="{ 'background-color' : spice2Color(5,'M')}"></td>
<td class="chordblock" v-on:click="playChord(5,'M6')" v-bind:style="{ 'background-color' : spice2Color(5,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(5,'M7m')" v-bind:style="{ 'background-color' : spice2Color(5,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(5,'M7M')" v-bind:style="{ 'background-color' : spice2Color(5,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(5,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(5,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(5,'M9')" v-bind:style="{ 'background-color' : spice2Color(5,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(5,'M69')" v-bind:style="{ 'background-color' : spice2Color(5,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(5,'m')" v-bind:style="{ 'background-color' : spice2Color(5,'m')}"></td>
<td class="chordblock" v-on:click="playChord(5,'m6')" v-bind:style="{ 'background-color' : spice2Color(5,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(5,'m7m')" v-bind:style="{ 'background-color' : spice2Color(5,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(5,'m7M')" v-bind:style="{ 'background-color' : spice2Color(5,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(5,'madd9')" v-bind:style="{ 'background-color' : spice2Color(5,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(5,'m9')" v-bind:style="{ 'background-color' : spice2Color(5,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(5,'m69')" v-bind:style="{ 'background-color' : spice2Color(5,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus2')" v-bind:style="{ 'background-color' : spice2Color(5,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus26')" v-bind:style="{ 'background-color' : spice2Color(5,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus27')" v-bind:style="{ 'background-color' : spice2Color(5,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(5,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus4')" v-bind:style="{ 'background-color' : spice2Color(5,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus46')" v-bind:style="{ 'background-color' : spice2Color(5,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus47')" v-bind:style="{ 'background-color' : spice2Color(5,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(5,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(5,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(5,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(5,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(5,'dim')" v-bind:style="{ 'background-color' : spice2Color(5,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(5,'dim7')" v-bind:style="{ 'background-color' : spice2Color(5,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(5,'b5')" v-bind:style="{ 'background-color' : spice2Color(5,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(5,'aug')" v-bind:style="{ 'background-color' : spice2Color(5,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(5,'aug7')" v-bind:style="{ 'background-color' : spice2Color(5,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(5,'p4')" v-bind:style="{ 'background-color' : spice2Color(5,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(5,'TT')" v-bind:style="{ 'background-color' : spice2Color(5,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(5,'p5')" v-bind:style="{ 'background-color' : spice2Color(5,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(6) }} </td>
<td class="chordblock" v-on:click="playChord(6,'M')" v-bind:style="{ 'background-color' : spice2Color(6,'M')}"></td>
<td class="chordblock" v-on:click="playChord(6,'M6')" v-bind:style="{ 'background-color' : spice2Color(6,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(6,'M7m')" v-bind:style="{ 'background-color' : spice2Color(6,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(6,'M7M')" v-bind:style="{ 'background-color' : spice2Color(6,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(6,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(6,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(6,'M9')" v-bind:style="{ 'background-color' : spice2Color(6,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(6,'M69')" v-bind:style="{ 'background-color' : spice2Color(6,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(6,'m')" v-bind:style="{ 'background-color' : spice2Color(6,'m')}"></td>
<td class="chordblock" v-on:click="playChord(6,'m6')" v-bind:style="{ 'background-color' : spice2Color(6,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(6,'m7m')" v-bind:style="{ 'background-color' : spice2Color(6,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(6,'m7M')" v-bind:style="{ 'background-color' : spice2Color(6,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(6,'madd9')" v-bind:style="{ 'background-color' : spice2Color(6,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(6,'m9')" v-bind:style="{ 'background-color' : spice2Color(6,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(6,'m69')" v-bind:style="{ 'background-color' : spice2Color(6,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus2')" v-bind:style="{ 'background-color' : spice2Color(6,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus26')" v-bind:style="{ 'background-color' : spice2Color(6,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus27')" v-bind:style="{ 'background-color' : spice2Color(6,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(6,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus4')" v-bind:style="{ 'background-color' : spice2Color(6,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus46')" v-bind:style="{ 'background-color' : spice2Color(6,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus47')" v-bind:style="{ 'background-color' : spice2Color(6,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(6,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(6,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(6,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(6,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(6,'dim')" v-bind:style="{ 'background-color' : spice2Color(6,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(6,'dim7')" v-bind:style="{ 'background-color' : spice2Color(6,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(6,'b5')" v-bind:style="{ 'background-color' : spice2Color(6,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(6,'aug')" v-bind:style="{ 'background-color' : spice2Color(6,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(6,'aug7')" v-bind:style="{ 'background-color' : spice2Color(6,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(6,'p4')" v-bind:style="{ 'background-color' : spice2Color(6,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(6,'TT')" v-bind:style="{ 'background-color' : spice2Color(6,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(6,'p5')" v-bind:style="{ 'background-color' : spice2Color(6,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(7) }} </td>
<td class="chordblock" v-on:click="playChord(7,'M')" v-bind:style="{ 'background-color' : spice2Color(7,'M')}"></td>
<td class="chordblock" v-on:click="playChord(7,'M6')" v-bind:style="{ 'background-color' : spice2Color(7,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(7,'M7m')" v-bind:style="{ 'background-color' : spice2Color(7,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(7,'M7M')" v-bind:style="{ 'background-color' : spice2Color(7,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(7,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(7,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(7,'M9')" v-bind:style="{ 'background-color' : spice2Color(7,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(7,'M69')" v-bind:style="{ 'background-color' : spice2Color(7,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(7,'m')" v-bind:style="{ 'background-color' : spice2Color(7,'m')}"></td>
<td class="chordblock" v-on:click="playChord(7,'m6')" v-bind:style="{ 'background-color' : spice2Color(7,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(7,'m7m')" v-bind:style="{ 'background-color' : spice2Color(7,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(7,'m7M')" v-bind:style="{ 'background-color' : spice2Color(7,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(7,'madd9')" v-bind:style="{ 'background-color' : spice2Color(7,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(7,'m9')" v-bind:style="{ 'background-color' : spice2Color(7,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(7,'m69')" v-bind:style="{ 'background-color' : spice2Color(7,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus2')" v-bind:style="{ 'background-color' : spice2Color(7,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus26')" v-bind:style="{ 'background-color' : spice2Color(7,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus27')" v-bind:style="{ 'background-color' : spice2Color(7,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(7,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus4')" v-bind:style="{ 'background-color' : spice2Color(7,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus46')" v-bind:style="{ 'background-color' : spice2Color(7,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus47')" v-bind:style="{ 'background-color' : spice2Color(7,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(7,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(7,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(7,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(7,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(7,'dim')" v-bind:style="{ 'background-color' : spice2Color(7,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(7,'dim7')" v-bind:style="{ 'background-color' : spice2Color(7,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(7,'b5')" v-bind:style="{ 'background-color' : spice2Color(7,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(7,'aug')" v-bind:style="{ 'background-color' : spice2Color(7,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(7,'aug7')" v-bind:style="{ 'background-color' : spice2Color(7,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(7,'p4')" v-bind:style="{ 'background-color' : spice2Color(7,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(7,'TT')" v-bind:style="{ 'background-color' : spice2Color(7,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(7,'p5')" v-bind:style="{ 'background-color' : spice2Color(7,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(8) }} </td>
<td class="chordblock" v-on:click="playChord(8,'M')" v-bind:style="{ 'background-color' : spice2Color(8,'M')}"></td>
<td class="chordblock" v-on:click="playChord(8,'M6')" v-bind:style="{ 'background-color' : spice2Color(8,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(8,'M7m')" v-bind:style="{ 'background-color' : spice2Color(8,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(8,'M7M')" v-bind:style="{ 'background-color' : spice2Color(8,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(8,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(8,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(8,'M9')" v-bind:style="{ 'background-color' : spice2Color(8,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(8,'M69')" v-bind:style="{ 'background-color' : spice2Color(8,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(8,'m')" v-bind:style="{ 'background-color' : spice2Color(8,'m')}"></td>
<td class="chordblock" v-on:click="playChord(8,'m6')" v-bind:style="{ 'background-color' : spice2Color(8,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(8,'m7m')" v-bind:style="{ 'background-color' : spice2Color(8,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(8,'m7M')" v-bind:style="{ 'background-color' : spice2Color(8,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(8,'madd9')" v-bind:style="{ 'background-color' : spice2Color(8,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(8,'m9')" v-bind:style="{ 'background-color' : spice2Color(8,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(8,'m69')" v-bind:style="{ 'background-color' : spice2Color(8,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus2')" v-bind:style="{ 'background-color' : spice2Color(8,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus26')" v-bind:style="{ 'background-color' : spice2Color(8,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus27')" v-bind:style="{ 'background-color' : spice2Color(8,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(8,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus4')" v-bind:style="{ 'background-color' : spice2Color(8,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus46')" v-bind:style="{ 'background-color' : spice2Color(8,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus47')" v-bind:style="{ 'background-color' : spice2Color(8,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(8,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(8,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(8,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(8,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(8,'dim')" v-bind:style="{ 'background-color' : spice2Color(8,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(8,'dim7')" v-bind:style="{ 'background-color' : spice2Color(8,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(8,'b5')" v-bind:style="{ 'background-color' : spice2Color(8,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(8,'aug')" v-bind:style="{ 'background-color' : spice2Color(8,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(8,'aug7')" v-bind:style="{ 'background-color' : spice2Color(8,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(8,'p4')" v-bind:style="{ 'background-color' : spice2Color(8,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(8,'TT')" v-bind:style="{ 'background-color' : spice2Color(8,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(8,'p5')" v-bind:style="{ 'background-color' : spice2Color(8,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(9) }} </td>
<td class="chordblock" v-on:click="playChord(9,'M')" v-bind:style="{ 'background-color' : spice2Color(9,'M')}"></td>
<td class="chordblock" v-on:click="playChord(9,'M6')" v-bind:style="{ 'background-color' : spice2Color(9,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(9,'M7m')" v-bind:style="{ 'background-color' : spice2Color(9,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(9,'M7M')" v-bind:style="{ 'background-color' : spice2Color(9,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(9,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(9,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(9,'M9')" v-bind:style="{ 'background-color' : spice2Color(9,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(9,'M69')" v-bind:style="{ 'background-color' : spice2Color(9,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(9,'m')" v-bind:style="{ 'background-color' : spice2Color(9,'m')}"></td>
<td class="chordblock" v-on:click="playChord(9,'m6')" v-bind:style="{ 'background-color' : spice2Color(9,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(9,'m7m')" v-bind:style="{ 'background-color' : spice2Color(9,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(9,'m7M')" v-bind:style="{ 'background-color' : spice2Color(9,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(9,'madd9')" v-bind:style="{ 'background-color' : spice2Color(9,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(9,'m9')" v-bind:style="{ 'background-color' : spice2Color(9,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(9,'m69')" v-bind:style="{ 'background-color' : spice2Color(9,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus2')" v-bind:style="{ 'background-color' : spice2Color(9,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus26')" v-bind:style="{ 'background-color' : spice2Color(9,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus27')" v-bind:style="{ 'background-color' : spice2Color(9,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(9,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus4')" v-bind:style="{ 'background-color' : spice2Color(9,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus46')" v-bind:style="{ 'background-color' : spice2Color(9,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus47')" v-bind:style="{ 'background-color' : spice2Color(9,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(9,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(9,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(9,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(9,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(9,'dim')" v-bind:style="{ 'background-color' : spice2Color(9,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(9,'dim7')" v-bind:style="{ 'background-color' : spice2Color(9,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(9,'b5')" v-bind:style="{ 'background-color' : spice2Color(9,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(9,'aug')" v-bind:style="{ 'background-color' : spice2Color(9,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(9,'aug7')" v-bind:style="{ 'background-color' : spice2Color(9,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(9,'p4')" v-bind:style="{ 'background-color' : spice2Color(9,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(9,'TT')" v-bind:style="{ 'background-color' : spice2Color(9,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(9,'p5')" v-bind:style="{ 'background-color' : spice2Color(9,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(10) }} </td>
<td class="chordblock" v-on:click="playChord(10,'M')" v-bind:style="{ 'background-color' : spice2Color(10,'M')}"></td>
<td class="chordblock" v-on:click="playChord(10,'M6')" v-bind:style="{ 'background-color' : spice2Color(10,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(10,'M7m')" v-bind:style="{ 'background-color' : spice2Color(10,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(10,'M7M')" v-bind:style="{ 'background-color' : spice2Color(10,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(10,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(10,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(10,'M9')" v-bind:style="{ 'background-color' : spice2Color(10,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(10,'M69')" v-bind:style="{ 'background-color' : spice2Color(10,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(10,'m')" v-bind:style="{ 'background-color' : spice2Color(10,'m')}"></td>
<td class="chordblock" v-on:click="playChord(10,'m6')" v-bind:style="{ 'background-color' : spice2Color(10,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(10,'m7m')" v-bind:style="{ 'background-color' : spice2Color(10,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(10,'m7M')" v-bind:style="{ 'background-color' : spice2Color(10,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(10,'madd9')" v-bind:style="{ 'background-color' : spice2Color(10,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(10,'m9')" v-bind:style="{ 'background-color' : spice2Color(10,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(10,'m69')" v-bind:style="{ 'background-color' : spice2Color(10,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus2')" v-bind:style="{ 'background-color' : spice2Color(10,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus26')" v-bind:style="{ 'background-color' : spice2Color(10,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus27')" v-bind:style="{ 'background-color' : spice2Color(10,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(10,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus4')" v-bind:style="{ 'background-color' : spice2Color(10,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus46')" v-bind:style="{ 'background-color' : spice2Color(10,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus47')" v-bind:style="{ 'background-color' : spice2Color(10,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(10,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(10,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(10,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(10,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(10,'dim')" v-bind:style="{ 'background-color' : spice2Color(10,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(10,'dim7')" v-bind:style="{ 'background-color' : spice2Color(10,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(10,'b5')" v-bind:style="{ 'background-color' : spice2Color(10,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(10,'aug')" v-bind:style="{ 'background-color' : spice2Color(10,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(10,'aug7')" v-bind:style="{ 'background-color' : spice2Color(10,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(10,'p4')" v-bind:style="{ 'background-color' : spice2Color(10,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(10,'TT')" v-bind:style="{ 'background-color' : spice2Color(10,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(10,'p5')" v-bind:style="{ 'background-color' : spice2Color(10,'p5')}"></td>
</tr>
<tr>
<td class="notename"> {{ getGoodNote(11) }} </td>
<td class="chordblock" v-on:click="playChord(11,'M')" v-bind:style="{ 'background-color' : spice2Color(11,'M')}"></td>
<td class="chordblock" v-on:click="playChord(11,'M6')" v-bind:style="{ 'background-color' : spice2Color(11,'M6')}"></td>
<td class="chordblock" v-on:click="playChord(11,'M7m')" v-bind:style="{ 'background-color' : spice2Color(11,'M7m')}"></td>
<td class="chordblock" v-on:click="playChord(11,'M7M')" v-bind:style="{ 'background-color' : spice2Color(11,'M7M')}"></td>
<td class="chordblock" v-on:click="playChord(11,'Madd9')" v-bind:style="{ 'background-color' : spice2Color(11,'Madd9')}"></td>
<td class="chordblock" v-on:click="playChord(11,'M9')" v-bind:style="{ 'background-color' : spice2Color(11,'M9')}"></td>
<td class="chordblock" v-on:click="playChord(11,'M69')" v-bind:style="{ 'background-color' : spice2Color(11,'M69')}"></td>
<td class="chordblock" v-on:click="playChord(11,'m')" v-bind:style="{ 'background-color' : spice2Color(11,'m')}"></td>
<td class="chordblock" v-on:click="playChord(11,'m6')" v-bind:style="{ 'background-color' : spice2Color(11,'m6')}"></td>
<td class="chordblock" v-on:click="playChord(11,'m7m')" v-bind:style="{ 'background-color' : spice2Color(11,'m7m')}"></td>
<td class="chordblock" v-on:click="playChord(11,'m7M')" v-bind:style="{ 'background-color' : spice2Color(11,'m7M')}"></td>
<td class="chordblock" v-on:click="playChord(11,'madd9')" v-bind:style="{ 'background-color' : spice2Color(11,'madd9')}"></td>
<td class="chordblock" v-on:click="playChord(11,'m9')" v-bind:style="{ 'background-color' : spice2Color(11,'m9')}"></td>
<td class="chordblock" v-on:click="playChord(11,'m69')" v-bind:style="{ 'background-color' : spice2Color(11,'m69')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus2')" v-bind:style="{ 'background-color' : spice2Color(11,'sus2')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus26')" v-bind:style="{ 'background-color' : spice2Color(11,'sus26')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus27')" v-bind:style="{ 'background-color' : spice2Color(11,'sus27')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus27M')" v-bind:style="{ 'background-color' : spice2Color(11,'sus27M')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus4')" v-bind:style="{ 'background-color' : spice2Color(11,'sus4')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus46')" v-bind:style="{ 'background-color' : spice2Color(11,'sus46')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus47')" v-bind:style="{ 'background-color' : spice2Color(11,'sus47')}"></td>
<td class="chordblock" v-on:click="playChord(11,'sus47M')" v-bind:style="{ 'background-color' : spice2Color(11,'sus47M')}"></td>
<td class="chordblock" v-on:click="playChord(11,'dimb3')" v-bind:style="{ 'background-color' : spice2Color(11,'dimb3')}"></td>
<td class="chordblock" v-on:click="playChord(11,'dim')" v-bind:style="{ 'background-color' : spice2Color(11,'dim')}"></td>
<td class="chordblock" v-on:click="playChord(11,'dim7')" v-bind:style="{ 'background-color' : spice2Color(11,'dim7')}"></td>
<td class="chordblock" v-on:click="playChord(11,'b5')" v-bind:style="{ 'background-color' : spice2Color(11,'b5')}"></td>
<td class="chordblock" v-on:click="playChord(11,'aug')" v-bind:style="{ 'background-color' : spice2Color(11,'aug')}"></td>
<td class="chordblock" v-on:click="playChord(11,'aug7')" v-bind:style="{ 'background-color' : spice2Color(11,'aug7')}"></td>
<td class="chordblock" v-on:click="playChord(11,'p4')" v-bind:style="{ 'background-color' : spice2Color(11,'p4')}"></td>
<td class="chordblock" v-on:click="playChord(11,'TT')" v-bind:style="{ 'background-color' : spice2Color(11,'TT')}"></td>
<td class="chordblock" v-on:click="playChord(11,'p5')" v-bind:style="{ 'background-color' : spice2Color(11,'p5')}"></td>
</tr>