Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Занятный генератор музыки онлайн. Продолжение истории

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Здравствуйте.
Это продолжение ветки dou.ua/forums/topic/26260
Все-таки решился снова обратиться к уважаемому сообществу DOU по вопросу своего генератора музыки онлайн. Зимой я получил на этом форуме содержательный и ценный фидбек. Все комментарии, даже те, что остались без моего ответа, были рассмотрены. По основным замечаниям была проведена «работа над ошибками».
Главной проблемой стала задача «несколько корявых мелодий», как метко выразились здесь. Мной неоднократно пересматривались алгоритмы связей при формировании мелодии. Были найдены и устранены гармонические ошибки в сборках. Сознательно оставил некоторые мягкие диссонансы, чтобы не потерять сформировавшуюся стилистику.
Супруга (профессиональный музыкант), с которой я вел дебаты по поводу классификации моего творчества, наконец, согласилась, что ЭТО можно считать музыкой с некоторой степенью приближения. Но только фоновой, не больше. Ладно, хоть так, особенно с учетом ее ортодоксальной установки «музыку могут творить только живые люди, причем далеко не все». Дескать, музыка не создается перебором аккордовых ступеней. Но, если послушать современную музыку, то зачастую это больше работа дизайнера по звуку, чем композитора. А создатели большинства знакомых мне онлайновых генераторов музыки вообще не «парились» с какой-то музыкальной мыслью, просто собирают вместе пару-тройку красивых сэмплов,я бы даже сказал шумов. Кстати, чем не тема для холивара?

Но «ближе к делу»...
Я начал выводить этот пэт-проект «в свет». Набрался наглости и разослал персонализированные письма мэтрам звукового дизайна, композиторам. Отправил порядка сотни обращений. Как ни странно, больше половины из них посетили сайт, даже послушали в среднем по паре минут «нагенеренное творчество». Но на фидбек от них я не наработал ))).
Собственно, to the point: в рамках установленных учебных ограничений (только ля минор, схема фрагмента из двух квадратов, смены функции в одном такте не происходит, слишком мелких по длительности нот нет, фиксированный размер) думаю, что на данный момент достиг своего максимума. Варианты развития проекта в зависимости от вашей оценки:

1. «Все круто».
Переделываю все «по-взрослому» с учетом масштабирования задачи при снятии ограничений. Музыкальный фрагмент развивается до полноценной простой композиции с вступлением, отступлениями, модуляциями в другие тональности, вводятся «бриджи», создаются логические завершения. Модуляции должны «выстрелить». Они красивы сами по себе, хорошо формализуются, просчитываются. Общая длительность — около 2 минут.

2. «Хорошо, но фрагменты маловаты, не вполне понятен потенциал».
Программная часть остается «на костылях». Текущие учебные ограничения сохраняются. Расширяемся до простой композиции с вариантами вступления, нехитрым бриджем-«передышкой» между базовыми кусками, формируется финал. Та же пара минут, не больше.

3. «Нормально, но над мелодией нужно продолжать работать, слишком просто даже для фоновой музыки. Потенциал под вопросом.».
Ничего не расширяю, продолжаю мучить формирование «мелодии».

4. «Все сделал хорошо, но это не взлетит, потому что ...».
5. «Это не взлетит, потому что сделано плохо».

Отдельно прошу откомментировать: насколько улучшит продукт возможность выбора инструментов в выпадающих списках с предварительным прослушиванием сэмплов. Можно придумать что-то креативное — пользователь рисует какую-то условную кривую, по ней (не строго, конечно) формируется композиция (сама мелодия или подключение дорожек).
Мне писали и про использование фрагментов из готовых произведений сторонних авторов. Тема интересная, соблазнительная. Более того, я это пробовал. Эффективно, бесспорно. Но, во-первых, это плагиат, а во-вторых, ухо все равно выделяет эти вкрапления, даже хорошо вмонтированные, цепляется за них.
Возможно, теперь основная проблема на ваш взгляд в некачественных сэмплах, неаккуратной подгонке дорожек (иногда бывает рассинхрон басовой линии с ритмом)?
Если посоветуете стратегию продвижения этого чуда, буду только рад.

Если нет времени писать, поставьте просто цифру из пунктов выше. Только перед этим желательно послушать (лучше в наушниках) 3-5 фрагментов (каждый 48 секунд).
ai.od.ua
Заранее спасибо.

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Попробовал развить тему в несколько ином направлении. Брал нагенеренный исходник и допиливал его в FL Studio. Подправлял немного, что-то добавлял. Сам бы такое с нуля я бы не смог написать. На одну композицию тратил часа два, в основном на подбор инструментов.. Но слушается намного лучше. Ссылки на треки:
ai.od.ua/cello.mp3
ai.od.ua/christmas_is_coming.mp3
ai.od.ua/in_the_right_mood.mp3
ai.od.ua/be_positive.mp3
Насколько перспективный такой подход? Ваше мнение?

Можно кнопку для скачки трека? 1. Это просто офигенно

Обновил до версии 2.0 ). Что изменилось:
1. Отказался от фреймворка — никак не получилось подружить его с айфоновскими капризами. Все переписано на чистом Web Audio API. Даже 4-ый айфон что-то пытается играть, поновее у меня эппловских телефонов нет. Кто может попробовать свежие модели — отпишитесь, плиз, о результате.
2. Теперь генерация во всех тональностях, есть смещения в мажор.
3. Усложнена смена музыкальных функций.
4. Треки стали вдвое длиннее, производительность стала позволять, как и появление новых музыкальных ходов.
5. Улучшена навигация — кнопки play, pause, next.
6. Мелодии теперь поинтереснее, но остаются слабым местом. Планируется буст в версии 3.0, пока усилия были сконцентрированы на предыдущих пунктах.

Как подложка для видеороликов с некоторой доработкой пойдет. Не больше. Тоже запусил четыре раза, все одинаково: конструкция, тональность, эффекты... (один раз конечно голос попался). Охарактеризовать могу так: похоже на диджейскую музыку — когда от слабого взгляда/опыта/познания человек не может выбраться из 4 акордов.
Посоветовать ничего не могу, так как, все же мне еще не ясно что должно быть на выходе?! Поетому голосую за пункт 3.

Попробовал 4 раза подряд в одной и той же минорной тональности. Это все время так будет?

Ставлю 3, мелодия всё еще нуждается в доработке.

Зашел на сайт посмотреть уровень, если считать это начальным этапом то моя оценка 10 из 10. Если заходите детальной обратной связи, можете написать личным сообщением.

В Safari заработает, вот тогда и поговорим

Я вообще не нашел как звук включать.. Надо было лучше спрятать.

Идея. А как насчёт озвучки хоррора? Задача юзера — грузануть картинку. Твоя — скормить её нейросети (не обязательно своей) и определить что на ней. А уже по ней скормить ассоциативные аудио эффекты и подобрать мелодию. Особый акцент — определение степени угрозы обстановки и соответственно выбирать эмоцию и её тайминг.

Почему так: к плагиату не прикопаешься.

Как по мне — неплохо. Но я не любитель эмбиента, я больше по року :)
В каких-нить инди-игрушках типа хидден обджекта вполне применимо, ИМХО.
Я бы сказал, 1.

Странно ставить 1, при том что генератор как раз таки эмбиент, и это его целевая аудитория.
Для рока использовать нейросеть — кощунство!

Я имею в виду, что как по мне — для эмитента неплохо, но я не спец в этом жанре :)

Супруга

познакомьте супругу с творчеством Aphex Twin, Autechre

Можно придумать что-то креативное — пользователь рисует какую-то условную кривую, по ней (не строго, конечно) формируется композиция (сама мелодия или подключение дорожек).

такое уже есть
www.youtube.com/watch?v=pjftusfeIHc
www.youtube.com/watch?v=JYMAcJn-aM4

по-моему годно, во всяком случае на фоне играет и нет желания немедленно закрыть вкладку. Для какой-нибудь аркадной игры вполне подошло бы

Спасибо первым прокомментировавшим. Пожалуйста, ставьте цифры 1-5 по поводу перспективы.

Как ни странно, больше половины из них посетили сайт, даже послушали в среднем по паре минут «нагенеренное творчество».

Если смотрите аналитику от гугла, то имейте в виду, что многие блокируют подобные скрипты слежения всякими дисконнектами и носкриптами. Так что учитывайте в вашей статистике это.

Из пожеланий:
1) Кнопочки пауза не хватает.
2) Сделать композиции завершенными, с финалом. Хотя бы, при помощи затухания.
3) Иногда слышно журчание, похожее на быструю перемотку.

(Update) оказывается такие продукты для контентщиков уже есть, я слоупок. )))

Ты нарыл крутую тему. Не знаю понимают ли это разработчики, но это золотая жила если уйти от релакса и создать генератор музыки по настроению (веселая, эпик, рекламная, минимал и тд) — ты решил бы проблему создателей видео-контента для ютуба избавил бы человечество от одинаковых/стандартных мелодий из медиатеки ютуба и медиасетей в половине роликов. Хочу с тобой работать и помочь завернуть это в сервис для контентщиков.

Вы предлагаете не заниматься поисками органичных мелодий, а сконцентрироваться на комбинировании красивых «шумовых» сэмплов? Я не против, но ценно ли и насколько востребовано такое решение?

Как и в прошлый раз — впечатлило.
Однако лично мне подумалось, что было бы более правильно сразу начинать проигрывание музыки, не дожидаясь пока нажмут статрт. Так нас приучили последние разработки UI/UX, что всё должно происходить на автомате, насколько это возможно и требовать вмешательства юзера, только когда без этого никак.
На истину не претендую, но я ожидал, что после загрузки страницы, сразу начнётся экшин. Ждал ждал, ничего, потом только увидел где-то вверху, мелким шрифтом кнопку «start»...
Далее, по клику на «playing...» происходит переход к следующему треку. ИМХО лучше бы какую-то кнопку прикрутить типа «next», что бы человек не бегал глазами по экрану в поиске кнопок управления. А сделать полноценный [next],[play/pause], [stop], [previous]. Тогда интуитивно становится всё понятно и можно как на предыдущую композиции откатиться, так и следующую послушать...

Политика Гугла не разрешает воспроизводить мелодии без «разрешающего» действия пользователя. Так появилась кнопка start. По поводу разнообразия кнопок — вероятно, нужно будет это сделать. Все больше людей делают акцент на этом. Персонально мне казалось, что «однокнопочный» дизайн вполне годится.

Как по мне, то ты практически ничего не поменял. Те же косяки, та же попытка навалить всего до кучи, тот же же «скрытый потанцевал»

Ваше мнение ценно особенно как человека, уделившего максимум внимания моей затее. Вы считаете, что улучшения «мелодий» не произошло? И, если позволите, по поводу кучи немного подробнее... Плюс желательно ваше голосование )

0) Избавься от лишнего дизайна на сайте. Я ж говорю, тупит на слабых устройствах. Ты просто отсеешь мобильных пользователей ещё до того как первую ноту услышат. Либо просто выброси проект и забудь, считая себя непризнанным гением UI.

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

Что нужно: на ввод нейросети подай шум или сигнал, который будет ИСКЛЮЧАТЬСЯ из музыки, то есть который как бы будет полезным сигналом, который нельзя засорять. А уже в результате этого шума НЕ будет, но именно в этой полосе пропускания (не обязательно стабильной) для мозга будет построена зона комфорта.

Для демонстрации эффекта: запиши собственный голос человека, но из результирующего продукта не исключай, а просто пригаси по амплитуде до ≈20% или даже меньше. Фокус в том, что это можно продемонстрировать неявно, просто стыбрив звук окружения: сначала ты попросишь (если надо) разрешение на использование микрофона — а потом «забудешь» его выключить и будешь онлайново адаптировать музыку под фон банальным анализатором спектра. Свой сигнал разумеется вычтешь тупо на спектрально гистограмме, а определишь амплитуду захвата по какой-то конкретной ноте — в идеале ещё до начала работы программы: как только дали разрешение на микрофон, проиграл гамму, захватил АЧХ захвата звука динамика микрофоном.

Да, это мелочь. Но это разница между гением и сумасшедшим, сам решай кем быть твоей нейросетке.

Может, я и правда не разбираюсь в простых вещах, но в стилях я прописал @media screen and (max-width: 1140px) {
.cb-slideshow li{display:none}
}
, т.е. исключил отображение всей стилевой анимации на «слабых» устройствах, оставив одну статичную картинку-фон.
По поводу анализа спектра- это перебор для меня )))
Но какую-то нормализацию дорожек нужно придумать. Некоторые генерации перегружены — это факт.

По поводу анализа спектра- это перебор для меня

Рынок звука крайне высококонкурентный. Без перебора сюда ни ногой

Один такое я вряд ли вытащу.
Как по вашему мнению — прописанный дисплей нон нормально отсекает слабые устройства? Насколько я знаю, на сегодня только screen актуален.

Проще всего дать какую-нить задачу на JavaScript по рендеру DOM-модели — например, передвинуть прозрачный квадрат 30×30 пикселей, и засечь время её исполнения. Если оно превышает заданный порог — сделать деструкцию конкретного правила, проще всего — забрать класс у элемента. И так ступеньками. Результат (целое число или строковую константу степени деградации) положить в куки.

Обязательно используй куки. Это поможет тебе знать кто пришёл второй раз, а на сервере — засекать, кто уже что слушал из нагенеренного в ближайшие 2 дня. (это реализуешь попозжее). Сейчас тебе нужна кука чтобы определить уровень деградации и не пересчитывать её каждый раз.

А, да, подскажи ЗАЧЕМ ты обновляешь всю страницу чтобы запустить следующую мелодию? Я вижу ровно ноль причин это делать.

PS. Можешь тупо взять трансляцию веб-камеры для фона. Дёшево, сердито, и главное браузер применит нативные кодеки безо всякого жабаскрипта.

Совет по оценке производительности дельный. Пригодится мне 100% если не здесь, то в другом проекте точно. Для себя вижу такую проблему — как соотносить число-степень деградации с конкретными устройствами. Решаемо, конечно. Оправдано ли в моем случае? Все устройства из списка раритетов на моей полке вполне тянут сайт с отрубленной графикой, старый слабый нетбук вполне бодро тащит его со всем обвесом.
Обновление страницы — так сложилось, не обязательно, конечно.
Трансляции: хотел посмотреть NASA, была вне доступа как раз ))) Лучше уж использовать какое-то очень оптимизированное видео, но, опять же, увеличение трафика. А я сэмплы сжимаю нещадно, чтобы не заставлять пользователя долго ждать.

Как раз сэмплы жать не надо — это твой продукт! Сделай наоборот предзагрузку сэмплов до всего остального. Не бойся сделать предвыборку малого фрагмента. В общем, здесь как раз есть способы и протоколы дать потоковое аудио. Пока не заморачивайся, но знай что это возможно.

Соотносить с конкретными устройствами забодаешься. Лень — двигатель прогресса. Если для достижения одинакового результата программе надо 200 операций, а тебе 1 — дай работать программе. Я ж говорю, пусть в куках браузера хранится индекс производительности, скажем 7 дней. Заметь, НЕ степень деградации, а именно индекс производительности графики и возможно аудио. Это на случай если ты что-то меняешь, мог опираться на старые цифры. И сравнивать конкретно число.

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

NASA не стоит. Лучше природу или людное место с блек-джеком и азиатками. Просто потому что они доступны чаще, жмут сильнее, можно рэндом поставить. На данном этапе сгодится ЧТО УГОДНО, хоть и NASA.

Твоя задача — дать хороший продукт по аудио, а уже веб-морда пусть будет MVP. То есть то что я и рекомендовал — автоматический алгоритм деградации, чтобы каждый получил свой минимум. И не пытаться здесь добиваться совершенства или экстаза, достаточно просто расслабляющей атмосферы (или другой которую хочешь создать).

Если хочешь впечатлить богатеньких — добудь 4К видео, и давай если скорость канала позволяет. Лучше такое, которое можно зациклить и не сразу понятно что оно зациклено.

Что значит твоё «please wait»? Повесь гифку колёсико, пользователи привыкли видеть гифку.
Почему так долго грузится звук? Если сервак не справляется, нагенерь н-ное количество семплов и в зависимости от длины очереди на генерацию либо ставь в очередь на свежак, или «просрочку» :)

Генерацию лучше вынести в отдельное постоянно живущее приложение, а веб-морда с ним пусть общается по какому-то протоколу на внутреннем порту. Так сможешь контролировать нагрузку и поддерживать в актуальном состоянии буфер нагенеренного. Равно как и рестартить генератор в процессе его написания. Вплоть до того, что вообще отдать генерацию на твою домашнюю или рабочую машину (как делают владельцы малых игровых серверов). Это позволит в дальнейшем сервер продукта выкладывать на производительный но с малым объёмом VPS (или несколько), а саму веб-мордочку держать на каком-то бесплатном хосте.

По анимации — в первую очередь бойся анимировать свойства полупрозрачности и z-index. Уже объяснял почему: из-за косяков стандарта изменение вызывает переиндексирование слоёв и обновление всей модели. Полупрозрачность можно менять только маленьким элементам, в отдельном слое, типа выпадающего меню.

По анимации шрифтов — снова не стоит пользовать полупрозрачность элемента, лучше анимируй альфа-канал цвета (или весь цвет).

Анализ спектра шума — это задача на будущее. Разумеется анализировать будешь на сервере, а на клиенте максимум сжимать и отсекать неиспользуемые диапазоны.

Да, работать на стороне клиента тоже можно. Но это уже когда надумаешь делать матёрое приложение на кшталт Шазама. Пока это всё рановато, пока нужно добиться самой генерации — если раньше браться за другие задачи, их придётся переделывать.

Підписатись на коментарі