Пока я занимался подбором и публикацией аккордов к песням из "Последнего испытания", меня смутно терзала мысль сделать так, чтобы можно было прямо на страничке взять и перейти в другую тональность. В итоге мысль вылилась в некий скрипт на jquery, который я представляю уважаемой общественности.

Идея проста. В исходнике аккорды записываются прямо в тексте песни:

Белый сн{Am}ег, серый лед
На растр{C}ескавшейся земле

На выходе получаются красиво оформленные надстрочные аккорды:

Белый снAmег, серый лед
На растрCескавшейся земле

Кроме всего прочего, аккорды можно тут же перевести в произвольную тональность. Для иллюстрации того, как это все работает, я выбрал аккорды к песне "Привет", подобранные Ростиславом Чебыкиным - автором знаменитой еще со времен FidoNet "Антологии популярных песен", а также популярной шуточной песни "Что такое авторская песня?". В версии Чебыкина имеются, по-моему, все возможные виды и формы аккордов, так что для тестирования скрипта она подошла идеально.

Привет

Музыка: М.Леонидов
Слова: Д.Рубин
Подбор аккордов: Р.Чебыкин (Philigon Kender)

Вступление:{ }{_Dm}{ }{_Bb}{ }{_A7}{ }(3 раза)

Прив{Dm}ет! Сегодня д{Dm(maj)7}ождь и скверно,
А мы не в{Dm7}иделись, н{Dm6}аверно,
Сто л{Gm}ет.{ (Gm6)}
{A}Тебе в метро? Скажи на м{Asus}илость,
А ты совс{A}ем не измен{A7}илась,
Hет-н{Dm}ет!{ B A7}
Прив{Dm}ет! А жить ты будешь д{Dm(maj)7}олго,
Я вспомин{Dm7}ал тебя вот т{D7}олько
В об{Gm}ед!{ Gm/A}
{Bb}Прости, конечно же,{Dm/F} нелепо
{E7}Кричать тебе на весь тролл{A7}ейбус:
"Прив{Dm}ет!"

Прив{Dm}ет! Дождливо этим л{Dm(maj)7}етом...
{Dm7}{ }А впрочем, стоит ли об {Dm6}этом?
Ведь н{Gm}ет!..{ (Gm6)}
{A}{ }Тогда о чем? О сн{Asus}ах, о книгах?
И ч{A}ерт меня попутал кр{A7}икнуть
"Прив{Dm}ет!"{ B A7}
{Dm}Как жизнь? Hе то чтоб очень гл{Dm(maj)7}адко,
Hо, в общем, зн{Dm7}аешь, все в пор{D7}ядке -
Без б{Gm}ед;{ Gm/A}
{Bb }Дела отлично, как об{Dm/F}ычно,
А с л{E7}ичным... Hу, вот т{A7}олько с личным -
Прив{Dm}ет.{ H7}

Прив{Em}ет! А дождь все не прох{Em(maj)7}одит,
{Em7}{ }А я с утра не по пог{Em6}оде
Од{Am}ет.{ (Am6)}
{H}Hаверно, я уже прост{Hsus}ужен,
Да б{H}ог с ним! Слушай, мн{H7}е твой нужен
Сов{Em}ет.{ C H7}
{Em}В конце концов, мне дела н{Em(maj)7}ету,
Реш{Em7}ишь ли ты, что {E7}я с приветом,
Иль н{Gm}ет, - { Am/H}
{C }Hо, может, черт возьм{Em/G}и, нам снова!..
Выходишь зд{F#7}есь?.. Hу, будь здор{H7}ова...
Прив{Em}ет...{ C H7}
Прив{Em}ет...{ C H7}
Прив{Em}ет...

Комментарии:
1. Строго говоря, вместо большого количества достаточно сложных аккордов можно играть просто {_Dm}, {_Gm} и так далее. Hо в оригинале играется именно так, как здесь приведено.
2. Во вступлении и между куплетами иногда играют {_Dm} - {_Gm} - {_A7} вместо правильного {_Dm} - {_Bb} - {_A7}.
3. Практически всегда игнорируется модуляция (смена тональности) в третьем куплете.

Исходники вместе с примерами я выложил на GitHub.

Скрипт предполагает два вида аккордов: надстрочные и внутристрочные. Внутристрочные аккорды нужны при записи вступления (где попросту нет текста, над которым ставить аккорды) или при записи комментариев, как в примере выше. Задаются они при помощи фигурных скобок, внутри которых первым символом стоит знак подчеркивания: {_Am}.

Есть несколько допущений и ограничений:

1. Действие скрипта распространяется только на те области документа, которые располагаются внутри элементов <div class="song">. Таких элементов может быть сколь угодно много.
2. Скрипт предполагает, что каждый куплет завернут в тег <p>. Поскольку многие блог-платформы (и Drupal в том числе) автоматически заворачивают абзацы в этот тег, можно воспринимать его как данность.
3. Скрипт раздвигает все строчки в куплетах, вне зависимости от наличия в них аккордов. Элегантного решения, позволяющего различать куплеты с аккордами и без, я не придумал. В песнях из "Последнего испытания" я все равно ставлю аккорды во всех строчках :)
4. Символы { и } не экранируются ничем :( Т.е. предполагается, что в песне они не встречаются.
5. Ввиду возможности обозначения одной и той же ноты несколькими способами, переходы вверх и вниз различаются. Переход вниз - всегда на бемоль, переходы вверх - всегда на диез. Скрипт понимает B и Bb как "си-бемоль", но при переходах всегда использует H.
6. Чтобы разместить управляющие элементы для смены тональности, нужно воткнуть <div class="transposition"></div> в любое место внутри песни - причем это можно сделать произвольное количество раз (в примере выше это сделано дважды).
7. Если аккорд нужно разместить над пустым местом (перед началом строки или после ее конца, можно перед ним или после него воткнуть произвольное количество пробелов, а то и вовсе отделить аккорд пустой структурой с произвольным количеством пробелов внутри { }. Пробелы, поставленные вне фигурных скобок, будут проигнорированы HTML-интерпретатором.

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

P.S. Если кто из коллег по цеху это читает - потестируйте, пожалуйста! :)