吉他和弦推导算法
开过光的序
当一个民谣小哥抱着吉他哼唱着《情非得已》时，他右手扫着音孔处的琴弦，左手变换着按着琴颈处的琴弦，一段简单的弹唱便看起来有模有样。在不看脸不看唱功的状况下，是什么原理才赋予这位小哥如此风骚的魅力呢？css
这就是吉他伴奏。html
而他只是一个吉他初学者，还没办法给歌曲编配伴奏，只好从网上找来吉他谱，按照里面的标识来进行弹奏。他找到了下面这样的谱子： node
这是一个典型的吉他弹唱谱该有的样子，它能够被分红四个部分：git
和弦指法：用于标记该小节内的和弦名以及对应的按弦指法。六线谱：它是专门属于吉他的谱子，六条横线至上而下分别对应吉他的一弦到六弦，横线上添加各类符号来标记右手的弹奏方式。简谱：这里是数字简谱，配以各类符号来描述歌曲的旋律与节奏。歌词：嗯，就是歌词。
对于初学者，吉他入门的坎儿在于左手的指法，当时我记下了大多数和弦的指法图，左手指尖的磨出的茧也是起了褪，褪了起，身为乐理渣的我终有一天疑惑了，问号三连：github
1. 这个和弦为何叫这个名字？算法
2. 这个和弦为何是这个指法？数组
3. 同一和弦在吉他上到底有多少种不一样的指法？app
本文将基于基本的乐理知识，用代码推导计算出以上问题的答案，并将其结果可视化。dom
1、从一个单音提及
心虚的声明：外行人基于本身的理解强行解释乐理，望专业人士轻喷svg
声音因物体振动而产生，每个不一样频率（即不一样音高）的声响均可以称之为一个单音，但人耳的辨音能力有限，音乐体系里将一段音程中相邻的单音的最小间隔称为半音（这样划分既在人耳的辨音范围内，又符合音程的循环）；
相隔半音的两个音的频率比值为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. 首先来肯定一种单音的书写形式
能够借用简谱的标记方式，数字一、二、三、四、五、六、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;
}
});
}
// 音高增减，num为增或减的半音数量
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），这两个音处于同一音高，本质相同，只是标记方式不同。
2、和弦命名推导
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 | 2 | 3 | 4 | 5 | 6 | 7 |
| C | D | E | F | G | A | B |
通俗点说至关于，在某调下，一个和弦的根音为该调的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]);
}
// 小三和弦 m
isMinorChord(chordTone) {
return this.isMinorThird(chordTone[0], chordTone[1]) && this.isMajorThird(chordTone[1], chordTone[2]);
}
// 增三和弦 aug
isAugmentedChord(chordTone) {
return this.isMajorThird(chordTone[0], chordTone[1]) && this.isMajorThird(chordTone[1], chordTone[2]);
}
// 减三和弦 dim
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]);
}
// 大小七和弦/属七和弦 7 / Mm7
isMajorMinorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMajorChord(chordTone) && this.isMinorThird(chordTone[2], chordTone[3]);
}
// 小大七和弦 mM7
isMinorMajorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMinorChord(chordTone) && this.isMajorThird(chordTone[2], chordTone[3]);
}
// 大七和弦 maj7 / M7
isMajorMajorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMajorChord(chordTone) && this.isMajorThird(chordTone[2], chordTone[3]);
}
// 小七和弦 m7 / mm7
isMinorMinorSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isMinorChord(chordTone) && this.isMinorThird(chordTone[2], chordTone[3]);
}
// 减七和弦 dim7
isDiminishedSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isDiminishedChord(chordTone) && this.isMinorThird(chordTone[2], chordTone[3]);
}
// 半减七和弦 m7-5
isHalfDiminishedSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isDiminishedChord(chordTone) && this.isMajorThird(chordTone[2], chordTone[3]);
}
// 增属七和弦 7#5 / M7+5
isHalfAugmentedSeventhChord(chordTone) {
if (chordTone.length < 4) return false;
return this.isAugmentedChord(chordTone) && this.isMinorMinorThird(chordTone[2], chordTone[3]);
}
// 增大七和弦 aug7 / Maj7#5
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;
}
}
复制代码
运行示例：
3、和弦指法推导
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;
// 构建1到6弦的初始音
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 = [];
// 从1到6弦，从品位数的低到高，依次计算每一个位置的音
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));
}
}
}
}
复制代码
给它加上一个公用的单音位置搜寻方法：
// 在指定的品格数范围内，查找某个音在某根弦的音域下全部的品格位置
/* * @param key 搜寻的音（字符串形式） * @param toneArray 音域数组，即某根弦上全部单音类按顺序组成的数组 * @param fretStart 搜寻的最低品格数 * @param fretEnd 搜寻的最高品格数 */
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。
// 递归遍历范围内的指定和弦的全部位置组合
/* * @param stringIndex 当前遍历到的弦的序号 * @param toneIndex 上一根弦使用的音的序号（用于相邻的两根弦的音不重复） * @param fretStart 遍历的最低品格数 * @param fretEnd 遍历的最高品格数 * @param preResult 上一根弦肯定的音的结果 * @param positionSave 保存该轮递归的结果 */
calc(stringIndex, toneIndex, fretStart, fretEnd, preResult, positionSave) {
let toneArray = this.toneMap[stringIndex];
let result = false;
// 从和弦音的数组里逐个选出音进行试探（this.chordTone在后面提到的函数中赋值）
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;
// 没有遍历完全部6根弦，则继续往下一根弦计算，附带上本次的结果记录
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) {
// 从6弦开始回溯记录的和弦指法结果，拆解出全部指法组合
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) => {
// 容许发声的弦的总数，初始为6
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));
}
});
// 去重后的Set解析成对应数组返回
return [...nextResult].map(item => JSON.parse(item));
}
复制代码
按弦手指数量过滤
左手按弦的时候，通常最多只能用上4个手指（大拇指极少用到），而用递归方法算出的结果，可能包含了各类奇奇怪怪的按法，好比下面这个：
非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 = [];
// 查找和弦里的音可能存在的品格位置，保存至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 = [];
// 从1弦开始启动递归计算
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;
}
复制代码
运行示例：
3、和弦指法结果可视化
特地挑选了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;
}
// 建立svg相关元素
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;
}
// 建立use标签
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);
}
// 初始化svg
initChordSvg() {
// svg元素
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'
});
// 用于放置可复用的svg元素
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);
// svg子元素加入
this.svg.appendChild(this.chordRect);
this.svg.appendChild(this.chordGird);
this.svg.appendChild(this.defs);
}
// 绘制和弦svg图案
/* * @param chordTone 和弦组成音数组 * @param chord 和弦指法结果 * @param target svg指法图dom容器 */
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);
// svg指法图案的起始品格位置相对于吉他上0品位置的偏移量
let fretOffset = maxFret <= 5 ? 0 : minFret;
// 记录指法最低品位可能须要大横按的按弦数
let barreCount = 0;
// 大横按初始只横跨1弦到1弦（至关于没横按）
let barreStringTo = 1;
// 实例化用于计算和弦名称的类
let chordName = new ChordName();
// 遍历和弦指法数组
chord.forEach((item) => {
if (item.fret == null) {
// 某根弦没标记品格位置时禁止该弦弹奏
this.setForbidden(svg, item.string);
} else if (item.fret === 0) {
// 某根弦没标记的品格位置为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));
}
});
// 将真实的按弦品格位置转换为相对于svg图案上的品格位置
let relativeFret = fretOffset > 0 ? minFret - fretOffset + 1 : minFret;
if (barreCount > 1) {
// 横按数大于1才须要使用大横按
this.setBarre(svg, barreStringTo, relativeFret, minFret);
}
// 在图案左侧绘制品格位置偏移标记
this.setFretOffset(svg, relativeFret, minFret, barreStringTo === 6);
// 在图案上侧绘制和弦名称
this.setChordName(svg, chordName.getChordName(chordTone));
// 将生成号的svg图案塞到指定结构中
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;
}
复制代码
哐当当一个运行示例：
固然，我怎会止步于此。
基于以上已经实现的代码，我又折腾出了一个网页工具，在数字上左右拖动来改变和弦的组成音，从而时时计算和弦指法图：
若是你不按套路出牌，给了间隔古怪的组成音，可能会这样（由于算不出完整的和弦名字了，就用省略号代替了）：
固然，若是你乱拖一通，大多数状况会是这样：
上过香的尾
一边搜着基础乐理，一边填补着漫无边际的知识空白，可算是把这个东西弄出来了，涉及的还只是音乐基础的冰山一角，好比还有许多更高级的更多音组成的和弦、以及更加稀奇古怪的和弦名字，能力有限，这里就先不归入考虑范畴了。
不得不说，我明明是来写代码的，殊不知不觉给本身上起了音乐小课。
有些作事的动力就是这么奇妙。
若看官还以为饶有意思，便胜却人间无数。
-------- 如下广告能够忽略 --------
往期文章：
相关文章
- 1. 吉他和弦推导算法
- 2. 吉他和弦推算
- 3. 吉他和弦系列
- 4. 如何换吉他琴弦
- 5. 吉他入门第三讲~~~~~和弦
- 6. 吉他弹唱精通——运用空弦音的分解和弦
- 7. 吉他指弹入门——特殊调弦
- 8. 如何演奏吉他刮弦
- 9. 吉他各种调式推算
- 10. 吉他弹唱精通——更高难度的分解和弦
- 更多相关文章...
- • 其他 W3C 活动 - W3C 教程
- • ionic 导航 - ionic 教程
- • 算法总结-广度优先算法
- • 算法总结-深度优先算法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解决方法
- 2. Qt5.7以上调用虚拟键盘(支持中文)，以及源码修改(可拖动，水平缩放)
- 3. 软件测试面试- 购物车功能测试用例设计
- 4. ElasticSearch（概念篇）：你知道的, 为了搜索…
- 5. redux理解
- 6. gitee创建第一个项目
- 7. 支持向量机之硬间隔（一步步推导，通俗易懂）
- 8. Mysql 异步复制延迟的原因及解决方案
- 9. 如何在运行SEPM配置向导时将不可认的复杂数据库密码改为简单密码
- 10. windows系统下tftp服务器使用
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 吉他和弦推导算法
- 2. 吉他和弦推算
- 3. 吉他和弦系列
- 4. 如何换吉他琴弦
- 5. 吉他入门第三讲~~~~~和弦
- 6. 吉他弹唱精通——运用空弦音的分解和弦
- 7. 吉他指弹入门——特殊调弦
- 8. 如何演奏吉他刮弦
- 9. 吉他各种调式推算
- 10. 吉他弹唱精通——更高难度的分解和弦