Как стать автором
Обновить

Аккорды для струнных щипковых инструментов: работа над ошибками

Время на прочтение 7 мин
Количество просмотров 987
Спустя несколько месяцев с публикации второй версии своих гитарных табулатур, нашел наконец-то время немного их доработать напильником.



Что было сделано:

— Убрал схемы с двойными струнами (они делались, в общем-то скорее по фану),
— Максимальное количество ладов ограничил двенадцатью,
— Добавил отображение номеров ладов,
— Добавил отображение номеров пальцев,
— Добавил отображение строя инструмента,
— Переделал отображение неактивных струн (раньше они выделялись красными «фишками», теперь, как и положено, красными крестиками и менее заметным цветом (второе сделано для шестого ИЕ, который не поддерживат css-свойство content),
— Поработал над кроссбраузерностью, в результате — та-дааам! — эта штука работает даже в старичке шестом ИЕ, хотя некоторых красивостей там увидеть и не получится.

Как это безобразие выглядит, можно увидеть на странице с примерами (сравнить с предыдущей версией).

Как всем этим пользоваться?

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

Пошаговая инструкция по отображению аккорда Em

1. Скачиваете css-файл блока и кладете его в удобную для вас директорию.

2. Подключаете скачанный цсс-файл:
<link rel="stylesheet" type="text/css" href="путь_к_файлу/b-neck.css">


3. Создаете обертку:
<div class="b-neck">
	<div class="b-neck__fretboard SingleVI">
	</div>
</div>

Если вам не нужен полный гриф в двенадцать ладов, можно сделать так:

<div class="b-neck b-neck_type_part">
	<div class="b-neck__fretboard SingleVI">
	</div>
</div>

В этом случае в обертку можно будет запихнуть пять ладов. Класс SingleVI означает что у отображаемого инструмента шесть одинарных струн. Еще можно использовать классы: SingleIII, SingleIV, SingleV и SingleVII. Если вы хотите использовать басовые схемы, то нужно поставить сюда любой из этих классов: BassIII, BassIV, BassV, BassVI.

4. Вставка ладов:
<div class="b-neck">
	<div class="b-neck__fretboard SingleVI">
		<div class="b-neck__frets">
			<div class="b-neck__fret Nut"></div>
			<div class="b-neck__fret I"></div>
			<div class="b-neck__fret II"></div>
			<div class="b-neck__fret III"></div>
			<div class="b-neck__fret IV"></div>
			<div class="b-neck__fret V"></div>
			<div class="b-neck__fret VI"></div>
			<div class="b-neck__fret VII"></div>
			<div class="b-neck__fret VIII"></div>
			<div class="b-neck__fret IX"></div>
			<div class="b-neck__fret X"></div>
			<div class="b-neck__fret XI"></div>
			<div class="b-neck__fret XII"></div>
		</div>
	</div>
</div>

Если вы использовали для обертки класс b-neck_type_part, то элементов с классом b-neck__fret должно быть не больше шести. Класс Nut у такого элемента означает, что это — верхний порожек. Классы-римские цифры — это номера ладов. Начинать отсчет можно как с Nut, так и с любого лада (в этом случае Nut просто убирается).

5. Вставка струн:
<div class="b-neck">
	<div class="b-neck__fretboard SingleVI">
		<div class="b-neck__frets">
			<div class="b-neck__fret Nut"></div>
			<div class="b-neck__fret I"></div>
			<div class="b-neck__fret II"></div>
			<div class="b-neck__fret III"></div>
			<div class="b-neck__fret IV"></div>
			<div class="b-neck__fret V"></div>
			<div class="b-neck__fret VI"></div>
			<div class="b-neck__fret VII"></div>
			<div class="b-neck__fret VIII"></div>
			<div class="b-neck__fret IX"></div>
			<div class="b-neck__fret X"></div>
			<div class="b-neck__fret XI"></div>
			<div class="b-neck__fret XII"></div>
		</div>

		<div class="b-neck__strings">
			<div class="b-neck__string I   E"></div>
			<div class="b-neck__string II  H"></div>
			<div class="b-neck__string III G"></div>
			<div class="b-neck__string IV  D"></div>
			<div class="b-neck__string V   A"></div>
			<div class="b-neck__string VI  E"></div>
		</div>
	</div>
</div>

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

С блоком b-neck__string все просто. У него могут быть три класса.

Первый — римская цифра, означающая номер струны (он обязательный).

Второй — латинская буква в верхнем регистре, обозначающая, на какую ноту струна сейчас настроена (его можно не указывать). Помимо чистых нот можно указывать диезовые или бемолевые. Например вот так:

<div class="b-neck__string I  F♯"></div>

или:

<div class="b-neck__string I  E♭"></div>

Пользоваться этой возможностью следует осторожно, потому что значки ♯ и ♭ не во всех операционках и шрифтах отображаются.

Третий класс тоже не обязателен, он может быть либо Active, либо Inactive. В первом случае струна подсвечивается зеленым, как активная, во втором, у нее появляется красный крестик и она «бледнеет».

6. Вставка «пальцев» (этот блок самый сложный)
<div class="b-neck">
	<div class="b-neck__fretboard SingleVI">
		<div class="b-neck__frets">
			<div class="b-neck__fret Nut"></div>
			<div class="b-neck__fret I"></div>
			<div class="b-neck__fret II"></div>
			<div class="b-neck__fret III"></div>
			<div class="b-neck__fret IV"></div>
			<div class="b-neck__fret V"></div>
			<div class="b-neck__fret VI"></div>
			<div class="b-neck__fret VII"></div>
			<div class="b-neck__fret VIII"></div>
			<div class="b-neck__fret IX"></div>
			<div class="b-neck__fret X"></div>
			<div class="b-neck__fret XI"></div>
			<div class="b-neck__fret XII"></div>
		</div>

		<div class="b-neck__strings">
			<div class="b-neck__string I   E"></div>
			<div class="b-neck__string II  H"></div>
			<div class="b-neck__string III G"></div>
			<div class="b-neck__string IV  D"></div>
			<div class="b-neck__string V   A"></div>
			<div class="b-neck__string VI  E"></div>
		</div>

		<div class="b-neck__hand">
			<div class="b-neck__finger III AtIV ToII"></div>
			<div class="b-neck__finger II  AtV  ToII"></div>
		</div>
	</div>
</div>

Следует обратить внимание на блок b-neck__finger. У него может быть четыре класса.

Первый — римская цифра от I до V. Она обозначает номер пальца. Если этот класс не указать, то номер пальца показываться не будет. Пальцы указываются следующим образом: указательный — I, средний — II, безымянный — III, мизинец — IV, большой (иногда он встречается) — V.

Второй — At+римская цифра, обозначающая, на какую струну ставится «палец».

Третий — To+римская цифра, обозначающая, на какой лад «палец» сдвигается.

Четвертый — Barre+римская цифра, обозначающая, на сколько ладов ставится баррэ. Например:
<div class="b-neck__finger BarreIV"></div>

Поставит баррэ на 4 струны.

7. Возможно, вам захочется добавить подпись или заголовок к блоку с аккордом
<div class="b-neck">
	<div class="b-neck__h1">Заголовок сверху</div>

	<div class="b-neck__fretboard SingleVI">
		<div class="b-neck__frets">
			<div class="b-neck__fret Nut"></div>
			<div class="b-neck__fret I"></div>
			<div class="b-neck__fret II"></div>
			<div class="b-neck__fret III"></div>
			<div class="b-neck__fret IV"></div>
			<div class="b-neck__fret V"></div>
			<div class="b-neck__fret VI"></div>
			<div class="b-neck__fret VII"></div>
			<div class="b-neck__fret VIII"></div>
			<div class="b-neck__fret IX"></div>
			<div class="b-neck__fret X"></div>
			<div class="b-neck__fret XI"></div>
			<div class="b-neck__fret XII"></div>
		</div>

		<div class="b-neck__strings">
			<div class="b-neck__string I   E"></div>
			<div class="b-neck__string II  H"></div>
			<div class="b-neck__string III G"></div>
			<div class="b-neck__string IV  D"></div>
			<div class="b-neck__string V   A"></div>
			<div class="b-neck__string VI  E"></div>
		</div>

		<div class="b-neck__hand">
			<div class="b-neck__finger III AtIV ToII"></div>
			<div class="b-neck__finger II  AtV  ToII"></div>
		</div>
	</div>

	<div class="b-neck__h2">Заголовок снизу</div>
	<div class="b-neck__message">Сопроводительный текст</div>
</div>


Вот, в общем-то и все.

Немного баловства:
Арпеджио №1,
Арпеджио №2,
Арпеджио №3,
Арпеджио №4 (мое любимое).

Альтернативные версии:
habrahabr.ru/blogs/css/55248 от r3code,
rukeba.com/chords от rukeba,
habrahabr.ru/blogs/css/94139 от tenshi,
chordfind.com,
www.gootar.com/guitar.
Теги:
Хабы:
+38
Комментарии 23
Комментарии Комментарии 23

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн