Пример использования: создание Technitone.com

HTML5 Rocks
Technitone: возможности веб-аудио.
Technitone.com

Technitone.com – это сочетание WebGL, элемента canvas, веб-сокетов, CSS3, JavaScript, Flash и нового API веб-аудио в Chrome.

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

Техническая группа gskinner.com

Задача.

В gskinner.com нет звукоинженеров, но если поставить перед этой группой интересную задачу, то она придумает план.

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

Мы предлагаем пользователям возможность работать с API веб-аудио с помощью панели инструментов, которая применяет к выбранным тонам аудиофильтры и эффекты.

Technitone от gskinner.com

Мы также:

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

Мы сохранили знакомую сетку, поместили ее в трехмерное пространство, добавили освещение, текстуру и эффекты частиц и снабдили все это гибким (или полноэкранным) интерфейсом CSS на базе JS.

Маршрут.

Данные инструмента, эффекта и сетки консолидируются и сериализуются на клиенте, а затем отправляются серверному скрипту Node.js, что обеспечивает совместную работу пользователей по схеме Socket.io. Затем данные возвращаются клиенту с изменениями, внесенными каждым из участников, и распределяются по слоям CSS, WebGL и WebAudio, отвечающим за рендеринг пользовательского интерфейса, сэмплов и эффектов во время воспроизведения с участием нескольких пользователей.

JavaScript-скрипты на клиенте и сервере обмениваются данными через сокеты в режиме реального времени.

Схема сервера Technitone

Вся работа сервера реализуется в скрипте Node. Это одновременно статический веб-сервер и сервер сокетов. В конечном итоге мы перешли на полнофункциональный веб-сервер Express, созданный на базе Node. Он прекрасно масштабируется, хорошо настраивается и выполняет низкоуровневые серверные операции (как, например, Apache и Windows Server). В задачи разработчика входит только создание приложения. Загрузите более подробную схему взаимодействия между клиентом и сервером.

Демонстрационный пример многопользовательского приложения (скриншот)

Этот демонстрационный пример выполняется на сервере Node, и в эту статью мы включили скриншот, показывающий, как выглядит приложение после установки скрипта Node.js, настройки веб-сервера и его локального запуска. Каждый раз, когда демонстрационное приложение запускает новый пользователь, добавляется новая сетка, и все видят действия друг друга.

Скриншот демонстрационного примера Node.js

Загрузите многопользовательский демонстрационный пример. Для него необходим сервер Node.js Обязательно изучите файл README, который содержит информацию об установке Node.js, настройке сервера и локальном запуске примера.

Работать с Node очень просто. Сочетание Socket.io и персонализированных POST-запросов избавляет нас от необходимости создавать сложные подпрограммы для синхронизации. Socket.io прозрачно выполняет эту задачу и передает объекты JSON.

Насколько это просто? Смотрите сами.

Всего три строки JavaScript-кода позволяют активировать веб-сервер и запустить Express.



    

Еще несколько строк устанавливают соединение с модулем socket.io для обмена данными в режиме реального времени.



    

Дальше мы только прослушиваем входящие соединения со страницы HTML.



      

Проверка звука.

Было совершенно неизвестно, насколько сложно будет использовать API веб-аудио. Первые результаты нашей работы показали, что цифровая обработка сигналов (DSP) – это очень сложно и не совсем нам по силам. Второй вывод: Крис Роджерс (Chris Rogers) уже проделал всю самую тяжелую работу с API.

В Technitone не используются сложные математические алгоритмы и обработка звука: эти функции открыты для всех заинтересованных разработчиков. Нам нужно было только привести в порядок терминологию и прочитать документы. Хотите совет? Не пренебрегайте ими. Прочитайте их внимательно от начала и до конца. Документация снабжена графиками и фотографиями и очень интересна.

Если вы впервые слышите об API веб-аудио или не знаете, что с ним делать, обратитесь к демонстрационным примерам Криса Роджерса. Ищете вдохновения? Считайте, что вы его нашли.

Демонстрационный пример API веб-аудио

Ваш браузер не поддерживает API веб-аудио. Попробуйте запустить демонстрационный пример в Chrome.

Загрузить демонстрационный пример API веб-аудио.Работает только с сервера


Рассмотрим исходный код.

Загрузка в сэмпл (звуковой файл)



  

Настройка модульной маршрутизации



  

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



  

Применение другого динамического эффекта (задержки)



  

Добавление возможности прослушивания.



  

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

В целом оптимизировать приходится все. Если нагрузка на процессор слишком велика, то отдельные операции пропускаются. Нам приходится прилагать огромные усилия, чтобы оптимизировать обработку при переходе на другую вкладку в Chrome.

Световые эффекты.

Переднюю и центральную часть занимают сетка и туннель частиц. Это уровень WebGL, используемый в Technitone.

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

Демонстрационный пример WebGL

К сожалению, ваш браузер не поддерживает элемент canvas в HTML5. Обновите его или установите браузер, совместимый с этой технологией. Мы рекомендуем Google Chrome.


В этом примере демонстрируются построение теней, текстуры, анимация, эффекты частиц и интерактивность. Каждый пример линейно связан с предыдущей концепцией.

Загрузить демонстрационный пример WebGLДемонстрационный пример на основе текстур работает только на сервере

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

Содержание WebGL выводится на элемент canvas HTML5 и состоит из следующих основных блоков:

  • вершины объекта (его геометрия);
  • матрицы положения (трехмерные координаты);
  • шейдеры (описание внешнего вида геометрии, привязанное непосредственно к графическому процессору);
  • контекст ("ярлыки" для элементов, на которые ссылается графический процессор);
  • буферы (каналы для передачи контекстных данных графическому процессору);
  • основной код (бизнес-логика интерактивного взаимодействия);
  • метод рисования (активирует шейдеры и рисует пиксели на элементе canvas).

Ниже приведена простейшая процедура вывода содержания WebGL на экран.

  1. Выбор матрицы перспектив (корректировка настроек камеры, направленной в трехмерное пространство, и определение плоскости изображения).
  2. Выбор матрицы положения (объявление точки отсчета в трехмерных координатах, относительно которой определяются положения).
  3. Заполнение буферов данными (положение вершины, цвет, текстура и т. д.) для передачи контекста через шейдеры.
  4. Извлечение и систематизация данных из буферов в шейдерах и их передача графическому процессору.
  5. Вызов метода рисования, который дает контексту команду активировать шейдеры, выполнить запуск с данными и обновить элемент canvas.

Ниже описано, как эта процедура выглядит в действии.

Выбор матрицы перспектив:



  

Выбор матрицы положения:



  

Определение геометрии и внешнего вида:



  

Заполнение буферов данными и их передача в контекст:



  

Вызов метода рисования:



  

Чтобы визуальные эффекты не накладывались друг на друга, необходимо очищать canvas после каждого фрейма.

Место.

Все элементы интерфейса, кроме сетки и туннеля частиц, созданы с помощью HTML или CSS, а также интерактивных алгоритмов JavaScript.

С самого начала мы решили, что взаимодействие пользователей с сеткой должно быть максимально быстрым. Никаких заставок, инструкций или руководств: только команда Go. Если интерфейс загружается, ничто не должно замедлять загрузку.

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

Подготовка к шоу

Пакеты LESS (средство предварительной обработки CSS) и CodeKit (полезные инструменты для веб-программирования) намного сократили время, необходимое для преобразования файлов проекта в чистый HTML- и CSS-код. Они помогли нам систематизировать, записать и оптимизировать CSS-код, используя переменные, функции и даже математические алгоритмы.

Сценические эффекты

С помощью переходов CSS3 и библиотеки backbone.js мы создали несколько очень простых эффектов, которые вдохнули жизнь в приложение, и реализовали визуальные очереди, показывающие, какой инструмент используется.

Цвета Technitone

Скрипт Backbone.js позволяет перехватывать события смены цветов и применять новый цвет к соответствующим элементам модели DOM. Ускоренные графическим процессором переходы CSS3 обрабатывают изменения в стиле цвета, практически не влияя на производительность.

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

Демонстрационный пример перехода цветов: сколько цветов вы способны создать?

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

Демонстрационный пример изменения цветов

Загрузить демонстрационный пример изменения цветов

Давайте посмотрим, что в это время происходит в HTML-, CSS- и JavaScript-коде и как подготовить художественные материалы для этого эффекта.

HTML: основа

Для демонстрационного примера нам потребовались три цветовые области: две для цвета, выбранного пользователем, и одна для смешанного цвета. Для иллюстрации мы составили простейшую структуру DOM, которая поддерживает переходы CSS3 и отправляет минимальное количество HTTP-запросов.

<!-- Basic HTML Setup -->
<div class="illo color-mixed">
  <div class="illo color-primary"></div>
  <div class="illo color-secondary"></div>
</div>
  

CSS: простая, но стильная структура

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



  

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



  

Список поддерживаемых в данный момент браузеров и рекомендуемые способы применения переходов CSS3 можно найти на веб-сайте HTML5.

JavaScript: претворение в жизнь

Динамическое назначение цветов – это просто. Мы задали в DOM поиск всех элементов нужного класса и установили цвет фона в соответствии с цветом, выбранным пользователем. Эффект перехода применяется к элементам DOM путем добавления класса.

Это создает очень легкую, гибкую и масштабируемую архитектуру.



  

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



  

Иллюстрация архитектуры HTML и CSS: придание индивидуальности областям изменения цвета

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

На изображении в 24-битном формате PNG фоновый цвет элементов HTML виден через прозрачные области.

Прозрачные области изображения

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

Цветовые области

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

Края цветовых областей

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

Посмотрите на файл Photoshop и обратите внимание на то, как информация о структуре CSS отображается в названиях слоев.

Края цветовых областей

Загрузить демонстрационный пример изменения цветов

На бис.

Для пользователей, у которых нет Chrome, мы решили выразить суть приложения в одной статичной картинке. Ее основным элементом является сетка, фоновая плитка указывает на цель приложения, а перспектива в отражении намекает на иммерсивную трехмерность среды.

Края цветовых областей

Если вас заинтересовали работы Technitone, следите за новостями в нашем блоге.

Загрузить все демонстрационные примеры одним файлом

Ансамбль.

Спасибо за внимание. Возможно, скоро мы устроим с вами джем-сейшн!

Comments

0