吉他初学者学习网站搭建系列(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。

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

javascript 复制代码

/**
 * 获取下一个半音
 * @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 b
    if (key.endsWith('#')) {
      nextKey = seq[(seq.indexOf(nextKey) + 1) % 7];
    }
  }
  return `${nextKey}${nextNum}`
}

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

音阶位置

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

javascript 复制代码

// 音阶列表
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库，我们可以根据根音和音阶，获得该音阶的所有构成音的音名，

javascript 复制代码

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"]

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

javascript 复制代码

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

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

javascript 复制代码

/**
 * 默认规则：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将频率转化为音，有了音名，再根据吉他指板的音名和索引号缓存，找到对应索引，然后直接渲染那一格的颜色即可！

代码如下：

javascript 复制代码

 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)
      );
    }

由于相同音高在不同弦上不同位置可以一致，因此每次弹奏都会有几个格同时识别出，这是正常的。此外，由于频率时刻在变化，因此识别是会有一定的延迟和偏差，最好是调好吉他的音，并且弹奏有力，这样更容易识别出来！

结语

最终，我们可以边弹奏音阶，边在网站中看到自己弹的是否正确，并且学会跟弹音阶，形成肌肉记忆。快来用起来吧！！加油，各位😄💪

网站地址：https://tryiscool.space/music-score/#/scale

B站账号：玉儿或芋头

欢迎关注，交个朋友，我还在持续学习乐理！相信对你有帮助。