x
 
Роман Ватриковский
15 октября 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Здравствуйте, уважаемые бюрошники и советчики!

Есть задача: проиллюстрировать разборы музыкальных композиций на сайте фрагментами самих композиций. Комментарии к графическому дизайну легко оформить на экране, нужно придумать аналог для комментариев музыки. При этом важно иметь возможность сопоставить фрагменты разбора с фрагментами (или даже конкретными «точками») трека, но, думаю, не стоит рвать его на десяток непонятно откуда вырезанных кусков и распихивать по десятку плееров, захламляющих страницу.

​​​Первое, что пришло в голову — плеер с разметкой и комментированием отдельных отрезков и точек. Чтобы было, от чего оттолкнуться, набросал небольшой эскиз. Комментарии, естественно, могут быть псевдоссылками. Подчёркиваю, это только первая мысль, начало пути. Параллельно решил спросить совета у вас, как решить задачу элегантно и просто :-)

Решение должно умещаться в возможности HTML5, CSS3 и JS, физически масштабироваться в разумных пределах, и, конечно, совсем не обязательно иметь вид плеера.


Роман!

Я уже сто лет меч­таю, чтобы обыч­ный плеер научился пока­зы­вать струк­туру песни:

Все­гда бесит искать кусок ком­по­зи­ции всле­пую. Мне необя­за­тельно, чтобы эти пометки все­гда висели на экране, хотя бы по нажа­тию «альта». Подо­зре­ваю, что искус­ствен­ному интел­лекту такое давно по зубам.

Такой же плеер можно исполь­зо­вать в каче­стве «хребта», вокруг кото­рого рас­по­ло­жатся ваши ком­мен­та­рии из разбора:

По моти­вам ана­лиза Питера Кро­сби

Но кажется, что подроб­ный раз­бор не уме­стить в корот­ких ком­мен­та­риях. Почи­тайте ана­лиз Питера Кро­сби песни Highway To Hell  — в нём всё подроб­нее и инте­рес­нее, чем в моей схе­ма­тич­ной вер­сии на иллюстрации.

Чтобы не жерт­во­вать подроб­но­стями, но при этом, как вы гово­рите, не рвать ком­по­зи­цию на деся­ток пле­е­ров на стра­нице, мог бы подойти фор­мат «теле­ви­зора», как в наших элек­трон­ных кни­гах: сверху объ­ект изу­че­ния, снизу текст с подсветкой:

Конечно, если бы мы делали книгу с ана­ли­зом музыки, при­ш­лось бы ещё поэкс­пе­ри­мен­ти­ро­вать и поду­мать, как свя­зать под­светку тек­ста с про­иг­ры­ва­е­мым фраг­мен­том. Воз­можно, пере­мотка песни из‑за слу­чай­ной про­крутки была бы неожи­данна — или, нао­бо­рот, вполне уместна в осо­бом режиме эда­кого «тек­сто­вого джог‑дайла».

Базо­вая струк­тура песни — это лучше, чем про­стой плеер. Но гораздо инте­рес­нее визу­а­ли­зи­ро­вать отдель­ные инструменты:

Для при­мера исполь­зо­вана визу­а­ли­за­ция этюда Шопена. Сти­вен Мали­нов­ски

Или, может быть, даже ани­ми­ро­вать теку­щий фрагмент:

На десерт — этюд Шопена из «Машины ани­ма­ции музыки»:


Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

2 Хочу сделать красивый блог с пошаговыми рецептами 7 6




Недавно всплыло

10 Как вы проверяете соответствие вёрстки макету 2 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 3