Принимайте участие в зарплатном опросе! Уже собрано почти 8 000 анкет.
×Закрыть

Занятный генератор музыки онлайн

Здравствуйте.
За время «зимних каникул» мною была сделана по-своему интересная вещица — браузерный генератор фоновой музыки с использованием Web Audio API, а точнее pizzicato.js. Начиналось все с «насвистывания» примитивнейших последовательностей, потом усложнилось до вполне пригодных для прослушивания мелодий с басовой линией, pad-ом, ударными. Сразу замечу — задача стояла не «программистская», а больше, все-таки, из области музыкального творчества. Пришлось даже обновить кое-какие знания по теории музыки. Словом, послушайте на ai.od.ua.
Есть соблазн продвинуть проект до уровня серьезного. Но нужен фидбек. Сильно не ругайте.

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

Можно сделать кнопку для скачивания? Мне просто это неимоверно нравится и хочется слушать без интернета.

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

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

Если вся мелодия это ритмичное повторение разных звуков можно ли выключать отдельные звуки и прослушивать мелодию так? Например:
12223322233122233222331
А без 1 будет
22233222332223322233
А то я не люблю слишком сложных мелодий а простые мне нравятся.
В вашем случае очень понравилось начало.
Английский вариант в «About» или украинского русского нет?

Улучшена навигация — кнопки play, pause, next.

Наконец-то! :)
Единственное пожелание — убрать их куда-нибудь ближе к краю экрана.

Мелодии стали лучше. Заходите послушать )))

Кнопочки пауза/стоп всё ещё не хватает. Приходится закрывать вкладку.

добавь сбивок, а то просто убирание одной дорожки и добавление другой, как раз и выдаёт АИшность ) например не просто добавить с нового квадрата новую дорожку. а ею же обыграть последний «подквадрат»

Доброе утро. Вчера Music Generator Online слушало вдвое больше людей, чем позавчера. Залил пэды женского и мужского хоров — вот такое настроение сегодня.

занятно, продолжай :)

интересно, спасибо )) Сафари молчал минут пять, Файрфокс заиграл сразу.

пишет — «music’s playing» — картинки меняются- музыки нет :( заиграла примерно через минуту- пару раз перезагрушись

По многочисленным просьбам релоад сделан автоматом. Надеюсь, это не убьет мой слабый хостинг.

Синтезатор слишком жесткий ))
Управление уровнем громкости не помешает, не у всех регулировочка громкости в наушниках есть (с неожиданности и «испугаться» можно)

я сиранул когда оно резко заиграло, плавности бы не помешало

слегка зафейдил стартовые звуки, чтобы не было дискомфорта

Кстати, а что мешает нагенерить сэмплов заранее, чтобы в момент загрузки выдать из кеша свежачок?

Подозреваю, что проблема не столько в самих сэмплах, сколько в их клонировании. Придется углубляться в специфику аудиобуфера на Web Audio API.

Что значит «подозреваю»? Ты там хоть строчку кода писал?

Прикольно. Сам колись хотів таким зайнятись, та руки не доходили

Подозреваю, что все мало-мальски умеющие программировать люди с какой-никакой музыкальной школой втайне занимались такими постыдными вещами. )))

В мене якраз не було, хочу встигнути в цьому житті помузичити.

зациклить надо. а то каждые 40 сек жмакать опять надоедает..

По правде говоря, не надеялся, что так хорошо зайдет. Думал, 40 сек человек осилит, а дальше не факт.

Кстати, вчера один раз была очень приятная мелодия, остальные не очень. Было бы неплохо выводить seed RNG, чтобы было можно запомнить.

Данный фидбек прошу рассматривать в свете того, что лично мне интересен 8-bit sound (ZX AY, Amiga, ...) а так же Synth Wave жанр. Итак.

  1. Всё загрузилось и начало играть с первого раза. Однако продолжительность мелодий 15 — 20 секунд, хотелось бы подольше
  2. Данная музыка, по моему мнению, на истину не претендую, вполне годна для заставок к играм ну или просто человек зашёл пару минут отвлечься от работы, послушать какой-то не заезженный трек, без особой смысловой нагрузки, просто отвлечься, переключить внимание на что-то не навязчивое
  3. ИМХО интересная идея, крутые картинки, лично мне понравилось и впечатлило. Хочется дальшнейшего развития данного проекта. Спасибо за творчество ! :)

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

Доброе утро. Я приуныл было, почитав ночные комментарии. Но посмотрел статистику — за вчерашний вечер 170 человек послушали музыкальные эксперименты моего генератора около 13500 раз. Спасибо тем мужественным людям, которые залипли на полчаса и более ))) По запросу «генератор музыки» эта страница в топ-10 гугла (по крайней мере, у меня). По существу — пет-проект буду двигать дальше. Первоочередные планы — оптимизация сэмплов, переход ко всем тональностям, просчет вариантов модуляций. Это должно в значительной мере усилить результат.

Я рекомендовал бы больше сосредоточиться на мелодии. Аккордовые последовательности сейчас генерируются нормально, а мелодия звучит коряво

Согласен, но ля-минорные аккорды уже поднадоели.

А уж как надоели шумовые/ударные, которые промахиваются по ритму...
Понимаешь, в реальной музыке они идут с упреждением, и как бы ЗАДАЮТ ритм. Хотя бы по той причине, что физически подвержены резонансу. Сдвинь основную мелодию чуточку вперёд, буквально на 50-100мс, почувствуй разницу. Разумеется это только эксперимент, в реальном применении задержка резонанса зависит от инструмента. В общем случае, чем ниже тон, тем больше его надо задержать.

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

там не только аккорды, там все вместе задает эмоцию — ритм, темп, длительности и интервалы, а также громкость, тон инструмента, и так далее.

В первую очередь зацикли саунд и замени анимацию. Даже при том что оно CSS, такие мелочи как битовая маска и равномерно меняющаяся прозрачность — жестоко тормозят браузер на медленных устройствах.

Я понимаю, что у тебя типа красиво. Но всё-таки попробуй отренедрить на своей стороне, или как минимум не играться с opacity — древние косяки стандартов DOM требуют перестроить всю модель при её изменении. Лучше с альфа-каналом цвета поработай на тексте. А то и вовсе сделай экспресс-тест производительности и деградацию на основе него (несколько разных CSS).

По самому саунду — не лезь в аранжировки пока не научился собирать простые мелодии. Иначе это как нассать мимо писуара: тебе пофиг, а народ не оценит.

Рекомендация: найти «атмосферные» фоны и дополнить ими основную мелодию. Это то, что забодаешься генерировать, ибо для этого нужно пространственное моделирование и свойства материалов по отражению звука. Грубо говоря, такое далеко не на JS синтезируется, и проще приготовить отдельно. Ты же не выращиваешь лавровый лист когда тебе он нужен для рецепта супа?

Спасибо за конструктив. Пока решил все-таки разобраться с самой музыкой. Будет музыка поприличнее, так и проблемы с тормозами браузеров как-то обойду.

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

Проблема не в браузерах. Проблема в том, что на мобильных устройствах и медленных планшетах сайт просто закроют и уйдут.

PS. Сдаётся мне, что статистика брешет. Ну вряд ли каждый слушал сотни композиций. Убери СВОИ входы из статистики, там где ты сам тестил. Цель — определить нет ли там ложной нагрузки, и не DDOSят ли тебя собственные кривые скрипты. В идеале конечно это самому потестить у себя на локальном полигоне, отследив каждый запрос.

А насчёт секунд — просто зацикли аудио и всё. Не надо большего на данном этапе.

PPS. Вместо перезагрузки страницы измени поведение кнопки на запрос следующего саундтрека. Может слушателю просто не зашёл конкретный трек. А для этого опять-таки нужно иметь уже сгенеренных хотя бы пяток. И не стесняйся отдавать ОДНО И ТО ЖЕ разным слушателям.

Мне придется про деградацию еще почитать )))

Убрал все красивости с устройств с маленьким экраном. Такая вот радикальная деградация. Потестил — мой очень старый телефон теперь справляется с музыкой.

170 человек послушали музыкальные эксперименты моего генератора около 13500 раз.

И это видимо только те, у кого не стоят блокираторы статистики типа дисконнект, носкрипт и т.п.

epoch 500 — настолько печальные результаты (((

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

Это у тебя анимация так тормозит сильно? Зачем? Отдай рендер на CSS движок, пущай браузер сам анимирует как умеет.

По поводу творчества... а попробуй сменить инструмент на волынку. На ней куда атмосфернее сэмплить, чем на синтезаторных эффектах.

Нужно ли это делать на js — ой, сомневаюсь. Уж очень прожорлив ИИ, ему бы C++ да памяти побольше, да SIMD-процессор повеселее.

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

Анимация на простых стилях, не может сильно грузить.

Проблема в том, что ты эту простоту перемножил одно на другое. Opacity — это катастрофа для DOM-модели, ибо при этом рендерится всё. Opacity + z-index = пистец. Дело в том, что при каждом изменении opacity он будет перестроен, там есть свои «соглашения» в войне браузеров, при которых будет неочевидная перестройка слоёв. Здесь твоей вины нет, это скорее к мелкомягким и Гуглу вопросы из раздел психиатрии.

Кроме того, масштабирование растровых образов: нужно сжимать, а не растягивать, это работает быстрее.

По поводу маски — там вообще всё плохо. Сделай ту же маску что сейчас, но не 2×2 пикселя, а 200×200. Почему? Да из-за особенностей языка, чтобы не плодить объектные сущности.

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

Но нужно отловить момент поворота экрана. Грубо говоря, поставить слушатель, который будет определять что геометрия самого экрана поменялась, и запускать повторное перестроение модели (без остановки музыки).

Если хочешь быстрого решения — просто поставь фоновое видео кадров 15 в секунду. То как минимум рендерится движками самого браузера, написанными на C++, и не затрагивающими JS вообще. Это стандарт де-факто для быстросляпанных сайтов.

А это точно генератор, а не тупо поисковик? Как бы подобного счастья уже нагенерено столько, что на каждый твой трек найдётся по десятку патентных тролей.

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

Нужно развивать в себе терпение %) и ждать.

То просто UX такой

Начиналось все с «насвистывания» примитивнейших последовательностей

Нужно примитивно насвистывать пока ждешь))

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

Да как ты ее оценишь если оно не играет ничего...

Можно попробовать духовые +клавишные+ударные посовмещать. Или попробовать гитара/бас/+саксафон+ударные.Короче говоря,нужно пробовать варианты разные)

у меня мелодия стартует с 06 .35 секунды

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

Рекомендуется использовать Chrome. Кнопочку Start нажимали? )))

Version 71.0.3578.98 (Official Build) (64-bit). Кнопку Start нажимал.

Вы забыли посоветовать ему перезагрузить компьютер, сбросить кеш и все-все куки.

Возможно, нужно подольше подождать, пока закэшируются сэмплы. Попробуйте, пожалуста, еще раз.

Попробовал ещё раз 4 раза, заиграло один раз спустя 20 секунд где-то, в остальных случаях так и не заиграло. В том случае, что заиграло, играло секунд 5, потом надпись press for reload.

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