吉他初学者学习网站搭建系列(8)—

吉他初学者学习网站搭建系列(8)——如何练习音阶

文章目录

背景
实现
- 吉他面板
- 音阶位置
- 音阶识别
结语

背景

大家好，我是一个爱好音乐的非典型程序员！我最近又往自己的网站中集成了一个模块——音阶。下面介绍一下背景。

在这里插入图片描述

很多吉他初学者在掌握了一些音阶知识后，可能不知道怎么训练自己的对音阶的敏感度，以及如何在指板中把某个调的某个音阶给爬熟练了。

首先，要掌握指板上的所有音，推当然很简单，但是要做到立即反应，恐怕一开始还有些困难，如果这个时候能直观看到某个音阶在指板中的所有位置，那对于训练是很有帮助的。

其次，如果每弹一个音都能看出是否弹对，在一个有反馈的环境中练习，对音阶的练习就更是有利。

那么，怎么实现这样一个工具呢？

我分为三部分实现：吉他面板功能、音阶位置、音阶识别。

实现

吉他面板

在这里插入图片描述
首先，我们知道，标准调音的吉他，六弦到一弦的音分别是：E2、A2、D3、G3、B3、E4。然后，每一品，都相隔一个半音。那么有了这些空弦的标准音的音名，基于C、D、E、F、G、A、B、C这样一个八度的音名排列，以及全、全、半、全、全、全、半的音程关系，我们就可以推算出所有品格的具体音名了！

举个例子，例如从二弦空弦开始往右，B+一个半音=C，C+一个半音=C#，以此类推。只有B和E到下一个音是半音，其余都是两个半音。

另外，如果把音高都考虑进去，我们需要在B>C时，将后面的数字+1。例如：B3+一个半音=C4。因为标准情况下，C是do。

那么很容易就得到一个推后一个半音的方法：

/*** 获取下一个半音* @param {*} note * @returns */
export function nextRule(note) {const key = note.slice(0, -1);const num = note.slice(-1);let nextKey = '', nextNum = num;if (key.length === 1) {if (['b', 'e'].includes(key)) {// 半音nextKey = seq[(seq.indexOf(key) + 1) % 7];} else {// 全音nextKey = `${key}#`}if (key === 'b') {nextNum = Number(num) + 1;}} else {nextKey = key.slice(0, 1); // end with bif (key.endsWith('#')) {nextKey = seq[(seq.indexOf(nextKey) + 1) % 7];}}return `${nextKey}${nextNum}`
}

这样，20个品的音名就都得出来了。

音阶位置

音阶的种类很多，常用的列表大致如下：

// 音阶列表
export const ScaleList =['major','minor','ionian', // (Alias for major)'dorian','phrygian','lydian','mixolydian','aeolian', // (Alias for minor)'locrian','majorpentatonic','minorpentatonic','chromatic','harmonicchromatic', // (Alias for chromatic)'blues','doubleharmonic','flamenco','harmonicminor','melodicminor','wholetone',]

利用teoria库，我们可以根据根音和音阶，获得该音阶的所有构成音的音名，

generateScale(note, scale) {const n = Note(note); // 根音const s = Scale(n, scale); // 获取音阶this.strings = s.notes().map(t => t.toString()); // 例如，a大调构成音为["a3","b3","c#4","d4","e4","f#4","g#4"]

这里我们做些处理，把最后一位数字去除。这样就得到：

let string = ["a","b","c#","d","e","f#","g#"]

有了这些构成音，再结合吉他上指板的音名，我们可以知道哪个位置命中了这个音阶的构成音。

/*** 默认规则：0品灰色，不含升降调的绿色* @returns */
export function guitarStyle(curNote, strings = []) {let c = ''const root = strings[0];const match = strings.find(note => {return (note.slice(0, -1) === curNote.slice(0, -1) || getSameNote(note)?.slice(0, -1) === curNote.slice(0, -1))})if (match) {c = 'normal'; // 音阶构成音}if (curNote.slice(0, -1) === root.slice(0, -1)) {c = 'root'; // 根音}return c;
}

最后就渲染成上面图片中的音阶分布图了！

音阶识别

最后一步，我们需要利用AudioContext，获取吉他的音频。原理和吉他初学者学习网站搭建系列(3)——如何实现吉他在线调音相同，核心是拿到频率后，利用teoria.note.fromFrequency将频率转化为音，有了音名，再根据吉他指板的音名和索引号缓存，找到对应索引，然后直接渲染那一格的颜色即可！

代码如下：

 import { note } from 'teoria';detectPitch(analyserNode, detector, input, sampleRate) {analyserNode.getFloatTimeDomainData(input);const [pitch, clarity] = detector.findPitch(input, sampleRate);this.pitch = Math.round(pitch * 10) / 10;this.clarity = Math.round(clarity * 100);try {if (this.clarity > 95) {const n = note.fromFrequency(this.pitch);this.currentNote = n.note.toString();}} catch (err) { }requestAnimationFrame(() => this.detectPitch(analyserNode, detector, input, sampleRate));}