Анимированный саундтрек

[seemax]

Макет содержит красивый отзыв клиента в виде анимированного саундтрека. 

Дизайер нарисовал это так http://c2n.me/3of0KCh

 

Прошу знатоков натолкнуть на возможный алгоритм решения. Из чего это сделать?

 "Выложить" красиво палочки в ряд, которые меняют фон с прогрессом звукоряда? Если да, то как согласовать визуализацию с продвижением звука?

Т есть, по идее значение % звука должно управлять стилями соотв количества элеметов в блоке...

На верном ли я пути?

 

[antonKar]

Есть блок с position: static, который находится внутри родителя с position: relative (это нужно чтобы псевдоэлементы блока ставились относительно родителя).

 

Для before блока делаем ширину в 100% и на фон серые палки. Для самого блока ставим на фон синие палки.

 

По мере проигрывания аудио мы можем получать duration и cirrentTime. На основе этих данных мы можем посчитать сколько нам поставить для блока ширину в %.

 

У setInterval значение времени можно поставить как 1000 / 60.

 

Вот и всё.

Edited October 1, 2015 by antonKar

[seemax]

Спасибо за подсказку, но

duration и cirrentTime.

 мало для моего опыта с js, чобы применить рекомендацию.