visualz

Набор утилит для визуализации аудио в виде jQuery-плагинов

`zerochan-visuals.js`

Позволяет достигнуть эффекта, как на snyb.tk. Подготовка дополнительной (белой) картинки не требуется — это делается автоматически с помощью canvas.

`$('#image').visualize(preset)`

Превращает картинку в контейнер визуализации.

Метод должен вызываться после того, как картинка загружена! Например, так:

$('#image').on('load', function() {
  $(this).visualize()
})

Пресеты

preset может быть как строкой с именем одного из встроенных пресетов, так и объектом, описывающим настройки визуализации. Если аргумент preset не задан, будет выбран случайный встроенный пресет. Список встроенных пресетов может быть расширен (см. далее).

Формат пресета

cw, ch — ширина и высота ячеек в пикселях. Также поддерживается специальное значение "100%" для ячеек во всю длину/ширину картинки;
css — дополнительный CSS, применяемый к ячейке.

Встроенные пресеты

circles — круглые ячейки с небольшой тенью
rows, columns — горизонтальные и вертикальные полосы
bigBoxes, smallBoxes — большие и маленькие квадраты

Добавление пресета

$.VZaddPreset(name, preset) позволяет добавить новый пресет под именем name. Пресеты должны быть добавлены перед вызовом функции преобразования картинки.

Дальнейшее использование

Функция visualize() возвращает массив из ячеек, обернутых в jQuery. Каждая из ячеек имеет метод .flash(), который можно вызывать из аудио-анализатора. Также метод .flash() автоматически вызывается по наведению курсора на ячейки.

`audio-analyzer.js`

Создает аудиоплеер с возможностью анализа аудио-материала для дальнейшей визуализации.

`$('#audio').analyze(plist, options, forEachFrame, forEachUnit)`

Создает аудиоплеер на основе существующего <audio>-элемента.

Плейлист

plist — массив, в котором должны содержаться имена треков. Для лучшей совместимости с браузерами рекомендуется подготовить треки в форматах ogg и mp3, но допускается и использование какого-то одного из этих форматов. В последнем случае нужно передавать имя файла с расширением. Например,

var playlist = ["audio1", "audio2.mp3", "audio3.ogg"]

В данном случае в директории с треками должны лежать файлы audio1.mp3, audio1.ogg, audio2.mp3, audio3.ogg.

Опции

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

fftSize (2048) — размер быстрого преобразования Фурье. Должен быть степенью двойки.
smoothing [0...1] (0.2) — степень сглаживания , то есть инертности визуализатора.
volume [0...1] (1) — громкость по умолчанию. Влияет только на громкость звука на выходе, но не на чувствительность анализатора.
domain ["time", "frequency"] ("time") — область анализа (временная или частотная).
audioDir [string] ("tracks/") — путь к директории с треками.

Juribiyan/visualz