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

    Вдохновленный сайтом http://chordfind.com, а также примером r3code, решил довести до ума собственную версию табулатур.

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

    Плюсы:
    — поскольку «струны» разной ширины, можно наглядно увидеть, где верх, а где низ;
    — наличие трех струнных схем: бас (от трех до шести струн), двойные струны (от восьми (мандолина) до двенадцати (двенадцатиструнная гитара)), одинарные струны (от трех до восьми);
    — не используется графика;
    — только один css-файл;
    — минимум html-кода;
    — интуитивно понятные классы;
    — с помощью класса Active можно подсвечивать струну.

    Минусы:
    — из-за использования комбинированных классов не работает в шестом ИЕ (в седьмом и выше должно выглядеть адекватно);
    — не стал заморачиватьсся номерами пальцев и отображением строя выбранного инструмента;
    — из-за отсутствия украшательств выглядит несколько квадратно.

    Все исходники — на странице примеров.

    Средняя зарплата в IT

    111 111 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 6 788 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

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

      +7
      — из-за использования комбинированных классов не работает в шестом ИЕ (в седьмом и выше должно выглядеть адекватно);

      Вас это действительно сильно беспокоит?
        +4
        По привычке — да.
          +11
          Зря. Давно пора уже.
        +4
        Добавьте бордер радиус 5px для ".Fingerboard .Hand li" будет поприятней на вид.
          +1
          Ага, уже. Спасибо.
          +1
          подписи аккордов лучше делать над схематическим грифом.
            0
            Там есть див с классом Text, в нем и пишется комментарий. А див этот в свою очередь можно поставить хоть сверху, хоть снизу, хоть с обеих сторон.
              0
              я исключительно как юзер.
            +2
            на «маньяках» держится мир :)
              +2
              Это офигенно!
                +2
                Ох… А зачем это так отображать? Вроде бы есть стандарт на схематическое отображение типа такого:
                  +3
                  А чёрт его знает, но мне в варианте автора топика ближе и понятней как-то. Аккуратнее, что ли… ну и толщина струн как-то сразу помогает определиться.
                    +1
                    Аналогия — штука сильная. Мне, неискушённому в вопросах «табулатур» человеку, при взгляде на результат автора становится понятно, что и где. А при взгляде на Вашу картинку, к сожалению, ничё не понятно.
                      0
                      Это дело привычки. Достаточно один раз разобраться. Мне, кажется, указание толщины струн лишним. Как-то естственно когда шестая струна внизу (или слева, как на рисунке выше).
                        0
                        Не отрицаю. Когда разберёшься, то становится понятно.
                      0
                      У r3code как раз так и сделано. Грубо говоря, вообще так наверное правильней. Но мне хотелось сделать поярче и поинтересней. Хотя бы даже для себя.
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          Ммм… ваши предложения?
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Подумаю, спасибо.
                          0
                          Я не очень понимаю смысла пытаться «очеловечить» или «добавить мнемоники» в схему. Схема — на то и схема

                          Если говорить о визуальной красоте — то тогда уже надо рисовать полноценный гриф, с бэкграундом, с красивыми струнами (разной толщины, хотя бы с градиентом и часть должна быть в оплетке, а часть — нет), должны быть какие-то традиционные маркеры на грифе, размеры ладов должны убывать по мере возрастания номера. Не сочтите за пиар, мне это гугл выдал на первой странице поиска по фразе «fretboard»:
                            0
                            У разной толщины «струн» было определенное назначение — понятно, где верх, а где низ (затем так и делалось). А каков смысл красивого «деревянного» бэкграунда и сужающихся ладов? Или «обмотки» на струнах? По-моему, это уже лишнее.

                            Что до маркеров на пятом-седьмом-двенадцатом и прочих ладах, то на неполном грифе (пять ладов) римские цифры удобней и понятней. Потому что без лишних телодвижений ясно, от какого лада плясать (не все ведь аккорды строятся у верхнего порожка).
                              0
                              На самом деле — все крутится вокруг «стандартизованный вид» (т.е. единая стандартная пиктограмма без излишеств) vs «как можно более похоже на настоящее» (и тогда чем больше «излишеств» будут напоминать о внешнем виде — тем лучше). И в этом случае мне кажется, что промежуточные варианты — странные.

                              Мне непонятно, зачем на схеме показывать толстые-тонкие струны — если даже опустить сомнительную эстетическую составляющую, то схема — это все равно схема, нужно что-то знать и уметь, чтобы ей пользоваться. Все равной какой-то learning curve есть. Нужно знать, как брать барре и что «вот эта толстая палка» обозначает барре. Нужно знать, что означают всякие эти цифры-буквы-кружочки-крестики. Когда человек хоть раз в жизни со схемами разобрался и привык к некоему стандартному виду — ему это стандартный вид видеть удобно. Проводя аналогию — ведь не рисуют же на нотном стане, например, линейки разной толщины?
                                0
                                Мне больше по душе третий вариант: схема, чуть более наглядная, чем обычно.
                      • НЛО прилетело и опубликовало эту надпись здесь
                          +1
                          В предыдущих вариантах верстки пальцы было довольно сложно вставить, в текущей — подумаю над этим, когда время будет свободное.
                            0
                            Для начала можно хотя бы снизу подписать мелким шрифтом что куда становится, ну и в процессе придумать и арсставить буковки пальцев, там свое обозначение, p — вроде большой и тд. Снизу легенда на всякий пожарный. Пальцы нужны :) Поддерживаю :)
                          0
                          симпатичненько
                          чтобы заработало и в ие6 можно использовать кастомные тэги
                            0
                            Хорошая штука… я бы еще «распальцовку» подписывал (кроме барре, хотя и на нём для общности можно).
                            Можно рядом, а можно кружочки потолще сделать и в центре писать соотв. букву.
                              +2
                              Почему на длинном грифе после пятого лада идёт снова первый?
                                +1
                                Глаз — алмаз! Пофиксил, спасибо!
                                  0
                                  Ну тогда уж приподнимете немного римские цифры, чтобы их нижняя часть не закрывалась струнами и не ухудшала читаемость.

                                  P.S. Я с гитарами на знаком лишь немного, не могли бы вы пояснить, почему на табулатурах гриф отображается вверх-ногами (т.е. толстая струна внизу)? Мне кажется, что при чтении такого рисунка правше было бы удобней видеть зеркальное отображение грифа и собственной руки, и пальцы тут же становились бы на нужное место. Вместо этого мне приходится переворачивать картинку и пытаться понять где какой-палец.
                                    +2
                                    Ответ очень простой. Попробуйте взять в руки гитару (если Вы правша) и поверните ее к себе передней стороной вверх. При взгляде на гриф Вы сразу увидите ближайшей к себе струной именно тольстую. Т.е. табулатура снизу вверх показывает взгляд гитариста от себя к грифу гитары (надеюсь, понятно объяснил).
                                      0
                                      Да, понятно, спасибо.
                                +1
                                Идея отличная. А как на счёт левшей? Реально ли сделать зеркальное отображение? (сам левша)
                                  0
                                  Реально, почему нет? В текущей реализации это, правда, потребует альтернативного css-файла.
                                  0
                                  Красные точки — не наглядно. Надо или крестики, или не знаю что
                                    0
                                    Я бы сделал крестики, если б смог придумать, из какого элемента их сотворить с помощью ЦСС. Шрифты не подходят потому что их отображение может заметно отличаться в зависимости от браузера и ОСи.
                                      +1
                                      Крестик можно сделать, например, вот так — пример
                                    0
                                    у меня 1366*768 и в FF нижняя прокрутка, так и надо?
                                      0
                                      Это из-за длинного грифа. Он, видимо, шире, чем 1366.
                                      +2
                                      моя реализация определителя аппликатур аккордов — rukeba.com/chords/
                                        0
                                        Ага, видел. Порадовала база аккордов. Я, кстати, вглубь не вникал, а вы угадываете аккорд или в базу раскладки сохраняли?
                                          0
                                          Судя по страничке — там под тысячу div'ов с заготовленными ответами на все случаи жизни, видимость которых переключается в зависимости от нажатой кнопки.
                                            0
                                            О… начал писать свой угадыватель аккордов — жуткое занятие… Через месяц-другой забил. Нужны эвристические оптимизаторы типа по расстояниям между пальцами, чтоб больше струн было затронуто… Иначе жуть полная получается. Может я конечно что-то не так сделал, не знаю.
                                            Есть неплохая реализация на Java в проекте tuxguitar но я на известные мне языки портировать не смог

                                            (а на этом сайте скорее всего из готовой базы генерируется)
                                              0
                                              Я на яваскрипте нечто похожее писал. Строил хроматические гаммы-струны а потом сканировал их, расставляя по дороге условия.
                                                +1
                                                Ну, если просто так расставлять ноты по струнам то получаются не очень удобные аппликатуры или вообще ряд точек на струнах в простейшем случае. Оптимизации все равно нужны.

                                                Видел генератор на Javascript, причем весьма компактный и точный, но код жутко запутанный тут www.gootar.com/folder/ghelpruss.html

                                                На amdm.ru есть неплохой автоматический генератор аккордов, но код генерации посмотреть нельзя ибо он на сервере.
                                                +1
                                                да, есть текстовый файлик со всеми этими аккордами, из которого и генерируется html-код (не при каждом запросе конечно :)
                                                +1
                                                нет, не угадываю конечно.
                                                скажу честно где-то украл я базу всех аккордов в текстовом виде, переформатировал в удобный вид и генерю из них уже эти div`ы.
                                                  0
                                                  Скажите, а вы не очень огорчитесь, если я у вас в свою очередь позаимствую раскладки для своих коварных целей?
                                                    +1
                                                    заимствуйте на здоровье! даже буду рад.
                                                0
                                                Кстати, насчет вашего сайта, я тоже думал сделать нечто похожее. Сборник любимых песен с аккордами. Несколько ломает забивать базу и адаптировать ее к вышесверстанному грифу :) А вы молодец, что не поленились.
                                                  0
                                                  дык и я ленюсь! наполняются аакорды и песни ооочень медленно.
                                                  0
                                                  очень удобно, спасибо.
                                                  +1
                                                  <li class="Nut"><!----></li>

                                                  Не парьтесь с комментариями и не верьте HTML Tidy, элемент может быть пустым, спросите у настоящего валидатора, а не у плагина к Firefox.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      0
                                                      Ну не коммент же пихать :(
                                                      Я бы на месте автора написал бы нормальный XML, описывающий то, что он делает, и обработал бы его — хоть XSL, хоть JS. Вот это было бы по-взрослому.
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                          +1
                                                          Я категорически ничего не понимаю в этом, поэтому проектировать структуру данных я бы не взялся :) Хотя, нет — я знаю четыре аккорда…
                                                    –3
                                                    очередной велосипед, коих тысячи [x]
                                                    к томуже пока что без колёс и руля
                                                      +2
                                                      У Вас F#m выводится от третьего лада, хотя должен быть с барре на втором :)
                                                        +1
                                                        Спасибо, поправил.
                                                          0
                                                          B7 — на полтона выше + заглушить шестую струну
                                                            –2
                                                            B — это ля-диез, а не си вроде?
                                                              0
                                                              у гитарастов и прочих современных музыкантов всё же принято, что B — это си. H не используется совсем. давно уже не видел этих H.
                                                              шестую струну убрать в любом случае надо.
                                                                +1
                                                                Это очередной холивор — по поводу какой из вариантов наименования нот использовать:

                                                                1. C-C#-D-D#-E-F-G-G#-A-Bb-B-C («американский» вариант)
                                                                2. C-C#-D-D#-E-F-G-G#-A-Hb-H-C («немецкий» AKA «европейский» вариант)
                                                                3. C-C#-D-D#-E-F-G-G#-A-B-H-C (этот странный «джазовый»-духовой вариант)

                                                                Ну, еще иногда он множится в сторону «что религиозно правильнее, C# или Db в самом общем случае, если мы не знаем тональность».

                                                                Решается он банально — дать пользователю возможность выбора, какой из 3 вариантов наименования ему удобнее (а может и не 3 — некоторым, скажем, ближе писать «до-диез-минор», а не «C#m»).
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                    +1
                                                                    Есть несколько точек зрения на эту тему, ни одна из них ничем, кроме большого количества слов и биения в грудь пяткой говорящего на самом деле не подтверждена.

                                                                    Сходу нашлась вот такая статья — www.amdm.ru/articles/aboutsi/ — некие факты там изложены, хотя с эмоциональной окраской и выводами автора я не согласен. Истина, скорее всего, где-то посередине.

                                                                    Де факто, насколько я сейчас наблюдаю, с вариантов №3 выходят либо книжки с джазовыми композициями от 50-60-х годов, либо русские книжки с аккордами, где они скорее всего не от большого ума, а просто потому, что инспирированы советскими традициями и школой, которой копировала всё с этих же самих 50-60-х годов (оттуда же — и семиструнные «народные» гитары, и неосознанная любовь народа к «нейлоновым» струнам в виде лески и т.п.).

                                                                    Все современные классические издания, которые я видел, используют либо надписи русскими словами «до-диез-минор» (если это русскоязычные), либо латинскими («Cis-moll»). Почти все современные американские и европейские программы, работающие с MIDI, работают в варианте №1 — скорее всего банально потому, что такие названия прописаны в стандарте MIDI.

                                                                    Вариант №2 я вижу регулярно на всяких русскоязычных сайтах, публикующих аккорды песен.
                                                                      0
                                                                      Я, когда начинал писать Гармонию, не парился и выбрал схему ABC… хоть мне и ездили по макушке, что это не есть правильно.
                                                                        0
                                                                        Ну, а у нас как-то так ;)

                                                                        А что такое «Гармония»? Еще какое-то дополнительное приложение? Можно его посмотреть?
                                                                          0
                                                                          Это неудачная попытка сделать «угадывалку» аккордов (откровенно мозгов не хватило). Скрипт по ссылке занимается расчетами для тональностей. Умеет строить хроматическую гамму, вычислять ступени, натуральную, гармоническую и мелодическую гаммы плюс в более старой версии оно еще умело строить аккорды и интервалы.
                                                                  0
                                                                  нет, это не холивар. сколько знаю музыкантов-видел нот — все пользуются этим вашим «американским» вариантом и холиварить никто даже не думает.
                                                                  интересуюсь как раз джазом, везде Bb и B, никаких H нету.

                                                                  > Ну, еще иногда он множится в сторону «что религиозно правильнее, C# или Db в самом общем случае, если мы не знаем тональность».

                                                                  если нет тональности — нет никакой разницы, очевидно же. споров на эту тему ни разу не видел, не слышал. где вы их нашли?
                                                                    0
                                                                    По-моему, то, что Вы говорите — утверждения типа «никаких альтернатив нет, все делают только так» — это и есть холивар ;) Выше я привел ссылку, где человек так же безапелляционно говорит о том, что «правильно только B и H».

                                                                    Про C# и Db — спор не в том, что «нет никакой разницы», а в том, что программа должна как-то именовать MIDI ноту 61, причем зачастую у нее нет информации о тональности. Тональность же всегда есть и начинается спор о том, что популярнее, приводятся аргументы о том, типа «C/Am и F# встречается в M произведениях, а ваша D# — только в N произведениях, поэтому нужно писать диезы-бемоли вот так-то».
                                                        +1
                                                        На всякий случай, если вы пропустили мой комментарий выше, дублирую его здесь:
                                                        крестик на css можно сделать, например, вот так.
                                                          0
                                                          Не пропустил, чуть позже посмотрю, спасибо.
                                                            +1
                                                            А не проще ли использовать Unicode-символ? Или даже собрать шрифт из нужных символов и подключать к странице.
                                                              0
                                                              Автор не хочет использовать шрифт, потому что
                                                              их отображение может заметно отличаться в зависимости от браузера и ОСи
                                                            0
                                                            Я считаю — давно пора объединить и таблицы аккордов, и таблицы аккордовых последовательностей, и таблицы ладов
                                                            и сделать это наконец с красивым интерфейсом — везде всё печально.
                                                            Как дизайнер с радостью вписался бы, реализовать у меня это вряд ли получится без верстающе-программирующего человека )
                                                              0
                                                              а зачем Вам это нужно, если не секрет?
                                                                0
                                                                Продайте эту идею какому-нибудь ultimate-guitar.com вместе с конвектором.

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

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