Слияние кода завершено, страница обновится автоматически
Когда речь идёт о полутонах, например, полутон A# — это A-диез, также существуют C-бемоль, F-бемоль и т.д.
Есть ещё средние тона (A4), высокие тона (A5) и двойные высокие тона (A6). В таблице можно увидеть более чёткую структуру. Если мы хотим сыграть средний тон A4, нам нужно нажать клавишу 6 на клавиатуре. Чтобы сыграть высокий тон A5, нужно использовать комбинацию клавиш Option+6. Нам нужно только один раз понять логику, чтобы знать, какой клавише соответствует каждый музыкальный знак.
| Октава | C2 | D2 | E2 | F2 | G2 | A2 | B2 |
|---|---|---|---|---|---|---|---|
| Shift + (1–7) | Shift+1 | Shift+2 | Shift+3 | Shift+4 | Shift+5 | Shift+6 | Shift+7 |
| Октава | C3 | D3 | E3 | F3 | G3 | A3 | B3 |
| Ctrl + (1–7) | Ctrl+1 | Ctrl+2 | Ctrl+3 | Ctrl+4 | Ctrl+5 | Ctrl+6 | Ctrl+7 |
| Средний тон | C4 | D4 | E4 | F4 | G4 | A4 | B4 |
| Цифровая клавиатура 1–7 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Высокий тон | C5 | D5 | E5 | F5 | G5 | A5 | B5 |
| Option + (1–7) | Option+1 | Option+2 | Option+3 | Option+4 | Option+5 | Option+6 | Option+7 |
| Двойной высокий тон | C6 | D6 | E6 | F6 | G6 | A6 | B6 |
| Command + (1–7) | Command+1 | Command+2 | Command+3 | Command+4 | Command+5 | Command+6 | Command+7 |
| Музыкальный знак | Do | Re | Mi | Fa | Sol | La | Si |
Выше представлена таблица всех тонов, здесь прилагается таблица полутонов:
| Октава | C#2 | D#2 | F#2 | G#2 | A#2 |
|---|---|---|---|---|---|
| Shift+ | Shift+q | Shift+w | Shift+e | Shift+r | Shift+t |
| Низкий полутон | C#3 | D#3 | F#3 | G#3 | A#3 |
| Ctrl+ | Ctrl+q | Ctrl+w | Ctrl+e | Ctrl+r | Ctrl+t |
| Средний полутон | C#4 | D#4 | F#4 | G#4 | A#4 |
| Буквенная клавиатура | q | w | e | r | t |
| Высокий полутон | C#5 | D#5 | F#5 | G#5 | A#5 |
| Option+ | Option+q | Option+w | Option+e | Option+r | Option+t |
| Двойной высокий полутон | C#6 | D#6 | F#6 | G#6 | A#6 |
| Command+ | Command+q | Command+w | Command+e | Command+r | Command+t |
Теперь нам нужно всего лишь использовать 5 букв (q, w, e, r, t) + 4 функциональных клавиши (Shift, Control, Option и Command) + 7 цифровых клавиш (1, 2, 3, 4, 5, 6, 7), всего 16 клавиш, чтобы сыграть 60 отдельных нот (35 полных тонов и 25 полутонов). На самом деле, для простой фортепианной пьесы не требуется так много, достаточно нескольких простых аккордов.
Имея предварительную подготовку, описанную выше, теперь мы можем преобразовать её в наши знания программирования. Мы будем использовать HTML для создания интерфейса нашего фортепиано. Мы можем обратиться к ресурсам codepen и codesandbox, чтобы найти вдохновение. Здесь я использовал flex-верстку в сочетании с тенями и переполнением для реализации чёрных и белых клавиш фортепиано, используя синтаксис JSX React для перебора и рендеринга чёрных и белых клавиш.
<div class="piano">
{this.data.pianoKeys.map((item)=>{return(
<div class="piano-key">
<div data-type="white" ref={e=>{ this[item.white.name] = e }} class="piano-key__white"
onClick={this.playNote.bind(this,item.white.name)} data-key={item.white.keyCode}
data-note={item.white.name}>
<span class="piano-note">{item.white.name}</span>
<audio preload="auto" src={this.data.notes[item.white.name]} hidden='true' data-note={item.white.name}
class='audioEle'></audio>
</div>
<div data-type="black" ref={e=>{ this[item.black.name] = e }} style={{
display: item.black.name ? 'block' : 'none'
}} class="piano-key__black" onClick={this.playNote.bind(this,item.black.name)} data-key={item.black.keyCode}
data-note={item.black.name}>
<span class="piano-note" style="color:#fff">{item.black.name}</span>
<audio preload="auto" src={this.data.notes[item.white.name]} hidden='true' data-note={item.white.name}
class='audioEle'></audio>
</div>
</div>
)})}
</div>
Можно изучить CSS-код, который отдельно описывает стили для чёрных и белых клавиш, а также можно добавить дополнительный стиль для эффекта при нажатии на клавиши или перемещении мыши по клавишам фортепиано. Можно просто добавить фон, и общая реализация не будет слишком сложной. Конкретные детали могут быть настроены для создания собственного стиля фортепиано.
.piano {
margin: 0 200px;
background: linear-gradient(-65deg, #000, #222, #000, #666, #222 75%);
border-top: .8rem solid #282828;
box-shadow: inset 0 -1px 1px hsla(0, 0%, 100%, .5), inset -0.4rem 0.4rem #282828;
display: flex;
height: 80vh;
height: 20vh;
justify-content: center;
overflow: hidden;
padding-bottom: 2%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.piano-key {
color: blue;
flex: 1;
margin: 0 .1rem;
max-width: 8.8rem;
position: relative;
}
.piano-key__white {
display: flex;
flex-direction: column-reverse;
background: linear-gradient(-30deg, #f8f8f8, #fff);
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff, 0 4px 3px rgba(0, 0, 0, .7), inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px -1px 15px rgba(0, 0, 0, .5), -3px 4px 6px rgba(0, 0, 0, .5);
height: 100%;
position: relative;
}
.piano-key__black {
display: flex;
flex-direction: column-reverse;
background: linear-gradient(-20deg, #222, #000, #222);
box-shadow: inset 0 -1px 2px hsla(0, 0%, 100%, .4), 0 2px 3px rgba(0, 0, 0, .4);
border-width: .2rem .4rem 1.2rem;
border-style: solid;
border-color: #666 #222 #111 #555;
height: 60%;
left: 100%;
position: absolute;
transform: translateX(-50%);
top: 0;
``` 3, 4, 5, 5, 5, 6, 7, Option + 1…
Option + 1, Option + 1, 7, Option + 2, 6, 5, 5, 5, Option + 2, Option + 1, Option + 1, Option + 3, Option + 3…
Option + 1, Option + 2, Option + 3, Option + 3, Option + 4, Option + 3, Option + 2, Option + 3, Option + 1, Option + 1, 6, 6,
6, 7, Option + 1, Option + 2, Option + 2, Option + 1, 7, 6, Option + 4, Option + 2…
// Вместе росли…
3, 5, Option + 1, Option + 3, Option + 3., Option + 4, Option + 2…, Option + 2, Option + 5, 7, Option + 1…,
Option + 3, Option + 4, Option + 5, Option + 1, Option + 1, Option + 2., Option + 1, Option + 1
// В коридоре…
3, 4,
5, 5, 5, 6, 7, Option + 1…
Option + 1, Option + 1, 7, Option + 2, 6, 5, 5, 5, Option + 2, Option + 1, Option + 1, Option + 3, Option + 3…
Option + 1, Option + 2, Option + 3, Option + 3, Option + 4, Option + 3, Option + 2, Option + 3, Option + 1, Option + 1, 6, 6,
6, 7, Option + 1, Option + 2, Option + 2, Option + 1, 7, 6, Option + 4, Option + 2
// Вместе росли…
3, 5, Option + 1, Option + 3, Option + 3., Option + 4, Option + 2…, Option + 2, Option + 5, 7, Option + 1…
Option + 3, Option + 4, Option + 5, Option + 1, Option + 1, Option + 2., Option + 1, Option + 1
// Единственное упрямство…
Option + 3, Option + 4, Option + 5, Option + 1, Option + 1, Option + 2., Option + 1, Option + 1
// Вместе росли…
Option + 6, Option + 5, Option + 3, Option + 2, Option + 1, Option + 3., Option + 4, Option + 2…
Option + 6, Option + 5, 7, Option + 1…
// С тобой не закончишь…
Option + 3, Option + 4, Option + 5, Option + 1, Option + 1, Option + 2, Option + 3, Option + 3…
// А я уже не могу различить…
3, 5, Option + 1, Option + 3, Option + 3., Option + 2, Option + 2, Option + 2… Option + 2, Option + 5, 7, Option + 2, Option + 1, Option + 1
// Или пропущенная любовь…
Option + 3, Option + 4, Option + 5, Option + 1, Option + 1, Option + 2., Option + 1, Option + 1. **Лунная соната**
Мы можем сыграть ещё одну знакомую мелодию для фортепиано — «Лунную сонату».
```js
Ctrl+5, 1, 3, 5, 1, Ctrl+7, 3, 5, 5, 6, 7, Option+1, 6, 5, 3, 2, 1, 1, 1, 3, 2, 1, 1, 1, 2, 3, 2, 1,
Ctrl+6, 2,
3, 2, Ctrl+5, 1, 3, 5, 1, Ctrl+7, 3, 5, 5, 6, 7, Option+1, 6, 5, 3, 2, 1, 1, 1, 3, 2, 1, 1, 1, 2, 3, 2, 1,
Ctrl+6, 2, 3, 2,
Ctrl+5, 1, 3, 5, 1, Ctrl+7, 3, 5, 5, 6, 7, Option+1, 6, 5, 3, 2, 1, 1, 1, 3, 2, 1, 1, 1, 2, 3, 2,
1, Ctrl+6,
2, 3, 2, 3, 5, 3, 2, 1, 5, Ctrl+7, Ctrl+6, Ctrl+7, Ctrl+6, Ctrl+7, Ctrl+6, Ctrl+5, 3, 5, 3, 2, 1, 5, Ctrl+7, Ctrl+6, Ctrl+7,
1, 1, 1, 2,
3, 2, Ctrl+5, 1, 3, 5, 1, Ctrl+7, 3, 5, 5, 6, 7, Option+1, 6, 5, 3, 2, 1, 1, 1, 3, 2, 1, 1, 1, 2, 3,
2, 1, Ctrl+6,
2, 3, 2, Ctrl+5, 1, 3, 5, 1, Ctrl+7, 3, 5, 5, 6, 7, Option+1, 6, 5, 3, 2, 1, 1, 1, 3, 2, 1, 1, 1,
2, 3, 2, 1, Ctrl+6, 2, 3, 2, 3, 5, 3, 2, 1, 5, Ctrl+7, Ctrl+6, Ctrl+7, Ctrl+6, Ctrl+7, Ctrl+6, Ctrl+5, 3, 5, 3, 2, 1, 5,
Ctrl+7, Ctrl+6, Ctrl+7,
1, 1, 1, 2, 3, 2, Ctrl+5, 1, 3, 5, 1, Ctrl+7, 3, 5, 5, 6, 7, Option+1, 6, 5, 3, 2, 1, 1, 1, 3, 2, 1, 1, 1,
2, 3, 2, Ctrl+6, Ctrl+7, 1, 2, 1
Спасибо за музыку и программирование! Также выражаем уважение всем разработчикам, которые борются с 996-м рабочим графиком. Мы приглашаем вас делиться кодом, предлагать PR, обсуждать проблемы в issue или высказывать свои идеи. Музыка никогда не подводила людей, как поётся в песне Leehom Wang:
Если мир слишком опасен, только музыка безопасна, возьми меня с собой в сон, пусть слова станут реальностью! — «Наша песня»
Этот проект существует благодаря всем людям, которые вносят свой вклад.
В запросе был текст на китайском языке, который не удалось перевести. В ответе он также оставлен без перевода. Спонсоры
Станьте финансовым спонсором и помогите нам поддерживать наше сообщество.
Поддержите этот проект своей организацией. Ваш логотип будет отображаться здесь с ссылкой на ваш веб-сайт.
Omi Piano выпущен под лицензией MIT
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )