Школа
Интерфейс

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

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

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

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

Роман Ватриковский
15 окт 2018
👁 4790   🗩3
Интерфейс

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

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

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

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

Роман Ватриковский
15 окт 2018
👁 4790   🗩3
А. Г.
Арт‑директор и автор учебных программ бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Роман!

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

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

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

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

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

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

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

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

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

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

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

'_cover.jpg' not found
ИнтерфейсПредставление информации
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы