Так уж получилось, что я люблю музыку и у меня на кухне всегда установлены какие-нибудь колонки.
Теперь это стереопара с поддержкой Bluetooth. Но какой источник использовать? У меня есть телефон, у моей жены есть телефон, у моего ребенка есть телефон, и все телефоны хотят подключаться к этим колонкам, и это часто приводит к определенным неудобствам.
Колонки не знают, с какого устройства я хочу сейчас воспроизводить музыку, поэтому подключаются к первому попавшемуся устройству.
В итоге, чтобы просто включить какой-нибудь красивый фон, нужно выполнить ряд действий:
- убедитесь, что ваш телефон в данный момент сопряжен с колонками;
- если не ваш, то нужно разорвать связь между колонками и всеми остальными устройствами и подключиться;
- запустить какое-нибудь приложение;
- выберите музыку;
- а вдруг тебе позвонят с этого аппарата, а что если телефон твоей жены подключается быстрее, чем твой?!.
Нам нужен был простой, надежный и удобный способ включить музыку и продолжить заниматься своими делами.
Аппаратное обеспечение
Я взял старый планшет (на Android), написал небольшое веб-приложение, соединил планшет с колонками, разместил планшет в доступном месте и получил то, что мне нужно.Вот так это выглядит в жизни (на фото более фотогеничный планшет, настоящий аппарат крепится с помощью держателей для фотографий аля «липучки» на холодильнике).
Радио, погода, время всегда под рукой Сборка и установка железа заняла у меня около 20 минут и несколько часов я потратил на написание интерфейса сайта-веб-приложения, который впоследствии менялся, приобретал функционал и принимал более-менее окончательный вид. Я хочу рассказать вам об этом больше.
Веб-приложение, UI/UX
Требуемый функционал был мне хорошо понятен и, используя свои знания UI/UX, я реализовал интерфейс.В интерфейсе отображается необходимый минимум информации: время, погода и несколько радиоканалов.
Все лаконично, просто и надежно.
В любой момент можно подойти, ткнуть радиокнопку, и оно начнет играть.
Казалось бы, Цель достигнута, но хотелось большего, а именно:
- сайт должен запускаться не как окно браузера, а как обычное приложение с значка на рабочем столе;
- должно быть плавное переключение каналов (crossfade);
- автоматическое переподключение при потере аудиопотока;
- отображение радиоактивности во время реального воспроизведения звука (визуализация);
- и некоторые другие вкусности.
Цикл 1. Web App Manifest позволил реализовать сайт как веб-приложение с собственным значком на рабочем столе устройства.
Web Audio Api позволял визуализировать и анализировать аудио, микшировать несколько источников и многое другое.
С помощью этой технологии я решил основные проблемы, связанные со звуком.
Каналы переключались плавно (хотя для этого требовалось проигрывать сразу несколько потоков в фоновом режиме, чтобы иметь возможность в любой момент переключиться на любой источник, не дожидаясь предзагрузки).
Визуализация показала наличие реального воспроизведения и к этому я подключил дополнительный анализ «тишины» потока.
После тестирования выяснилось:
- планшет «засыпает» при отсутствии активности пользователя;
- после нескольких дней круглосуточной работы приложения появились проблемы с аудиопотоком;
- из-за одновременного воспроизведения нескольких источников в фоновом режиме необоснованно использовалось довольно много трафика;
- Оказалось, что Mobile Safari имеет очень серьёзные ограничения по работе с многопотоковым звуком и работе с громкостью.
В начале 21-го года эти ограничения звучат примерно так: одновременно можно воспроизводить только один поток, программная регулировка громкости отсутствует.
Пришлось потратить некоторое время на отладку, чтобы найти причины нестабильной работы после длительного периода времени, но все привело к тому, что проблема кроется не в клиентской программной части, а где-то на уровне браузер-системы.
Поскольку сайт заточен в собственной песочнице, я сделал определённые выводы и провёл определённые исследования в направлении настроек Web Audio Api, работы с каналами, битрейтом, буферами и т.д. Скорректировал настройки.
Введен механизм остановки неиспользуемых потоков через некоторое время и возобновления их при любой активности пользователя, это решило проблему с тратой трафика.
Поиск решения для mSafari привел к некоторым решениям, которые позволяли программно регулировать громкость и микшировать потоки, но только предварительно загружали данные.
Например, mp3 или подобные финальные файлы.
Операция происходила на уровне предварительно буферизованных данных.
К сожалению, мне не удалось поместить потоковые данные в эти буферы.
Добавлена адаптивная верстка под любое устройство.
После тестирования выяснилось:
- Проблемы с воспроизведением потоков через Web Audio Api не исчезли.
Они стали появляться гораздо реже.
Через несколько дней работы браузер мог начать существенно подвисать или отключаться.
В качестве диагностического инструмента я использовал Lighthouse (pagespeed от Google).
Если вы поставите цель набрать 100 баллов, с помощью этого инструмента вы сможете узнать много полезного.
В результате получилось рабочее веб-приложение, пошедшее в бой.
После тестирования выяснилось:
- В обычном режиме работы со звуком приложение работает стабильнее.
Решением пользуется вся семья (простота и надежность сделали свое дело).
?Эволюция интерфейса
?Эволюция интерфейса
выводы
- Идея и реализация были правильными, чему лично я очень рад. Принцип «чем проще, тем лучше» работает практически всегда!
- Web Audio Api — штука классная, но если использовать, то нужно проработать вопрос совместимости и определиться с режимом работы (короткая сессия, длинная сессия (несколько дней), бесконечная сессия).
По моим выводам, в начале 21 года я бы не стал делать на его основе веб-приложения для длительных или бесконечных сессий.
- Кроме того, для длительных и бесконечных сеансов комбинация Android-Chrome-веб-приложение должна быть протестирована на целевых устройствах с последними версиями программного обеспечения.
В работе я использовал устаревший Android 8, возможно мои проблемы со стабильностью уже давно решены, но я работал с тем, что было под рукой.
Что дальше
На данный момент я планирую сделать перерыв в разработке и просто использовать это решение.Со временем, если будет необходимость, возможно добавлю геолокацию и собственный список радиоканалов.
вишня
Многие веб-разработчики не знают, как выглядят 100 баллов в Lighthouse. Так.
:) 
Маяк.
Все 100. Сайт проекта Буду рад, если мой опыт окажется вам полезен.
Всем удачи! Теги: #Звук #дизайн #HTML #UX #Юзабилити #веб #ui #интернет-радио #веб-аудио api #веб-приложение
-
Наушники Градо Igi
19 Oct, 24 -
Беспилотный Боевой Робот
19 Oct, 24
