开过光的序
当一个民谣小哥抱着吉他哼唱着《情非得已》时，他右手扫着音孔处的琴弦，左手变换着按着琴颈处的琴弦，一段简单的弹唱便看起来有模有样。在不看脸不看唱功的情况下，是什么原理才赋予这位小哥如此风骚的魅力呢？
这就是吉他伴奏。
而他只是一个吉他初学者，还没办法给歌曲编配伴奏，只好从网上找来吉他谱，按照里面的标识来进行弹奏。他找到了下面这样的谱子：
这是一个典型的吉他弹唱谱该有的样子，它可以被分成四个部分：
和弦指法：用于标记该小节内的和弦名以及对应的按弦指法。六线谱：它是专门属于吉他的谱子，六条横线至上而下分别对应吉他的一弦到六弦，横线上添加各种符号来标记右手的弹奏方式。简谱：这里是数字简谱，配以各种符号来描述歌曲的旋律与节奏。歌词：嗯，就是歌词。
对于初学者，吉他入门的坎儿在于左手的指法，当时我记下了大多数和弦的指法图，左手指尖的磨出的茧也是起了褪，褪了起，身为乐理渣的我终有一天疑惑了，问号三连：
1. 这个和弦为什么叫这个名字？
2. 这个和弦为什么是这个指法？
3. 同一和弦在吉他上到底有多少种不同的指法？
本文将基于基本的乐理知识，用代码推导计算出以上问题的答案，并将其结果可视化。
一、从一个单音说起
心虚的声明：外行人基于自己的理解强行解释乐理，望专业人士轻喷
声音因物体振动而产生，每一个不同频率（即不同音高）的声响都可以称之为一个单音，但人耳的辨音能力有限，音乐体系里将一段音程中相邻的单音的最小间隔称为半音（这样划分既在人耳的辨音范围内，又符合音程的循环）；
相隔半音的两个音的频率比值为2的12次方根。
为什么是这个值，这就得提到十二平均律。
音乐界老前辈经过大量的听力实践后，发现例如do到高音do这个音程作为一个循环听起来最和谐，并且这高音do与do的频率比率刚好是2，在保证单音之间跨度和谐、而且能较清晰地辨听的情况下，将这个音程按频率比划分成了12等份，这与中国的五声音阶（宫商角徵羽）和西洋的七声音阶存在相互映照的关系，如下图（这里我暂时用数字标记十二平均律音程上的每个音）：
类似
do与
高音do之间的关系在七声音阶里被称为
八度；
也就是说一个音与它对应高八度的音之间的跨度便是一个音程，它们的频率比为1：2。
1（do）与2（re）之间是一个全音的跨度，而3（mi）与4（fa）、7（si）与1.（高音do）之间是一个半音的跨度，一个全音跨度就相当于两个半音跨度，可以看出1（do）与2（re）之间还夹了一个音，我们称它为#1（升do）或者说b2（降re）。
理解了这些后，便可以用代码实现一个单音类：
1. 首先来确定一种单音的书写形式
可以借用简谱的标记方式，数字1、2、3、4、5、6、7，分别代表唱名的do、re、mi、fa、sol、la、si；
当这个音升半调时，在数字的前面加上#，例如#1（升do），降半调时，在数字前面加上b，例如b1（降do）；
当标记一个音的高八度音时，在数字的右侧加一个“点号”，例如1.（高音do），#2.（高音升re）（因为字符串没法像简谱那样在数字顶部加点号），当标记一个音的低八度音时，在数字的左侧加一个“点号”，例如.1（低音do），.b2（低音降re）；
2. 构建单音类
function is(data) {
return function(type) {
return Object.prototype.toString.call(data) === `[object ${type}]`;
}
}
class Tone {
constructor(toneString = '1', string, fret) {
this.syllableMap = ['do', 're', 'mi', 'fa', 'sol', 'la', 'si'];
this.keyMap = ['1', ['#1', 'b2'], '2', ['#2', 'b3'], '3', '4', ['#4', 'b5'], '5', ['#5', 'b6'], '6', ['#6', 'b7'], '7'];
this.intervalMap = ['C', ['#C', 'bD'], 'D', ['#D', 'bE'], 'E', 'F', ['#F', 'bG'], 'G', ['#G', 'bA'], 'A', ['#A', 'bB'], 'B'];
this.toneString = toneString;
this.toneNormal = toneString.replace(/\./g, '');
this.key = toneString.replace(/\.|b|#/g, '');
this.syllableName = this.syllableMap[+this.key - 1];
this.flat = toneString.match('b') ? 'b' : '';
this.sharp = toneString.match('#') ? '#' : '';
let octave_arr = toneString.split(this.key);
let octave_flat = octave_arr[0].toString().match(/\./g);
let octave_sharp = octave_arr[1].toString().match(/\./g);
this.octave = (octave_sharp ? octave_sharp.length : 0) - (octave_flat ? octave_flat.length : 0);
this.position = {
string: string,
fret: fret
};
}
findKeyIndex(keyString) {
return this.keyMap.findIndex((item) => {
if (is(item)('Array')) {
return item.includes(keyString);
} else if (item === keyString) {
return true;
} else {
return false;
}
});
}
step(num) {
let keyString = this.flat + this.sharp + this.key;
let len = this.keyMap.length;
let index = this.findKeyIndex(keyString);
if (index > -1) {
num = +num;
let nextIndex = parseInt(index + num, 0);
let octave = this.octave;
if (nextIndex >= len) {
let index_gap = nextIndex - len;
octave += Math.floor(index_gap / len) + 1;
nextIndex = index_gap % len;
} else if (nextIndex < 0) {
let index_gap = nextIndex;
octave += Math.floor(index_gap / len);
nextIndex = index_gap % len + len;
}
let nextKey = this.keyMap[nextIndex];
let octaveString = new Array(Math.abs(octave)).fill('.').join('');
let toneString = '';
if (!is(nextKey)('Array')) {
toneString = (octave < 0 ? octaveString : '') + nextKey + (octave > 0 ? octaveString : '');
return new this.constructor(toneString, this.position.string, this.position.fret + num);
} else {
return nextKey.map((key) => {
return new this.constructor((octave < 0 ? octaveString : '') + key + (octave > 0 ? octaveString : ''), this.position.string, this.position.fret + num);
});
}
} else {
return null;
}
}
}
复制代码
有了这个单音类后，后续可以借用它来方便地对比两个音之间的跨度，并且可以通过构建吉他每根弦的初始音，通过step方法推导出吉他其他任意位置的音高。
执行示例：
创建一个1（do）的单音实例
单音1（do），往高跨5个半音，得到单音4（fa）；往高跨6个半音，得到两个音#4（升fa）与b5（降sol），这两个音处于同一音高，本质相同，只是标记方式不一样。
二、和弦命名推导
1. 什么是和弦
先上个百度词条：
由此白话提炼和弦的三个要素：
（1）由三个或三个以上的音构成；
（2）音之间有跨度关系（三度或非三度）；
（3）音之间要从低到高排列。
由此我画了一张图：
一个音程上的
12个音可以像时钟的刻度那样排列，
顺时针方向代表
音的从低到高；然后我们将“时针”、“分针”、“秒针”在不重叠且相互有一定间隔的情况下随意拨弄，把他们指向的音顺时针连起来，就
可能构成了一个三个音组成的
和弦（同理更多音组成的和弦就相当于再往里加指针）。
这样一看，便能发现这更像是一个排列组合问题，拿三个音的组合来说，从12个音里面任意挑3个音（不排序），会有220种情况，但这里面并不都是和弦；和弦和弦，顾名思义，听起来得和谐得不难听，这开始更像是人们的主观意识判断，但随着音乐知识体系的成熟，和弦也会有一套公认的标准，变得向数学公式那样有迹可循。
细想一下，一个和弦好不好听，带什么感情色彩，取决于组成音的相互映衬关系，也就是音之间的相互音高间隔，隔得太近会别扭，隔得太远也别扭，那就得取个适中的，这个适中就是三度；
三度又分为大三度与小三度
大三度：两个全音的跨度，即4个半音的跨度。
小三度：一个全音加一个半音的跨度，即3个半音的跨度。
C调下的C和弦组成音如下：
对照上图那个刻度盘可数出来：
1（do）与3（mi）中间还夹了#1/b2、2、#2/b3这3个音，共4个半音的跨度；
3（mi）与5（sol）中间还夹了4、#4/b5这2个音，共3个半音的跨度；
那么像这样组成的和弦就成为大三和弦。
2. 常见和弦标记规则
| 和弦类型 | 组成 | 标记 |
|---|
大三和弦 | 大三度 + 小三度 | |
小三和弦 | 小三度 + 大三度 | m |
增三和弦 | 大三度 + 大三度 | aug |
减三和弦 | 小三度 + 小三度 | dim |
大小七和弦（属七和弦） | 大三和弦 + 小三度 | 7或Mm7 |
大大七和弦（大七和弦） | 大三和弦 + 大三度 | maj7或M7 |
小小七和弦（小七和弦） | 小三和弦 + 小三度 | m7或mm7 |
小大七和弦 | 小三和弦 + 大三度 | mM7 |
减七和弦 | 减三和弦 + 小三度 | dim7 |
半减七和弦 | 减三和弦 + 大三度 | m7-5 |
增属七和弦 | 增三和弦 + 减三度 | 7#5或M7+5 |
增大七和弦 | 增三和弦 + 小三度 | aug7或Maj7#5 |
加音和弦与指定和弦根音相对复杂些，暂不讨论。
3. 和弦根音
和弦组成音中的第一个音为和弦的根音，也叫基础音，可以根据当前的调式和某和弦的根音来判断该和弦的初始名称，例如在C调下，根音与和弦名的对照关系如下：
通俗点说相当于，在某调下，一个和弦的根音为该调的1（do）时，那它就叫某和弦（额外标记根据音之间的三度关系再添加），例如：
C调下：
根音为1（do）构成的和弦名为C；
根音为2（re）构成的和弦名为D；
D调下：
根音为1（do）构成的和弦名为D；
根音为1（do）构成的和弦名为E；
B调下：
根音为1（do）构成的和弦名为B；
根音为2（do）构成的和弦名为C；
4. 和弦完整名称计算
基于以上的乐理规则，可以实现如下推导和弦名的类：
class ChordName {
constructor(chordTone) {
this.toneUtil = new Tone();
}
getToneSpace(tonePre, toneNext) {
let toneSpace = this.toneUtil.findKeyIndex(toneNext) - this.toneUtil.findKeyIndex(tonePre);
return toneSpace = toneSpace < 0 ? toneSpace + 12 : toneSpace;
}
isMajorThird(tonePre, toneNext) {
return this.getToneSpace(tonePre, toneNext) === 4;
}
isMinorThird(tonePre, toneNext) {
return this.getToneSpace(tonePre, toneNext) === 3;
}
isMajorMajorThird(tonePre, toneNext) {
return this.getToneSpace(tonePre, toneNext) === 5;
}
isMinorMinorThird(tonePre, toneNext) {
return this.getToneSpace(tonePre, toneNext) === 2;
}
isMajorChord(chordTone) {
return this.isMajorThird(chordTone[0], chordTone[1]) && this.isMinorThird(chordTone[1], chordTone[2]);
}
isMinorChord(chordTone) {
return this.isMinorThird(chordTone[0], chordTone[1]) && this.isMajorThird(chordTone[1], chordTone[2]);
}
isAugmentedChord(chordTone) {
return this.isMajorThird(chordTone[0], chordTone[1]) && this.isMajorThird(chordTone[1], chordTone[2]);
}
isDiminishedChord(chordTone) {
return this.isMinorThird(chordTone[0], chordTone[1]) && this.isMinorThird(chordTone[1], chordTone[2]);
}
isSus4(chordTone) {
return this.isMajorMajorThird(chordTone[0], chordTone[1]) && this.isMinorMinorThird(chordTone[1], chordTone[2]);
}
isMajorMinorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMajorChord(chordTone) && this.isMinorThird(chordTone[2], chordTone[3]);
}
isMinorMajorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMinorChord(chordTone) && this.isMajorThird(chordTone[2], chordTone[3]);
}
isMajorMajorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMajorChord(chordTone) && this.isMajorThird(chordTone[2], chordTone[3]);
}
isMinorMinorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMinorChord(chordTone) && this.isMinorThird(chordTone[2], chordTone[3]);
}
isDiminishedSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isDiminishedChord(chordTone) && this.isMinorThird(chordTone[2], chordTone[3]);
}
isHalfDiminishedSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isDiminishedChord(chordTone) && this.isMajorThird(chordTone[2], chordTone[3]);
}
isHalfAugmentedSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isAugmentedChord(chordTone) && this.isMinorMinorThird(chordTone[2], chordTone[3]);
}
isAugmentedSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isAugmentedChord(chordTone) && this.isMinorThird(chordTone[2], chordTone[3]);
}
getKeyName(key) {
let keyName = this.toneUtil.intervalMap[this.toneUtil.findKeyIndex(key)];
if (is(keyName)('Array')) {
keyName = /b/.test(key) ? keyName[1] : keyName[0];
};
return keyName;
}
getChordName(chordTone) {
let rootKey = chordTone[0];
let chordRootName = this.getKeyName(rootKey);
let suffix = '...';
let suffixArr = [];
let chord3SuffixMap = [{
fn: this.isMajorChord,
suffix: ''
}, {
fn: this.isMinorChord,
suffix: 'm'
}, {
fn: this.isAugmentedChord,
suffix: 'aug'
}, {
fn: this.isDiminishedChord,
suffix: 'dim'
}, {
fn: this.isSus4,
suffix: 'sus4'
}];
let chord4SuffixMap = [{
fn: this.isMajorMinorSeventhChord,
suffix: '7'
}, {
fn: this.isMinorMajorSeventhChord,
suffix: 'mM7'
}, {
fn: this.isMajorMajorSeventhChord,
suffix: 'maj7'
}, {
fn: this.isMinorMinorSeventhChord,
suffix: 'm7'
}, {
fn: this.isDiminishedSeventhChord,
suffix: 'dim7'
}, {
fn: this.isHalfDiminishedSeventhChord,
suffix: 'm7-5'
}, {
fn: this.isHalfAugmentedSeventhChord,
suffix: '7#5'
}, {
fn: this.isAugmentedSeventhChord,
suffix: 'aug7'
}];
if (chordTone.length === 3) {
suffixArr = chord3SuffixMap.filter((item) => {
return item.fn.bind(this, chordTone)();
});
suffix = suffixArr.length > 0 ? suffixArr[0].suffix : suffix;
} else {
suffixArr = chord4SuffixMap.filter((item) => {
return item.fn.bind(this, chordTone)();
});
suffix = suffixArr.length > 0 ? suffixArr[0].suffix : suffix;
}
return chordRootName + suffix;
}
}
复制代码
运行示例：
三、和弦指法推导
1. 指法图
一个完整的吉他和弦指法图的例子如下，右边对照为真实的吉他：
说明下几个名词的意思：
品位：真实的吉他琴颈上被划分成了很多格子，当手指按在不同的格子上时，改变了对应琴弦振动的弦长，那么它的发音高低也会跟着改变，这些按住可以改变音高的格子就被称作品位，或品格（不得不说这“品”字取得真好）；
品位标记：在指法图的左侧标记了一个数字，表示图上该行的品位实际位于吉他上的品位是多少（所谓的相对坐标系与绝对坐标系）；
空弦音：即第0品，左手不用按标记对应的弦，右手直接拨它；
和弦外音：当某根弦的空弦音以及在它在该指法图范围内能产生的音都不属于该和弦的组成音时，那么这根弦应该禁止弹奏，故在该弦上面标记一个“叉号”；
按弦手指标记：用黑色的圆点标记手指按在各弦上的位置，最完整的指法图还会在上面加上数字1、2、3、4，分别代表食指、中指、无名指、小拇指，相当于哪根手指该放哪儿都告诉清楚了。
2. 吉他弦上音的分布
我从网上抠来了这张带着历史气息的彩图：
可以观察到，同样一个音，在吉他弦上的位置可以有许多个；而简单的和弦的组成音也就三四个，所以要想一下子从这些纵横的格子里寻出某个和弦所有可能的指法，同时还要考虑实际指法的各种约束：
比如你左手能用上的只有不超过5根手指头而弦有6根，但食指是可以使用大横按按多根弦的，但大横按只能按在该指法的最低品位上；还得考虑指法按弦后是包括了和弦里所有的音，同时相邻两弦的音不能一样...
诸如此类，想要一下子心算出来所有可能的结果，怕是为难我胖虎了。
不过这个很适合用递归算法解决。
3. 指法推导
为此专门构建一个类，在初始化的时候使用之前写的单音类，算出吉他弦上所有位置的音。之后就可以通过this.toneMap[tring][fret]的形式直接获得该位置的音，例如this.toneMap[1][3]获取1弦3品的音。
class GuitarChord {
constructor() {
this.fretLength = 15;
this.initialTone = [
new Tone('3.', 1, 0),
new Tone('7', 2, 0),
new Tone('5', 3, 0),
new Tone('2', 4, 0),
new Tone('.6', 5, 0),
new Tone('.3', 6, 0)
];
this.toneMap = [];
for (let string = 1; string <= this.initialTone.length; string++) {
this.toneMap[string] = [];
for (let fret = 0; fret <= this.fretLength; fret++) {
this.toneMap[string].push(this.initialTone[string - 1].step(fret));
}
}
}
}
复制代码
给它加上一个公用的单音位置搜寻方法：
findFret(key, toneArray, fretStart, fretEnd) {
key = key.replace(/\./g, '');
let fretArray = [];
fretStart = fretStart ? fretStart : 0;
fretEnd = fretEnd ? (fretEnd + 1) : toneArray.length;
for (let i = fretStart; i < fretEnd; i++) {
if (is(toneArray[i])('Array')) {
let toneStringArray = toneArray[i].map((item) => {
return item.toneNormal;
});
if (toneStringArray.includes(key)) {
fretArray.push(i);
}
} else {
if (toneArray[i].toneString.replace(/\./g, '') === key) {
fretArray.push(i);
}
}
}
return fretArray;
}
复制代码
接下来是核心的循环递归算法，先构思下大致的递归的流程：
（1）指定从1弦开始，启动递归。（递归入口）
（2）指定了某弦后，循环遍历和弦的组成音，计算是否有音落在该弦指定的品位范围内，如果没有，返回false；如果有，转步骤（3）。
（3）先保存该音与它的按弦位置，当前位置最终有效取决于，当且仅当在它后面的所有弦也是能找到按弦位置的有效解，如果该弦是第6弦，返回true，递归结束（递归出口），否则转步骤（4）；
（4）当前结果最终的有效性 = 当前临时结果有效性（true） && 下一根弦是否存在有效解（此时已转至步骤（3）） 。若当前结果最终有效，返回true；若无效，回退pop出之前在该弦保存的结果。
最后实现还需考虑相邻两弦音不能相同，另外为了便于回溯整体结果，在单次的结果保存时，添加了指向上一次结果的指针pre。
calc(stringIndex, toneIndex, fretStart, fretEnd, preResult, positionSave) {
let toneArray = this.toneMap[stringIndex];
let result = false;
for (let i = 0; i < this.chordTone.length; i++) {
if (i !== toneIndex) {
let resultNext = false;
let toneKey = this.chordTone[i];
let fret = this.findFret(toneKey, toneArray, fretStart, fretEnd);
if (fret.length > 0) {
let resultNow = {
string: stringIndex,
fret: fret[0],
key: toneKey
}
resultNow.pre = preResult ? preResult : null;
positionSave.push(resultNow);
resultNext = true;
if (stringIndex < this.initialTone.length) {
let nextStringIndex = stringIndex + 1;
resultNext = resultNext && this.calc(nextStringIndex, i, fretStart, fretEnd, resultNow, positionSave);
} else {
resultNext = true;
}
if (!resultNext) {
positionSave.pop();
}
} else {
resultNext = false;
}
result = result || resultNext;
}
};
return result;
}
复制代码
使用此递归方法，用1、3、5为和弦组成音做输入，会得到类似下面这样的结果：
递归在执行的时候，在每个节点上可能产生多个分支节点层层往下深入，以上的打印其实就是列出了每个节点的数据。而我们需要的是将这个递归结果拆分为不同指法结果的数组，就像下面这样：
为此添加一个
filter函数：
filter(positionSave) {
let allResult = positionSave.filter((item) => {
return item.string === this.initialTone.length
}).map((item) => {
let resultItem = [{
string: item.string,
fret: item.fret,
key: item.key
}];
while (item.pre) {
item = item.pre;
resultItem.unshift({
string: item.string,
fret: item.fret,
key: item.key
});
}
return resultItem;
});
if (allResult.length > 0) {
return this.integrityFilter(this.fingerFilter(this.rootToneFilter(allResult)));
} else {
return [];
}
}
复制代码
可以看到回溯计算出理想的结果形式后，末尾还调用了多个过滤器，因为代码计算出的符合组成音的所有指法组合，可能并不符合真实的按弦情况，需要进行多重的过滤。
4. 指法过滤
例如以1、3、5作为和弦音，根音为1，而初步得到的结果可能如下：
而一个和弦在吉他上弹奏时，根音应该为所有发声的音中最低的音，上图中最低的音要么位于是
6弦0品的
3，要么是位于
6弦3品的
5，不符合要求，而
5弦3品刚好是该和弦根音，故应该
禁用第6弦（这里的禁用是将该弦的按弦品位
fret标记为
null）
rootToneFilter(preResult) {
let nextResult = new Set();
preResult.forEach((item) => {
let realStringLength = 6;
for (var i = item.length - 1; i >= 0; i--) {
if (item[i].key !== this.rootTone) {
item[i].fret = null;
item[i].key = null;
realStringLength--;
} else {
break;
}
}
if (realStringLength >= 4) {
nextResult.add(JSON.stringify(item));
}
});
return [...nextResult].map(item => JSON.parse(item));
}
复制代码
左手按弦的时候，一般最多只能用上4个手指（大拇指极少用到），而用递归方法算出的结果，可能包含了各种奇奇怪怪的按法，比如下面这个：
看上去包含了和弦的所有组成音，但是就算经过上一轮的过滤禁用了第6弦，每个
非0的品位都需要用手指去按，这样算下来也需要
5个手指，故类似这样的结果都应该二次过滤掉：
fingerFilter(preResult) {
return preResult.filter((chordItem) => {
let minFret = Math.min.apply(null, chordItem.map(item => item.fret).filter(fret => (fret != null)));
let fingerNum = minFret > 0 ? 1 : 0;
chordItem.forEach((item) => {
if (item.fret != null && item.fret > minFret) {
fingerNum++;
}
});
return fingerNum <= 4;
});
}
复制代码
递归计算所有可能的指法组合时，虽然保证了相邻两个音不重复，但不保证所有的和弦组成音都被使用了，而且在前一轮根音过滤时，可能禁用了部分弦的发声，这可能导致丢掉了其中唯一一个组成音，所以最后还需进行一轮完整性过滤，剔除残次品：
integrityFilter(preResult) {
return preResult.filter((chordItem) => {
let keyCount = [...new Set(chordItem.map(item => item.key).filter(key => key != null))].length;
return keyCount === this.chordTone.length;
});
}
复制代码
5. 指法计算入口
由这里输入和弦的组成音，计算这些音所有可能出现的品格位置，然后从低到高，依次计算4或5个品格范围内的和弦指法，经整合过滤后得到该和弦所有的位置的正确指法。
注意，这里的输入音是在C调的基础下，故计算出的对应的和弦名和指法图也是C调下的。
chord() {
let chordTone;
if (is(arguments[0])('Array')) {
chordTone = arguments[0];
} else {
chordTone = Array.prototype.slice.apply(arguments).map((item) => {
let tone = new Tone(item.toString());
return tone.flat + tone.sharp + tone.key;
});
}
this.chordTone = chordTone;
this.rootTone = chordTone[0];
this.chordResult = [];
let fretArray = [];
chordTone.forEach((item) => {
for (let i = 1; i < this.toneMap.length; i++) {
fretArray = fretArray.concat(this.findFret(item, this.toneMap[i]));
}
});
fretArray = [...new Set(fretArray)];
fretArray.sort((a, b) => {
return a - b;
});
for (let i = 0; i < fretArray.length; i++) {
let fretStart = fretArray[i];
let fretEnd = fretStart > 0 ? (fretStart + 4) : (fretStart + 5);
if (fretEnd <= this.fretLength) {
let positionSave = [];
if (this.calc(1, null, fretStart, fretEnd, null, positionSave)) {
this.chordResult.push(...this.filter(positionSave));
}
}
}
let result = [...new Set(this.chordResult.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
return result;
}
复制代码
运行示例：
三、和弦指法结果可视化
特意挑选了svg作图，因为之前不会，借此机会学习了一下。
一个较为完整的和弦指法图，svg的代码示例如下（把这个扔到自己的html里打开也能直观看到结果）：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg" width="200" height="220" viewBox="0 0 150 150" preserveAspectRatio="xMidYMin meet">
<defs>
<g id="forbidden">
<path d="M-5 -5 L5 5 M-5 5 L5 -5" stroke="#666" stroke-width="1" fill="none"/>
</g>
<g id="blank_circle">
<circle cx="0" cy="0" r="6" stroke="#666" stroke-width="1" fill="none"/>
</g>
<g id="block_circle">
<circle cx="0" cy="0" r="8" fill="#333"/>
</g>
</defs>
<rect x="25" y=45 rx="5" ry="5" width="100" height="100" style="fill:none;stroke:#666;stroke-width:2"/>
<path d="M25 65 L125 65 M25 85 L125 85 M25 105 L125 105 M25 125 L125 125 M45 45 L45 145 M65 45 L65 145 M85 45 L85 145 M105 45 L105 145 M25 40 L125 40" stroke="#666" stroke-width="2" fill="none"/>
<use xlink:href="#forbidden" x="25" y="30" />
<use xlink:href="#blank_circle" x="125" y="30" />
<use xlink:href="#blank_circle" x="85" y="30" />
<use xlink:href="#block_circle" x="105" y="55" />
<use xlink:href="#block_circle" x="65" y="75" />
<use xlink:href="#block_circle" x="45" y="95" />
<text x="67" y="20" fill="#333" font-size="20" font-weight="700">C</text>
<text x="41.5" y="160" fill="#333" font-size="10" font-weight="700">C</text>
<text x="61.5" y="160" fill="#333" font-size="10" font-weight="700">E</text>
<text x="81.5" y="160" fill="#333" font-size="10" font-weight="700">G</text>
<text x="101.5" y="160" fill="#333" font-size="10" font-weight="700">C</text>
<text x="121.5" y="160" fill="#333" font-size="10" font-weight="700">E</text>
<text x="8" y="60" font-size="14" font-weight="700" fill="#333">1</text>
</svg>
复制代码
显示效果如下：
当然了，得设计出一套可以画任意svg指法图的方案。
简单来说，就是将指法图拆分为多个子元素，有的画网格，有的画按弦位置，有的画空弦符号，诸如此类，然后根据传入的指法结果，动态创建这些子元素加入svg即可；但需特别考虑各个元素可能会动态改变的位置，以及对于大横按的绘图处理。
这里代码我一摞全摆出来了，带了较为详尽的注释，就不细讲了（打字打累了...）
class ChordSvg {
constructor() {
this.SVG_NS = "http://www.w3.org/2000/svg";
this.XLINK_NS = "http://www.w3.org/1999/xlink";
this.ATTR_MAP = {
"className": "class",
"svgHref": "href"
};
this.NS_MAP = {
"svgHref": this.XLINK_NS
};
this.initChordSvg();
this.minFret = 0;
}
createSVG(tag, attributes) {
let elem = document.createElementNS(this.SVG_NS, tag);
for (let attribute in attributes) {
let name = (attribute in this.ATTR_MAP ? this.ATTR_MAP[attribute] : attribute);
let value = attributes[attribute];
if (attribute in this.NS_MAP) {
elem.setAttributeNS(this.NS_MAP[attribute], name, value);
} else {
elem.setAttribute(name, value);
}
}
return elem;
}
createUse(href, x, y) {
return this.createSVG('use', {
svgHref: href,
x: x,
y: y
});
}
setForbidden(svg, string = 6) {
svg.appendChild(this.createUse('#forbidden', 25 + 20 * (6 - string), 30));
}
setOpen(svg, string = 6) {
svg.appendChild(this.createUse('#blank_circle', 25 + 20 * (6 - string), 30));
}
setFinger(svg, string = 6, fret = 0) {
if (+fret > 0 && +fret <= 5) {
svg.appendChild(this.createUse('#block_circle', 25 + 20 * (6 - string), 35 + 20 * fret));
}
}
setBarre(svg, stringTo, fret, barreFret) {
if (fret > 0 && fret <= 5) {
svg.appendChild(this.createSVG('rect', {
className: 'chord-barre',
width: stringTo * 20,
x: 15 + 20 * (6 - stringTo),
y: 27 + 20 * fret,
rx: 8,
ry: 8
}));
}
}
setFretOffset(svg, fret, fretOffset, isBarreCover) {
if (fret > 0) {
let text = this.createSVG('text', {
className: 'chord-barre-fret',
x: isBarreCover ? 1 : 8,
y: 40 + fret * 20
});
text.innerHTML = fretOffset;
svg.appendChild(text);
}
}
setStringKey(svg, string, keyName) {
let xFixed = keyName.length === 2 ? -4 : 0;
let text = this.createSVG('text', {
className: 'chord-string-key',
x: 21.5 + 20 * (6 - string) + xFixed,
y: 160
});
text.innerHTML = keyName;
svg.appendChild(text);
}
setChordName(svg, name = '') {
let xFixed = /\.\.\./.test(name) ? 10 : 0;
let text = this.createSVG('text', {
className: 'chord-name',
x: 75 - name.toString().length * 7 + xFixed,
y: 20
});
text.innerHTML = name;
svg.appendChild(text);
}
initChordSvg() {
this.svg = this.createSVG('svg', {
className: 'chord-svg',
viewBox: '0 0 150 150',
preserveAspectRatio: 'xMidYMin meet'
});
this.chordRect = this.createSVG('rect', {
className: 'chord-rect',
x: 25,
y: 45,
rx: 5,
ry: 5
});
this.chordGird = this.createSVG('path', {
className: 'chord-gird',
d: 'M25 65 L125 65 M25 85 L125 85 M25 105 L125 105 M25 125 L125 125 M45 45 L45 145 M65 45 L65 145 M85 45 L85 145 M105 45 L105 145 M25 40 L125 40'
});
this.defs = this.createSVG('defs');
this.g_forbidden = this.createSVG('g', {
id: 'forbidden'
});
this.g_forbidden.appendChild(this.createSVG('path', {
className: 'chord-forbidden',
d: 'M-5 -5 L5 5 M-5 5 L5 -5'
}));
this.g_blank_circle = this.createSVG('g', {
id: 'blank_circle',
});
this.g_blank_circle.appendChild(this.createSVG('circle', {
className: 'chord-blank-circle',
cx: 0,
cy: 0,
r: 6
}));
this.g_block_circle = this.createSVG('g', {
id: 'block_circle'
});
this.g_block_circle.appendChild(this.createSVG('circle', {
className: 'chord-block-circle',
cx: 0,
cy: 0,
r: 8
}));
this.defs.appendChild(this.g_forbidden);
this.defs.appendChild(this.g_blank_circle);
this.defs.appendChild(this.g_block_circle);
this.svg.appendChild(this.chordRect);
this.svg.appendChild(this.chordGird);
this.svg.appendChild(this.defs);
}
drawChord(chordTone, chord, target) {
let svg = this.svg.cloneNode(true);
let fretArr = chord.map(item => item.fret).filter(fret => (fret != null));
let maxFret = Math.max.apply(null, fretArr);
let minFret = Math.min.apply(null, fretArr);
let fretOffset = maxFret <= 5 ? 0 : minFret;
let barreCount = 0;
let barreStringTo = 1;
let chordName = new ChordName();
chord.forEach((item) => {
if (item.fret == null) {
this.setForbidden(svg, item.string);
} else if (item.fret === 0) {
this.setOpen(svg, item.string);
} else {
this.setFinger(svg, item.string, fretOffset > 0 ? item.fret - fretOffset + 1 : item.fret);
}
if (item.fret === minFret) {
barreStringTo = item.string > barreStringTo ? item.string : barreStringTo;
barreCount++;
}
if (item.fret != null) {
this.setStringKey(svg, item.string, chordName.getKeyName(item.key));
}
});
let relativeFret = fretOffset > 0 ? minFret - fretOffset + 1 : minFret;
if (barreCount > 1) {
this.setBarre(svg, barreStringTo, relativeFret, minFret);
}
this.setFretOffset(svg, relativeFret, minFret, barreStringTo === 6);
this.setChordName(svg, chordName.getChordName(chordTone));
target ? target.appendChild(svg) : document.body.appendChild(svg);
}
}
复制代码
svg也是能使用css修饰部分属性的，公用样式得加上：
.chord-svg{
width: 200px;
height: 220px;
}
.chord-rect{
width: 100px;
height: 100px;
fill:none;
stroke:#666;
stroke-width:2;
}
.chord-gird{
stroke: #666;
stroke-width: 2;
fill: none;
}
.chord-forbidden,.chord-blank-circle{
stroke: #666;
stroke-width: 1;
fill: none;
}
.chord-block-circle{
fill: #333;
}
.chord-barre{
height: 16px;
fill:#333;
}
.chord-barre-fret{
fill:#333;
font-size: 14px;
font-weight: 700;
}
.chord-string-key{
fill:#333;
font-size: 10px;
font-weight: 700;
}
.chord-name{
fill:#333;
font-size: 20px;
font-weight: 700;
}
复制代码
哐当当一个运行示例：
当然，我怎会止步于此。
基于以上已经实现的代码，我又折腾出了一个网页工具，在数字上左右拖动来改变和弦的组成音，从而时时计算和弦指法图：
在线试玩地址
如果你不按套路出牌，给了间隔古怪的组成音，可能会这样（因为算不出完整的和弦名字了，就用省略号代替了）：
当然，如果你乱拖一通，大多数情况会是这样：
上过香的尾
一边搜着基础乐理，一边填补着漫无边际的知识空白，可算是把这个东西弄出来了，涉及的还只是音乐基础的冰山一角，比如还有许多更高级的更多音组成的和弦、以及更加稀奇古怪的和弦名字，能力有限，这里就先不纳入考虑范畴了。
不得不说，我明明是来写代码的，却不知不觉给自己上起了音乐小课。
有些做事的动力就是这么奇妙。
若看官还觉得饶有意思，便胜却人间无数。
项目地址：github.com/youngdro/gu…
在线试玩二次传送门
-------- 以下广告可以忽略 --------
往期文章：
Three.js粒子特效，shader渲染初探
console觉醒之路，打印个动画如何？
node基金爬虫，自导自演了解一下？
