Веб сервис для диджея

Что значит «звук в браузере» на самом деле

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

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

Тембр — не картинка ручек, а настоящие фильтры: низ и верх сделаны полочными, середина точечной с заданной шириной. Кроссфейдер — не переключатель, а два встречных регулятора усиления. Наушники — отдельная ветвь схемы, которая ответвляется до общей громкости зала, поэтому вы слышите трек в наушниках, когда в зале его ещё нет.

Разница с тяжёлой программой здесь не такая большая, как кажется. И там, и там считает ваш процессор, и там, и там звук уходит в вашу звуковую карту. Отличается способ доставки кода на компьютер, а не арифметика внутри.

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

Из чего собран звуковой тракт пульта

• Два источника — деки A и B, играющие из разобранного в память файла.
• На каждой деке: входное усиление, три полосы тембра, фильтр, фейдер.
• Ответвление на наушники до общей громкости зала.
• Общая шина с эффектами такта и цветовыми эффектами.
• Ограничитель уровня перед выходом с индикацией запаса.
• Отдельные ветви на устройство зала, наушники, свой монитор и запись.

Откуда берётся задержка и почему её не слышно

Задержка в цифровом звуке существует всегда: система собирает звук порциями и отдаёт их звуковой карте буфером. Чем меньше буфер, тем меньше задержка и тем выше риск, что процессор не успеет наполнить его вовремя — тогда в звуке появляется щелчок или заикание.

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

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

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

Отдельная деталь, о которую спотыкаются все новички. Браузер не даёт запустить звук без осознанного действия человека — это защита от сайтов, которые начинают орать при открытии. Поэтому в шапке пульта есть явная кнопка включения звука. Без неё человек, начавший работу с горячей клавиши, жмёт запуск и слышит тишину, не понимая почему.

Где лежат ваши треки и что уходит на сервер

Когда вы добавляете файл, происходят две независимые вещи. Первая: файл читается прямо у вас, разбирается в звуковые данные и попадает в оперативную память вкладки. Играет он оттуда — с сервера в момент воспроизведения ничего не подтягивается.

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

Что ещё уходит на сервер: сохранённые метки, точка старта и темп конкретного трека — то, что пульт называет своей памятью; ваши сетлисты, то есть порядок музыки под конкретный праздник; заявки на песни от гостей.

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

Заявки гостей устроены с двойным запасом. Живое обновление идёт через постоянное соединение, но в отелях и бизнес-центрах корпоративные прокси такие соединения режут, поэтому есть и обычный опрос сервера: раз в минуту при живом соединении и раз в пятнадцать секунд, когда его нет. Ваши действия по заявкам складываются в очередь на отправку, которая переживает перезагрузку вкладки: нажали «сыграно» ровно в момент обрыва связи — отметка не потеряется.

И про приватность прямо. Микрофон компьютера сервис не запрашивает и не слушает. Запись сета делается из звука самого пульта, готовый файл попадает в вашу медиатеку и оттуда скачивается. Доступ к разделу пульта закрыт на стороне сервера, а не спрятанной ссылкой: чужой человек с адресом страницы внутрь не попадёт.

Что кэшируется для офлайна, а что не кэшируется никогда

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

Дальше правила разные для разных типов файлов. Страница всегда запрашивается из сети заново и берётся из кэша только при неудаче — так вы не остаётесь на вчерашней версии, но и не упираетесь в пустой экран без интернета. Вспомогательные файлы, наоборот, сначала ищутся в кэше и только потом в сети, потому что они меняются вместе с номером версии.

Что не кэшируется никогда — первое: любые обращения к серверу с вашими данными. Это осознанное решение, приватное содержимое в кэше браузера лежать не должно.

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

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

Почему нельзя сворачивать вкладку во время эфира

Браузеры экономят батарею и режут фоновым вкладкам всё, что можно: замедляют таймеры, полностью останавливают отрисовку кадров, снижают приоритет вкладки в очереди задач. Для почты и новостей это правильно, для звука — нет.

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

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

Предупреждение появляется не в тот момент, когда вкладка свёрнута — там его некому читать, — а готовится заранее и встречает вас сразу при возвращении. Оно возникает только если в этот момент что-то играло или шла запись.

Что делать на практике: держите вкладку пульта поверх остальных окон, а лучше в полноэкранном режиме — для этого есть кнопка в шапке. Если нужны два окна одновременно, разведите их по двум мониторам или по двум половинам экрана, но не прячьте пульт за другим окном браузера.

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

Что будет, если закрыть вкладку или сломается связь

Закрытая вкладка — это остановка звука немедленно. Никакого фонового воспроизведения нет и быть не может: весь звуковой тракт живёт внутри страницы. Это самое жёсткое ограничение формата, и знать его нужно до площадки.

Что переживает закрытие. Медиатека, метки, темп и сетлисты лежат на сервере — они на месте. Состояние дек сохраняется в браузере, и при следующем открытии пульт предложит вернуть прошлую сессию: те же треки на деках, ту же точку старта, тот же темп. Восстановление занимает секунды.

Что не переживает: сама музыка в момент обрыва. Если вкладку закрыли посреди трека, зал услышит тишину до момента, пока вы не откроете пульт заново и не запустите трек снова. Отсюда простые правила гигиены на площадке: не закрывайте лишние вкладки не глядя, не обновляйте страницу из любопытства и не оставляйте ноутбук в доступе гостей.

Обрыв интернета устроен мягче. Звук идёт из оперативной памяти и не зависит от сети вообще, поэтому текущий трек играет как ни в чём не бывало. Пропадает только сопутствующее: новые заявки гостей не приходят, а свежие метки не сохраняются на сервер. Пульт сообщает об этом отдельным сообщением в углу, а не молча.

Когда связь возвращается, накопленные действия по заявкам уходят пачкой из очереди, а список заявок перечитывается с сервера целиком. Смена статуса устроена так, что повторная отправка ничего не ломает.

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