Визуализация данных

Вы можете показывать в плеере дополнительный контекст (интенсивность звука, внимание пользователей и тому подобное) с помощью модуля визуализации данных. График будет отображаться над таймлайном:

Включите модуль Визуализация

Укажите данные в поле Данные для теста — массив значений от 0 до 1, которые фиксируют контекст во времени по всей длительности контента. Плеер равномерно разместит точки вдоль линии перемотки, сгладит и нарисует график. Чем больше точек, тем сложнее график будет отображаться. Рабочие данные можно передавать в коде плеера, либо в плейлисте параметром waveform

waveform:[0.04,0.05,0.06,0.08,0.07,0.06,0.05,0.06,0.08,0.12,0.18,0.24,0.30,0.36,0.29,0.22,0.18,0.15,0.13,0.12,0.11,0.10,0.12,0.16,0.23,0.34,0.48,0.60,0.52,0.40,0.31,0.25,0.21,0.19,0.18,0.17,0.16,0.18,0.22,0.30,0.42,0.58,0.72,0.65,0.51,0.39,0.31,0.26,0.22,0.20,0.19,0.21,0.28,0.40,0.55,0.74,0.88,0.80,0.63,0.48,0.36,0.28,0.24,0.22,0.20,0.19,0.21,0.27,0.38,0.54,0.73,0.90,1.00,0.86,0.67,0.50,0.37,0.29,0.24,0.21,0.19,0.18,0.17,0.19,0.25,0.36,0.50,0.66,0.58,0.44,0.33,0.26,0.22,0.19,0.17,0.15,0.14,0.13,0.12,0.11]

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

Вы можете посмотреть, как это работает, на примере видео и аудио шаблонов.

Где взять данные

Данные для визуализации звука можно получить из файлов с помощью утилиты ffmpeg. Вот пример php-скрипта, который обрабатывает mp3 и выдает массив из заданного количества точек. Для визуализации внимания пользователей необходимы данные о глубине воспроизведения, их можно собирать через API плеера.

---