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

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



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

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

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 23

      0
      басисты негодуют :(
        0
        Скажу по секрету, там есть классы .BassIV… ;)
          0
          Самый последний блок глянь :)
          +2
          Прикольно. Было бы круто, если бы его можно было скопировать и вставить в текстовый редактор ;)
            0
            Ммм… я могу попробовать такое сделать, если есть, конечно, какие-нибудь решения на данный счет. Просто мне о таковых не известно пока.
              0
              вставлять в блоки текст с размером 0?
                +1
                rukeba.com/chords/ здесь работает. довольно симпатично
                  0
                  Ну, можно, конечно, написать конвертилку, которая будет в текстовый формат аккорд перегонять… подумаю.
                  0
                  а ты мою статью почитай ;-)
                    0
                    Читал.
                +1
                По семантике это скорее ненумерованный список — но это так, мелкая придирка :)
                  0
                  Ну, почему же сразу ненумерованный?

                  Более того скажу: изначально номера ладов, пальцев и даже строй отбражались именно через списочный счетчик. Но из-за глюков в Опере и Хроме пришлось отказаться от этой затеи. Кроме того, я внезапно вспомнил, что строй может быть не только чистым. В общем, переделал на content.
                  +1
                  а зачем Вам это нужно, если не секрет?
                    +1
                    Как минимум, скиллы прокачать. Про максимум как-нибудь расскажу отдельно, если будет о чем рассказывать.

                    Сначала не туда запостил.
                    0
                    Как минимум, скиллы прокачать. Про максимум как-нибудь расскажу отдельно, если будет о чем рассказывать.
                      +1
                      Здорово! Единственное, что заметил, так и задумано что номера ладов «под» первой струной оказываются?
                        0
                        Да, так и было задумано.
                        +1
                        Автору — спасибо.
                        Интересно, возможно реализовать вывод нотного стана с нотами и всеми знаками?
                          0
                          Можно через канвас. Мне даже где-то на Хабре попадалась заметка на эту тему. Чистым же ХТМЛ наверное тоже можно извратиться, но слишком затратно получится, имхо.
                          +1
                          А я в исходном коде заметил что то похожее на генератор табулатур silkleo.ru/blocks/b-harmony/b-harmony.js, но в интерфейсе ничего такого нет…
                            0
                            b-harmony.js занимается расчетом гармонии (тональность, основные ступени и так далее). Это только часть генератора аккордов. Остальные части пока не готовы, поэтому я их и не показываю.

                            А вообще глаз-алмаз.
                            0
                            Впервые нашел ваш пост ) Очень радостно видеть, что идея развивалась далее.
                              0
                              Спасибо. Рад, если понравилось.

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

                            Самое читаемое