Создание кроссбраузерной визуализации аудио

    Примерно год назад появилась задача сделать красивый html5 аудио-плеер. Дизайнеры нарисовали простейшую визуализацию:

    image

    Самый простой вариант — рисовать на фоне «шум», никак не связанный с играющей музыкой. Но мы не ищем лёгких путей.

    На хабре нашлась статья визуализация аудио в HTML5, в которой подробно рассмотрен вопрос визуализации с помощью javascript. Существует 2 стандарта получения информации об аудио:


    Стандарты сильно отличаются друг от друга, используя эти API мы могли добиться поддержки только в этих браузерах. Мы же хотели расширить список и придумали решение, которое заработало даже в старых версиях IE.

    Упрощенное демо


    Вся музыка импортировалась со стороннего сервиса и проходила препроцессинг написанный на ruby — конвертирование в stereo mp3 128kb. Мы добавили к этому создание json-файла для визуализации.

    Server-side


    На рисунке 30 столбцов показывают «насыщенность» диапазона частот: низкие частоты — слева, высокие — справа.

    Не вдаваясь в подробности алгоритма, на сервере, используя 2 гема — wavefile для получения данных из .wav файлов и fftw3 для подсчета быстрого преобразования Фурье, генерировался json следующего формата:

         {
          // ключ хеша — время в секундах
          0.0: [/*размеры для 30 столбцов*/], 
          0.04: [...], 
          0.08: [...]
          ...
         }
    


    В среднем, размер файла визуализации — 500kb.

    Экспериментально мы выбрали «разрешение» в 0.04 секунды, при котором визуализация меняется плавно (вы же помните про 24 кадра в секунду?) и не увеличивается размер файла. Забавный факт: при первой реализации высота столбцов представлялась числом с точкой и размер файла доходил до 5 мегабайт. Добавление приведения к целому числу уменьшило размер файла в десятки раз.

    Client-side


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

    Cons and pros


    Очевидный минус подхода: чтобы изменить внешний вид визуализации нужно перегенерировать все файлы. Но за год внешний вид не менялся и такой проблемы не возникало. Другой минус: для каждого аудио нужно хранить ещё и полумегабайтный файл визуализации. Но при этом визуализация работает во всех браузерах.
    Поделиться публикацией
    Комментарии 16
      +4
      И, собсно, вопрос — при чем тут JS ?) Этот вопрос был уместен еще и в статье от Microsoft, но у вас от JS осталось только анимация изменения высоты столбиков, audio тут вообще не при чем)
        +4
        под firefox есть полифил. Так как доля огнелиса и хрома (а так же и оперы в некоторых регионах) довольно высока, можно использовать хак с данными в json только в качестве fallback-а. что сэкономит ~200 килобайт траффика на трек.
          +3
          Какое-то решение в лоб, ну выкладывайте тогда ваш ruby посмотрим что там :)
          +3
          Хм, надеялся увидеть способ только на JS, а тут по сути визуализация JSON, а не аудио.
            +2
            Для визуализации аудио средствами JavaScript есть библиотека dancer.js (демка, если не боитесь дабстепа :).
              0
              Дансер, в демке по ссылке выше лишь низкие частоты обрабатывает.и сильная задержка.

              Есть более лучшая интересная реализация
              статья, демо
              Тут и все частоты и несколько демовизуализаций
                0
                Обратите внимание на «toggle FFT spectrum» вверху демки. По-моему, там задержек нет. Ну а рисовать-то можно по-разному. К тому же, возможно, ради общей плавности разработчик демки пожертвовал отзывчивостью.

                А ещё, к слову, демка в Firefox'е ощутимо подтормаживает. Хотя, быть может, причина в том, что я отключил direct2d.

                Тем не менее, благодарю за приведённые вами статью и демо. Выглядит действительно интереснее.
                  0
                  toggle FFT spectrum

                  Не заметил. Теперь стало лучше, сразу «нашлись» и высокие частоты и ФПС подрос )
            0
            Добавьте тогда тег Ruby к описанию. А то действительно возникло недопонимание о том, что увидим внутри поста.
              0
              Может быть имело бы смысл увеличить шаг по времени до 0,1-0,2 сек, а плавность обеспечить CSS транзишенсами?
                +1
                Спасибо за классную статью! Мы тоже как-то столкнулись с такой задачей. Мы реализовали визуализацию с помощью функций библиотеки Soundmanager2. Минусом было то, что для получения данных с частот она использовала Flash, что, естественно, не работает без него.

                В процессе поисков кроссбраузерного решения тоже решили, что было бы классно заранее генерировать JSON на сервере. К сожалению, руки до этого не дошли. А тут, история успеха, да еще и гистом поделились. Спасибо :)
                  0
                  Нам нужно было, чтобы плеер работал на айпаде, поэтому в сторону флеша даже не смотрели. А за наводку спасибо!
                  0
                  В IE ваша демуха не работает
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Лучше было бы раскрыть подробности алгоритма, как мне кажется. Гист без комментариев, особенно не зная руби, тяжеловато разобрать.

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

                      Самое читаемое