603 lines
51 KiB
HTML
603 lines
51 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>edbrz9's Modal Chord Board</title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="css/style.css"/>
|
|
<link rel="stylesheet" href="./fonts/byl-iconfont-v3.1/style.css"/>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="homenav">
|
|
<a href=""><span class="byl-icon-home"></span></a>
|
|
</nav>
|
|
|
|
<div id="app">
|
|
<div id="canvas-container">
|
|
<canvas ref="canvas" id="keyboard" width="834" height="108">
|
|
</canvas>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
<table class="controlpanel">
|
|
<tr class="blank">
|
|
<td class="blank">
|
|
<select v-model="rootKey"
|
|
v-on:change="updateScale('clean')">
|
|
<option value=0>C</option>
|
|
<option value=1>C#/Db</option>
|
|
<option value=2>D</option>
|
|
<option value=3>D#/Eb</option>
|
|
<option value=4>E</option>
|
|
<option value=5>F</option>
|
|
<option value=6>F#/Gb</option>
|
|
<option value=7>G</option>
|
|
<option value=8>G#/Ab</option>
|
|
<option value=9>A</option>
|
|
<option value=10>A#/Bb</option>
|
|
<option value=11>B</option>
|
|
</select>
|
|
</td>
|
|
<td class="blank">
|
|
<select v-model="mode" v-on:change="updateScale('clean')">
|
|
<option value=0>Ionian</option>
|
|
<option value=1>Dorian</option>
|
|
<option value=2>Phrygian</option>
|
|
<option value=3>Lydian</option>
|
|
<option value=4>Mixolydian</option>
|
|
<option value=5>Aeolian</option>
|
|
<option value=6>Locrian</option>
|
|
<option value=7>Misheberak</option>
|
|
<option value=8>Freygish</option>
|
|
<option value=9>Hungarian Minor</option>
|
|
<option value=10>Hungarian Major</option>
|
|
<option value=11>Persian</option>
|
|
<option value=12>Whole Tone</option>
|
|
</select>
|
|
</td>
|
|
|
|
|
|
<td class="blank separator">
|
|
</td>
|
|
|
|
<td class="modeg">{{ modesdegs[mode][0] }}</td>
|
|
<td class="modeg">{{ modesdegs[mode][1] }}</td>
|
|
<td class="modeg">{{ modesdegs[mode][2] }}</td>
|
|
<td class="modeg">{{ modesdegs[mode][3] }}</td>
|
|
<td class="modeg">{{ modesdegs[mode][4] }}</td>
|
|
<td class="modeg">{{ modesdegs[mode][5] }}</td>
|
|
<td class="modeg">{{ modesdegs[mode][6] }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="blank left" colspan="2">
|
|
<span class="clickable" v-on:click="playScale">play scale ▶</span>
|
|
</td>
|
|
<td class="blank"></td>
|
|
<td>{{ noteScale[0] }}</td>
|
|
<td>{{ noteScale[1] }}</td>
|
|
<td>{{ noteScale[2] }}</td>
|
|
<td>{{ noteScale[3] }}</td>
|
|
<td>{{ noteScale[4] }}</td>
|
|
<td>{{ noteScale[5] }}</td>
|
|
<td>{{ noteScale[6] }}</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<th class="blank"></th>
|
|
<th colspan="7"><img src="./svg/M-m-sus/maj.svg"></th>
|
|
<th colspan="7"><img src="./svg/M-m-sus/min.svg"></th>
|
|
<th colspan="4"><img src="./svg/M-m-sus/sus2.svg"></th>
|
|
<th colspan="4"><img src="./svg/M-m-sus/sus4.svg"></th>
|
|
<th colspan="3"><img src="./svg/chords/dim.svg"></th>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
<th class="blank"></th>
|
|
<th><img src="./svg/chords/0.svg"></th>
|
|
<th><img src="./svg/chords/6.svg"></th>
|
|
<th><img src="./svg/chords/7.svg"></th>
|
|
<th><img src="./svg/chords/M7.svg"></th>
|
|
<th><img src="./svg/chords/a9.svg"></th>
|
|
<th><img src="./svg/chords/9.svg"></th>
|
|
<th><img src="./svg/chords/69.svg"></th>
|
|
|
|
|
|
<th><img src="./svg/chords/0.svg"></th>
|
|
<th><img src="./svg/chords/6.svg"></th>
|
|
<th><img src="./svg/chords/7.svg"></th>
|
|
<th><img src="./svg/chords/M7.svg"></th>
|
|
<th><img src="./svg/chords/a9.svg"></th>
|
|
<th><img src="./svg/chords/9.svg"></th>
|
|
<th><img src="./svg/chords/69.svg"></th>
|
|
|
|
<th><img src="./svg/chords/0.svg"></th>
|
|
<th><img src="./svg/chords/6.svg"></th>
|
|
<th><img src="./svg/chords/7.svg"></th>
|
|
<th><img src="./svg/chords/M7.svg"></th>
|
|
|
|
<th><img src="./svg/chords/0.svg"></th>
|
|
<th><img src="./svg/chords/6.svg"></th>
|
|
<th><img src="./svg/chords/7.svg"></th>
|
|
<th><img src="./svg/chords/M7.svg"></th>
|
|
|
|
<th><img src="./svg/chords/b3.svg"></th>
|
|
<th><img src="./svg/chords/dim.svg"></th>
|
|
<th><img src="./svg/chords/dim7.svg"></th>
|
|
<th><img src="./svg/chords/b5.svg"></th>
|
|
<th><img src="./svg/chords/aug.svg"></th>
|
|
<th><img src="./svg/chords/aug7.svg"></th>
|
|
<th><img src="./svg/chords/P4.svg"></th>
|
|
<th><img src="./svg/chords/TT.svg"></th>
|
|
<th><img src="./svg/chords/P5.svg"></th>
|
|
|
|
</tr>
|
|
<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>
|
|
|
|
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
var og00= new Audio('oggs/00.ogg');
|
|
var og01= new Audio('oggs/01.ogg');
|
|
var og02= new Audio('oggs/02.ogg');
|
|
var og03= new Audio('oggs/03.ogg');
|
|
var og04= new Audio('oggs/04.ogg');
|
|
var og05= new Audio('oggs/05.ogg');
|
|
var og06= new Audio('oggs/06.ogg');
|
|
var og07= new Audio('oggs/07.ogg');
|
|
var og08= new Audio('oggs/08.ogg');
|
|
var og09= new Audio('oggs/09.ogg');
|
|
var og10= new Audio('oggs/10.ogg');
|
|
var og11= new Audio('oggs/11.ogg');
|
|
var og12= new Audio('oggs/12.ogg');
|
|
var og13= new Audio('oggs/13.ogg');
|
|
var og14= new Audio('oggs/14.ogg');
|
|
var og15= new Audio('oggs/15.ogg');
|
|
var og16= new Audio('oggs/16.ogg');
|
|
var og17= new Audio('oggs/17.ogg');
|
|
var og18= new Audio('oggs/18.ogg');
|
|
var og19= new Audio('oggs/19.ogg');
|
|
var og20= new Audio('oggs/20.ogg');
|
|
var og21= new Audio('oggs/21.ogg');
|
|
var og22= new Audio('oggs/22.ogg');
|
|
var og23= new Audio('oggs/23.ogg');
|
|
var og24= new Audio('oggs/24.ogg');
|
|
var og25= new Audio('oggs/25.ogg');
|
|
var og26= new Audio('oggs/26.ogg');
|
|
var og27= new Audio('oggs/27.ogg');
|
|
var og28= new Audio('oggs/28.ogg');
|
|
var og29= new Audio('oggs/29.ogg');
|
|
var og30= new Audio('oggs/30.ogg');
|
|
var og31= new Audio('oggs/31.ogg');
|
|
var og32= new Audio('oggs/32.ogg');
|
|
var og33= new Audio('oggs/33.ogg');
|
|
var og34= new Audio('oggs/34.ogg');
|
|
var og35= new Audio('oggs/35.ogg');
|
|
</script>
|
|
<script src="js/vue.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
</html>
|