Онлайн редактор музыки

в 8:50, , рубрики: mysql, node.js, php, Веб-разработка, музыка, Работа со звуком, метки: , , , ,

Онлайн редактор музыки

Повествование пойдёт про ненастоящий стартап. Ненастоящий — в основном из-за того, что на создание ушло 7 лет (с перерывами и творческими кризисами). И, прежде чем уйти в ностальгию, сразу ссылка на демо песню.

Ещё каких-то n-лет назад это можно было бы назвать midi редактором, но кто уже вспомнит, что когда-то все сидели на диал-апе? Поддержка midi в браузерах была всегда, но, для того, чтобы определить текущее время проигрывания нужно было продать душу дьяволу, да и если у вас линукс — признайтесь, у скольких настроено воспроизведение midi?

Что же теперь происходит каждый раз при нажатии кнопки плэй:

  • Браузеру подсовывается приблизительно такой адрес mp3шки для воспоизведения: rockby.net/online_group/play_org/258517_0_0_1_25_119_63_0/258518_0_0_3_33_127_63_0/258519_0_0_5_25_111_63_0/258520_0_0_10_0_95_63_0/258521_0_0_7_66_103_63_0/258522_0_0_9_30_103_63_0/258523_0_0_12_40_127_63_0/258524_0_0_14_73_71_63_0/200621_0_0__---_0.21032168420673802.mp3
  • Браузер, конечно, думает, что это всего лишь mp3, а вот сервер считает иначе.
    что же делает сервер

    Он запускает PHP, который парсит URL, берёт необходимые параметры треков (громкости и т.п.), айдишник песни, подключается к MySQL, выбирает оттуда все ноты для этой песни со всеми параметрами, формирует midi файл, который с использованием звуковых банков и небольшого количества магии преобразовывается в mp3 файл.

    Причём, формируется и отдаётся мп3шка по мере проигрывания песни. Если формировать всю песню сразу — ждать первого звука придётся непростительно долго. Да и сервер не выдержет такого издевательства. Неизвестно почему, вся эта цепочка, включая этап PHP/MySQL проходит мгновенно, даже несмотря на таблицы нот, в которых накопилось уже более 200 млн записей.

  • flash или html5 плэер следит за текущей позицией проигрывания mp3 и исходя из этого отрисовывается курсор, параллельно пересчитывая абсолютные величины секунд в относительные величины midi позиций

Вот такие схватки технологий происходили на проекте:

  • Midi vs MP3 — побеждает MP3 (за красивый и, главное, одинаковый для всех платформ звук, лучшую поддержку в браузерах)
  • HTML+CSS vs Canvas — побеждает HTML+CSS (за качество картинки, масштабирование и простоту)
  • gif/jpeg vs CSS3, Canvas, SVG — побеждает CSS3, Canvas,SVG (за гибкость)
  • Canvas vs SVG — побеждает Canvas (за лучшую поддержку в браузерах)
  • Pushlet vs Websocket — побеждает socket.io :)
  • TCL vs Node.js — побеждает node.js (за знакомый с детства синтаксис, а также поддержку сообщества и количество модулей)
  • Преждевременная оптимизация vs ООП — побеждает ООП (каждая нотка — объект)
  • IE6 vs все — побеждают все :)

7 лет назад господствовал flash, а Javascript был совершенно нестандартным выбором для такого функционала. Решено же было делать на том, в чём больше разбираюсь. Годы прошли, и вот уже Javascript набирает невероятную популярность, что помогает пользоваться различными приятными нововведениями.

При воспроизведении же звука, Flash накаутирует html5, который сработает лишь при отключенном флэше. Почему? Flash быстрее реагирует, обходится без гаданий на Content-Length (мы то его точно не знаем) и почти не глючит.

html5 — значит работает везде, даже в мобильниках?
Это не верно. Оказалось, лишь Firefox на Android ведёт себя похоже на свою десктопную версию. Для других браузеров нужен хороший напильник. Вполне возможно, ситуация улучшается, но огромная армия девайсов с версией 2.3.6 всё портит.

Что же всё-таки умеет делать редактор:

  • воспроизводить ноты 128 инструментов
  • понимать правила нотной записи, включая дополнительные линии, диезы/бемоли/бекары, ключи альтерации, длительности (стандартные и произвольные), бенды
  • правильно отрисовывать ноты в такте, учитывать тональности, менять размерности
  • совместно сочинять
  • ревизии создавать, проигрывать предыдущие версии песен
  • замедлять, зацикливать, масштабировать
  • работать в режиме табулатур
  • импортировать Guitar Pro файлы gtp, gp3, gp4, gp5
  • переносить, копировать, удалять группы нот
  • чатить, банить и прочее

Что дальше?
Пока буду воспитывать дочь и сочинять детские песенки :)

RockBy.Net создавался в свободное от основной работы время, где успел дослужиться до координатора подразделения, и даже стал почти настоящим СТО английской компании, но…. как говорится, душа-то хочет петь.

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

Так что если есть идеи — пишите!

P.S. Вот тут — можно посмотреть/послушать результаты народного творчества

Автор: Aleks_ja

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js