- PVSM.RU - https://www.pvsm.ru -
Примерно год назад появилась задача сделать красивый html5 аудио-плеер. Дизайнеры нарисовали простейшую визуализацию:
Самый простой вариант — рисовать на фоне «шум», никак не связанный с играющей музыкой. Но мы не ищем лёгких путей.
На хабре нашлась статья визуализация аудио в HTML5 [1], в которой подробно рассмотрен вопрос визуализации с помощью javascript. Существует 2 стандарта получения информации об аудио:
Стандарты сильно отличаются друг от друга, используя эти API мы могли добиться поддержки только в этих браузерах. Мы же хотели расширить список и придумали решение, которое заработало даже в старых версиях IE.
Упрощенное демо [4]
Вся музыка импортировалась со стороннего сервиса и проходила препроцессинг написанный на ruby — конвертирование в stereo mp3 128kb. Мы добавили к этому создание json-файла для визуализации.
На рисунке 30 столбцов показывают «насыщенность» диапазона частот: низкие частоты — слева, высокие — справа.
Не вдаваясь в подробности алгоритма, на сервере, используя 2 гема — wavefile [5] для получения данных из .wav файлов и fftw3 [6] для подсчета быстрого преобразования Фурье, генерировался json следующего формата:
{
// ключ хеша — время в секундах
0.0: [/*размеры для 30 столбцов*/],
0.04: [...],
0.08: [...]
...
}
В среднем, размер файла визуализации — 500kb.
Экспериментально мы выбрали «разрешение» в 0.04 секунды, при котором визуализация меняется плавно (вы же помните про 24 кадра в секунду?) и не увеличивается размер файла. Забавный факт: при первой реализации высота столбцов представлялась числом с точкой и размер файла доходил до 5 мегабайт. Добавление приведения к целому числу уменьшило размер файла в десятки раз.
На клиенте алгоритм очевидный: для каждого аудио-файла с сервера берётся json-визуализация. Во время воспроизведения для текущего времени берётся ближайшее время из файла и рисуются 30 стобцов, высота которых подсчитана на сервере.
Очевидный минус подхода: чтобы изменить внешний вид визуализации нужно перегенерировать все файлы. Но за год внешний вид не менялся и такой проблемы не возникало. Другой минус: для каждого аудио нужно хранить ещё и полумегабайтный файл визуализации. Но при этом визуализация работает во всех браузерах.
Автор: KELiON
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/45188
Ссылки в тексте:
[1] визуализация аудио в HTML5: http://habrahabr.ru/company/microsoft/blog/125832/
[2] Web Audio API: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
[3] Audio Data API: https://wiki.mozilla.org/Audio_Data_API
[4] Упрощенное демо: http://kelion.github.io/visualizer/
[5] wavefile: https://github.com/jstrait/wavefile
[6] fftw3: http://rubygems.org/gems/fftw3
[7] Источник: http://habrahabr.ru/post/196668/
Нажмите здесь для печати.