Поделитесь простым производным губной гармошки

React.js
Поделитесь простым производным губной гармошки

последовательность

Гармошка — это небольшой духовой инструмент, на который дуют или вдыхают ртом, чтобы металлическая трость вибрировала и звучала; однажды в 1812 году немецкий музыкант по имени Бушман, Прогуливаясь по Тоссну, я наткнулся на маленькую девочку, игравшую у двери, пара пухлых ручек дула деревянной расческой, прилепленной к картонке. Сердце Бушмена загорелось: вернувшись, он, следуя принципам произношения и игры на древнекитайской шэн и римской флейте, вырезал из слоновой кости губную гармошку в виде «таблеточной трубки», которая является самой ранней губной гармошкой в ​​мире.

Для начинающих играть на губной гармошке самое сложное — уловить дыхание и интонацию. Дыхание можно контролировать медленно, непрерывно отбивая ритм.Однако, если вы хотите воспроизвести звук точно, вам нужно знать шкалу, соответствующую положению каждого отверстия губной гармошки, и является ли текущее отверстие дующим или всасывающим. За миллионы лет до появления письменности люди могли запоминать только образы. История письменности насчитывает всего несколько тысяч лет, что ничтожно по сравнению с многовековой историей человечества. Другими словами, память образов — это биологический инстинкт, с которым люди рождаются. Кажется, я зашел немного далеко, поэтому основное содержание этой статьи: как я разобрал каждую шкалу на спектре, чтобы сформировать код, и, наконец, визуализировал каждую шкалу.

Примечание

Продолжительность каждой ноты в музыке обозначается нотами. Ноты обычно делятся на одну ноту, ноту с точкой, ноту с двумя точками и паузу.

  • одна нота

    Отдельные ноты делятся на целые, половинные, четвертные, восьмые, шестнадцатые, тридцать вторые и т. д.

    Если целая заметка предполагается четыре удара, то половина примечания - это два удара, четверть примечания - это один удар, это половина биения восьмой ноты, шестнадцатая нота составляет один квартал.

  • пунктирная нота

    Пунктирная нота — это маленькая «.» справа от одиночной ноты. Временная ценность этой маленькой точки равна单音符половину времени. Например 5 -это половинная нота и две доли, то если вы добавите точку, как в5 - ., его временное значение становится равным трем долям.3 = 2 + 2 / 2.

  • пунктирная нота

    Двойная точка — это точка справа от точки, которая называется двойной точкой. Длительность точки с точкой равна половине ноты с точкой точки. Например, добавьте точку справа от четвертной ноты. Такие как5 . ., это одна доля и три четверти доли.

  • Пауза

    Отдых — это знак прекратить играть или не петь. Остатки в нотной записи представлены «0». Паузы также такие же, как и отдельные ноты: есть полные паузы, половинные паузы, четвертные паузы, восьмые паузы, шестнадцатые паузы и тридцать две паузы.

бить

Каждая часть разделена на несколько секций несколькими вертикальными линиями, а середина двух вертикальных линий называется секцией. После того, как музыка разделена на части, определяется определенный ритм. А чтобы определить силу этого ритма, его называют тактом, или тактом. Обычно в верхнем левом углу нотной записи мы можем видеть Дробная форма указывает на обозначение доли. Конечно, при смене доли в середине партитуры мы также можем видеть временную метку, например. Цифры в верхней части обозначений относятся к количеству долей в каждом такте, а числа ниже относятся к количеству нот в доле. Например:Это секция с четвертными нотами в виде одной доли, по две доли в каждом такте. Согласно приведенным выше знаниям теории музыки,3относится к четвертным нотам, за которыми следует32Каждая состоит из двух восьмых нот, поэтому в сумме получается две четвертные ноты. В музыке обычно используются два такта, три бита, четыре бита, шесть битов, девять битов и двенадцать битов. Как показано ниже:

В нормальном двухдольном ритме первая доля — сильная, а вторая — сильная; первая доля из трех долей — сильная, а вторая и третья — сильная; первая доля из четырех -доля — сильная доля, третья доля — сильная доля, три доли — средне-сильные доли, а вторая и четвертая доли — сильные доли.

Примечание: ▲ означает сильное биение, △ означает слабое биение, × означает среднее сильное биение.

Составные части гармоники

Примечание. В этой статье используется полифоническая гармоника с 24 отверстиями.

Гамма полифонической губной гармошки состоит из язычков разной длины, расположенных в правильном порядке. Шаг увеличивается слева направо.

Всего 24 отверстия разделены на три части: низкие, средние и высокие частоты.Мы внимательно наблюдали и обнаружили, что его duo rai mi fa suo la xi не является непрерывным, Позже это даст нам немного другое определение аккордов, поэтому я не буду вдаваться в подробности, а поговорим об аккордах позже.

Изображение выше представляет собой нотацию полифонической гармоники, построенную с помощью svg. Под каждым отверстием отмечена отметка всасывания, а также высокие и низкие ноты. В дополнение к первому времени, мы также определяемblowа такжеabsorbДва многоразовых элемента, используемых для помощи в последующих выступлениях на губной гармошке.

import React from 'react';
const Svg = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="svg" width="1000" height="420" viewBox="0 0 300 300" preserveAspectRatio="xMidYMin meet">
      <defs>
        <g id="blow">
          <rect width="20" height="40"  fill="#bce672"  stroke="#d6ecf0" strokeWidth="1" />
        </g>
        <g id="absorb">
          <rect width="20" height="40" fill="#ff461f"  stroke="#d6ecf0" strokeWidth="1" />
        </g>
      </defs>
      <rect x="25" y="45" rx="5" ry="5" width="480" height="40"  fill="yellow" stroke="#666" strokeWidth="2" />
      <path d="
      M25 65 L505 65  
      M25 85 L505 85  
      M45 45 L45 85 
      M65 45 L65 85 
      M85 45 L85 85 
      M105 45 L105 85 
      M125 45 L125 85 
      M145 45 L145 85 
      M165 45 L165 85 
      M185 45 L185 85 
      M205 45 L205 85 
      M225 45 L225 85 
      M245 45 L245 85 
      M265 45 L265 85 
      M285 45 L285 85 
      M305 45 L305 85 
      M325 45 L325 85 
      M345 45 L345 85 
      M365 45 L365 85 
      M385 45 L385 85 
      M405 45 L405 85 
      M425 45 L425 85 
      M445 45 L445 85 
      M465 45 L465 85 
      M485 45 L485 85 
      M505 45 L505 85 
      " stroke="#666" strokeWidth="2" fill="none" />
      <text x="30" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="30" y="120" fill="#333" fontSize="10" fontWeight="700">5</text>
      <text x="30" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="30" y="140" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="50" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="50" y="120" fill="#333" fontSize="10" fontWeight="700">2</text>
      <text x="50" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="70" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="70" y="120" fill="#333" fontSize="10" fontWeight="700">1</text>
      <text x="70" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="90" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="90" y="120" fill="#333" fontSize="10" fontWeight="700">4</text>
      <text x="90" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="110" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="110" y="120" fill="#333" fontSize="10" fontWeight="700">3</text>
      <text x="110" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="130" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="130" y="120" fill="#333" fontSize="10" fontWeight="700">6</text>
      <text x="130" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="150" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="150" y="120" fill="#333" fontSize="10" fontWeight="700">5</text>
      <text x="150" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="170" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="170" y="120" fill="#333" fontSize="10" fontWeight="700">7</text>
      <text x="170" y="130" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="190" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="190" y="120" fill="#333" fontSize="10" fontWeight="700">1</text>
      <text x="210" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="210" y="120" fill="#333" fontSize="10" fontWeight="700">2</text>
      <text x="230" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="230" y="120" fill="#333" fontSize="10" fontWeight="700">3</text>
      <text x="250" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="250" y="120" fill="#333" fontSize="10" fontWeight="700">4</text>
      <text x="270" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="270" y="120" fill="#333" fontSize="10" fontWeight="700">5</text>
      <text x="290" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="290" y="120" fill="#333" fontSize="10" fontWeight="700">6</text>
      <text x="310" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="310" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="310" y="130" fill="#333" fontSize="10" fontWeight="700">1</text>
      <text x="330" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="330" y="120" fill="#333" fontSize="10" fontWeight="700">7</text>
      <text x="350" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="350" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="350" y="130" fill="#333" fontSize="10" fontWeight="700">3</text>
      <text x="370" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="370" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="370" y="130" fill="#333" fontSize="10" fontWeight="700">2</text>
      <text x="390" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="390" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="390" y="130" fill="#333" fontSize="10" fontWeight="700">5</text>
      <text x="410" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="410" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="410" y="130" fill="#333" fontSize="10" fontWeight="700">4</text>
      <text x="430" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="430" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="430" y="125" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="430" y="140" fill="#333" fontSize="10" fontWeight="700">1</text>
      <text x="450" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="450" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="450" y="130" fill="#333" fontSize="10" fontWeight="700">6</text>
      <text x="470" y="100" fill="#333" fontSize="10" fontWeight="700">吹</text>
      <text x="470" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="470" y="125" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="470" y="140" fill="#333" fontSize="10" fontWeight="700">3</text>
      <text x="490" y="100" fill="#f00056" fontSize="10" fontWeight="700">吸</text>
      <text x="490" y="115" fill="#333" fontSize="20" fontWeight="700">.</text>
      <text x="490" y="130" fill="#333" fontSize="10" fontWeight="700">7</text>
    </svg>
    );
};

export default Svg;

Составьте правила нотной записи

На основании вышеупомянутых знаний о музыке нам нужно знать ноты, в определение модели кода.

  • одна нота
const musicMap =  {
    a: {
      title: '全音符',
      step: 4
    },
    b: {
      title: '二分音符',
      step: 2
    },
    c: {
      title: '四分音符',
      step: 1
    },
    d: {
      title: '八分音符',
      step: 0.5
    }, 
    e: {
      title: '十六分音符',
      step: 0.25
    } 
  }

Для точек и точек мы используем предыдущие знания теории музыки и напрямую выводим их шаг за шагом через отдельные ноты.

 let arr = toneString.split('');
 let dot = 0;
 let doubleDot = 0;
 const totalTime = arr.reduce((pre, cur,index, arr) => {

   if(yinfuMap[cur]) {
     return pre + yinfuMap[cur].step;
   }

   if(cur === '.' && index === 1) {
     dot = pre / 2;
     return pre + dot; 
   }

   if(cur === '.' && index === 2) {
     doubleDot = dot / 2;
     return pre + doubleDot;
   }

   return pre;
 }, 0);

Мы используем нотную запись в размере 2/4, чтобы проверить правильность нашей формулы вывода. Предположим, у нас есть следующая оценка:

 const music = ['1c', '2c', '3c', '4c.', '4c', '3a', '2c..', '1a.'];

После подталкивания нашей формулы к

 [1, 1, 1, 1.5, 1, 4, 1.75, 6]

Объясните волну:

- ``` 1c ```  表示这个音符是四分音符, 对应一拍;
- ``` 4c. ``` 四分单音符后面跟了一个附点音符, 因此 1 + 1/2 = 1.5拍
- ``` 3a ```  a代表全音符, 一个全音符等于四个四分音符, 因此对应4拍
- ``` 2c.. ``` 四分音符后面跟了一个附点音符, 附点音符后面跟了一个复附点音符因此 1 + 1/2 + ((1/2)/2) = 1.75拍
  • положение примечаний
export const musicalDistance = new Map(); // 音程的位置x
musicalDistance.set('1#', { x: 305 })
musicalDistance.set('1', { x: 185 })
musicalDistance.set('2', { x: 205 })
musicalDistance.set('3', { x: 225 })
musicalDistance.set('4', { x: 245 })
musicalDistance.set('#1', { x: 65 })
...
  • дует ноты
export const musical = new Map(); // 音程的吹吸
musical.set('#1', { action: 'blow' });
musical.set('1', { action: 'blow' });
musical.set('2', { action: 'absorb' });
musical.set('3', { action: 'blow' });
musical.set('4', { action: 'absorb' });
musical.set('1#', { action: 'blow' });
...
  • Сильный и слабый ритм, соответствующий такту
export const tipMap = new Map();
tipMap.set(2, ['strong', 'weak']);
tipMap.set(3, ['strong', 'weak', 'weak']);
tipMap.set(4, ['strong', 'weak', 'middle', 'weak']);
tipMap.set(6, ['strong', 'weak', 'weak', 'middle', 'weak', 'weak']);

У разных счетов могут быть разные доли, поэтому нам нужно генерировать сильные и слабые сигналы в зависимости от времени и типа счета📶

let flag = 0;
getStrongOrWeight() {
  const { pai } = this;
  let tipMap = new Map();
  tipMap.set(2, ['strong', 'weak']);
  tipMap.set(3, ['strong', 'weak', 'weak']);
  tipMap.set(4, ['strong', 'weak', 'middle', 'weak']);
  tipMap.set(6, ['strong', 'weak', 'weak', 'middle', 'weak', 'weak']);
  if(flag < 1) {
    flag  = flag + this.getDuringTime();
    return tipMap.get(pai)[0]
  }
  if(2 > flag && flag >= 1) {
    flag  = flag + this.getDuringTime();
    return tipMap.get(pai)[1]
  }
  if(flag === 2) {
    flag = this.getDuringTime();
  }
  return tipMap.get(pai)[0];
}

Точно так же мы вводим песню в размере 2/4.

  const music = ['1c', '2d', '3d', '4d', '5d', '4c'];

После вывода нашей формулы

 ["strong", "weak", "weak", "strong", "strong", "weak"]

Это пьеса из четверти ноты с двумя долями в такте. Следовательно, вышеприведенное произведение можно разделить на 2 такта.

| 1  23 |  45 4 |
正常的二拍子,它的第一拍为强拍第二拍为弱拍。因此很明显 1 为强拍, 23为弱拍, 45为强拍, 4为弱拍。
  • Что касается некоторых других базовых конфигураций, я не буду вдаваться в подробности, весь код будет открыт в будущем, и он все еще находится в стадии итерации.

Создавайте монофонические классы

Каждая нота имеет свои неотъемлемые свойства, такие как положение ноты, соответствующее фортепианному отверстию, сама нота, выдувается ли нота или засасывается на губной гармошке и т. д., Однако каждая нота также будет иметь различные проявления в партитуре, такие как сила ноты, время ноты и так далее. Итак, я собираюсь создать базовый класс и монофонический класс, когда ноты проигрываются на нотоносце.

базовый класс

class Tone {
  constructor(toneString = '0') {
    this.toneString = toneString; 
  }

  // 琴孔的吹吸方式
  getStatus() {
    return this.toneString.includes('0') ? '空' : musical.get(this.toneString);
  }

  // 琴孔所处的位置
  getPosition() {
    return this.toneString.includes('0') ? '空' : musicalDistance.get(this.toneString)
  }

  // 获取初始音符
  getOriginMusic() {
    return this.toneString.replace(/[^0-9#]/ig,"");
  }
  
}

однотонный

let flag = 0; 

class ATone extends Tone {
  constructor(toneString,idx ,pai, count, map) {
    super();
    this.toneString = toneString;
    this.musicMap = map;
    this.pai = pai;
    this.count = count;
    this.idx = idx;
  }

// 获取音强
getStrongOrWeight() {
  const { pai } = this;
  let tipMap = new Map();
  tipMap.set(2, ['strong', 'weak']);
  tipMap.set(3, ['strong', 'weak', 'weak']);
  tipMap.set(4, ['strong', 'weak', 'middle', 'weak']);
  tipMap.set(6, ['strong', 'weak', 'weak', 'middle', 'weak', 'weak']);
  if(flag < 1) {
    flag  = flag + this.getDuringTime();
    return tipMap.get(pai)[0]
  }
  if(2 > flag && flag >= 1) {
    flag  = flag + this.getDuringTime();
    return tipMap.get(pai)[1]
  }
  if(flag === 2) {
    flag = this.getDuringTime();
  }
  return tipMap.get(pai)[0];
}

// 获取该音的音时长短
getDuringTime() {
  const { toneString } = this;
  let arr = toneString.split('');
  let dot = 0;
  let doubleDot = 0;
  const totalTime = arr.reduce((pre, cur,index, arr) => {
    if(!isNaN(+cur)) {
      return pre + 1 / 4;
    }

    if(yinfuMap[cur]) {
      return pre + yinfuMap[cur].step / 4;
    }

    if(cur === '.' && index === 1) {
      dot = pre / 2;
      return pre + dot; 
    }

    if(cur === '.' && index === 2) {
      doubleDot = dot / 2;
      return pre + doubleDot;
    }

    return pre;
  }, 0);
  return totalTime;
}

}

спектр кода

Обладая вышеупомянутыми знаниями теории музыки, мы смогли преобразовать простую партитуру в код нашей модели.

const music = ['1c', '1c', '5c', '5c', '6c', '6c', '5c','-']

Поскольку продолжительность каждой гаммы различна, нам нужно контролировать, как долго длится каждая нота.

useEffect(() => {
  if(count < data.length) {
    let timer = 0;
    timer = setInterval(() => {
      if(count < music.length)
      setCount(count + 1);
    },  data[count].getDuringTime() * 1000)
    return () => clearInterval(timer)
  }
})

Запустите первые 4 раздела нашей нотации, чтобы увидеть следующую анимацию:

Вроде немного чувствуется.

Бесконечный конец

Благодаря изучению этой статьи у нас также есть общее представление об основных знаниях о губной гармошке. На самом деле это только самые базовые знания.Например,в губной гармошке есть октавы,квинты,терции,вибрации горла,вибрации языка и различные языковые навыки.Эти навыки требуют прочных базовых навыков и Требуются годы практики, чтобы раскрыть его секреты. После прочтения этой статьи, если она была вам полезна, пожалуйста, дайте мне баллstarО, ваша поддержка - моя мотивация продолжать~