微信号:w2bc-com

介绍:为程序员(码农)提供最新最全的编程技术文章,分享程序员的有趣故事.提供全面的前端、php、java、android、ios、.net学习教程

我,居然用编程学会了吉他!

2018-07-25 08:15 爱编程


能看完这篇文章的同学,都是又会吉他、又会编程的小天才,鉴定完毕。


开过光的序

当一个民谣小哥抱着吉他哼唱着《情非得已》时,他右手扫着音孔处的琴弦,左手变换着按着琴颈处的琴弦,一段简单的弹唱便看起来有模有样。在不看脸不看唱功的情况下,是什么原理才赋予这位小哥如此风骚的魅力呢?

这就是吉他伴奏。

而他只是一个吉他初学者,还没办法给歌曲编配伴奏,只好从网上找来吉他谱,按照里面的标识来进行弹奏。他找到了下面这样的谱子:

这是一个典型的吉他弹唱谱该有的样子,它可以被分成四个部分:

  • 和弦指法:用于标记该小节内的和弦名以及对应的按弦指法。

  • 六线谱:它是专门属于吉他的谱子,六条横线至上而下分别对应吉他的一弦到六弦,横线上添加各种符号来标记右手的弹奏方式。

  • 简谱:这里是数字简谱,配以各种符号来描述歌曲的旋律与节奏。

  • 歌词:嗯,就是歌词。

对于初学者,吉他入门的坎儿在于左手的指法,当时我记下了大多数和弦的指法图,左手指尖的磨出的茧也是起了褪,褪了起,身为乐理渣的我终有一天疑惑了,问号三连:

1. 这个和弦为什么叫这个名字?

2. 这个和弦为什么是这个指法?

3. 同一和弦在吉他上到底有多少种不同的指法?

本文将基于基本的乐理知识,用代码推导计算出以上问题的答案,并将其结果可视化。

一、从一个单音说起

心虚的声明:外行人基于自己的理解强行解释乐理,望专业人士轻喷

声音因物体振动而产生,每一个不同频率(即不同音高)的声响都可以称之为一个单音,但人耳的辨音能力有限,故将人耳能清晰分辨的最小的音高间隔称为半音

相隔半音的两个音的频率比值为2的12次方根

为什么是这个值,这就得提到十二平均律

音乐界老前辈经过大量的听力实践后,发现例如do高音do这个音程作为一个循环听起来最和谐,并且这高音dodo的频率比率刚好是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;

            }

        });

    }

    // 音高增减,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),这两个音处于同一音高,本质相同,只是标记方式不一样。



二、和弦命名推导


1. 什么是和弦

先上个百度词条:


由此白话提炼和弦的三个要素:

(1)由三个或三个以上的音构成;

(2)音之间有跨度关系(三度或非三度);

(3)音之间要从低到高排列。

由此我画了一张图:

一个音程上的12个音可以像时钟的刻度那样排列,顺时针方向代表音的从低到高;然后我们将“时针”、“分针”、“秒针”在不重叠且相互有一定间隔的情况下随意拨弄,把他们指向的音顺时针连起来,就可能构成了一个三个音组成的和弦(同理更多音组成的和弦就相当于再往里加指针)。

这样一看,便能发现这更像是一个排列组合问题,拿三个音的组合来说,从12个音里面任意挑3个音(不排序),会有220种情况,但这里面并不都是和弦;和弦和弦,顾名思义,听起来得和谐得不难听,这开始更像是人们的主观意识判断,但随着音乐知识体系的成熟,和弦也会有一套公认的标准,变得向数学公式那样有迹可循。

细想一下,一个和弦好不好听,带什么感情色彩,取决于组成音的相互映衬关系,也就是音之间的相互音高间隔,隔得太近会别扭,隔得太远也别扭,那就得取个适中的,这个适中就是三度

三度又分为大三度小三度

大三度:两个全音的跨度,即4半音的跨度。

小三度:一个全音加一个半音的跨度,即3半音的跨度。

C调下的C和弦组成音如下:

对照上图那个刻度盘可数出来:

1(do)3(mi)中间还夹了#1/b22#2/b3这3个音,共4个半音的跨度;

3(mi)5(sol)中间还夹了4#4/b5这2个音,共3个半音的跨度;

那么像这样组成的和弦就成为大三和弦

2. 常见和弦标记规则

和弦类型 组成 标记
大三和弦 大三度 + 小三度
小三和弦 小三度 + 大三度 m
增三和弦 大三度 + 大三度 aug
减三和弦 小三度 + 小三度 dim
大小七和弦(属七和弦) 大三和弦 + 小三度 7Mm7
大大七和弦(大七和弦) 大三和弦 + 大三度 maj7M7
小小七和弦(小七和弦) 小三和弦 + 小三度 m7mm7
小大七和弦 小三和弦 + 大三度 mM7
减七和弦 减三和弦 + 小三度 dim7
半减七和弦 减三和弦 + 大三度 m7-5
增属七和弦 增三和弦 + 减三度 7#5M7+5
增大七和弦 增三和弦 + 小三度 aug7Maj7#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;

    }

}

运行示例:



三、和弦指法推导


1. 指法图

一个完整的吉他和弦指法图的例子如下,右边对照为真实的吉他:


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 (!== 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;

}

使用此递归方法,用135为和弦组成音做输入,会得到类似下面这样的结果:


递归在执行的时候,在每个节点上可能产生多个分支节点层层往下深入,以上的打印其实就是列出了每个节点的数据。而我们需要的是将这个递归结果拆分为不同指法结果的数组,就像下面这样:


为此添加一个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. 指法过滤

  • 根音条件过滤

例如以135作为和弦音,根音为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个手指(大拇指极少用到),而用递归方法算出的结果,可能包含了各种奇奇怪怪的按法,比如下面这个:


看上去包含了和弦的所有组成音,但是就算经过上一轮的过滤禁用了第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个品格范围内的和弦指法,经整合过滤后得到该和弦所有的位置的正确指法。

// 和弦指法计算入口

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;

}

运行示例:



三、和弦指法结果可视化


特意挑选了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即可;但需特别考虑各个元素可能会动态改变的位置,以及对于大横按的绘图处理。

此处代码及svg公共样式详见原文。

哐当当一个运行示例:


当然,我怎会止步于此。

基于以上已经实现的代码,我又折腾出了一个网页工具,在数字上左右拖动来改变和弦的组成音,从而时时计算和弦指法图:

在线试玩地址:

https://youngdro.github.io/guitarChord/index.html



如果你不按套路出牌,给了间隔古怪的组成音,可能会这样(因为算不出完整的和弦名字了,就用省略号代替了):


当然,如果你乱拖一通,大多数情况会是这样:



上过香的尾


一边搜着基础乐理,一边填补着漫无边际的知识空白,可算是把这个东西弄出来了,涉及的还只是音乐基础的冰山一角,比如还有许多更高级的更多音组成的和弦、以及更加稀奇古怪的和弦名字,能力有限,这里就先不纳入考虑范畴了。

不得不说,我明明是来写代码的,却不知不觉给自己上起了音乐小课。

有些做事的动力就是这么奇妙。

若看官还觉得饶有意思,便胜却人间无数。

项目地址:

https://github.com/youngdro/guitarChord

在线试玩二次传送门 :

https://youngdro.github.io/guitarChord/index.html


精彩回顾  点蓝字即可  

 后端说,你个前端不会用 headers吧,我怒了!

♡ 有个厉害的程序员女朋友是什么体验?

 多年来,程序员经常加班的真相终于揭开了…

 如果编程替换成中文就会怎样? 程序员看了表示头疼

 为什么一定要给孩子找个程序员爸爸?

♡ 程序员不要去这样的公司

 程序员究竟能干多少年?

 程序员吃的是青春饭?本质上取决于......

 最霸气的程序员辞职理由,阅后即焚!

 程序员面试神回复,最后一个“过分”了!



 
爱编程 更多文章 我真的没有改需求! 后端说,你个前端不会用 headers吧,我怒了! 修电脑的万能攻略 当Java、C++、Python等编程语言都变成软妹子 女生程序员微自传
猜您喜欢 这回,我们约吧。 ☞把天猫双11交易数据3D呈现,阿里云是这么干的【附视频】 顶级运维峰会首次登陆广州,Gdevops嘉宾主题曝光 golang实现Raft(一):选主 Go语言反射三定律