Как сделать плавное движение прогресс бара аудио плеера?

Question

[gleendo]

Есть вот такой аудио список. Добавил прогресс бар.

Есть формула
parseInt(100 / duration * currentTime)
В обработчике события timeUpdate указываю ширину прогресс бара.

progressBar.style.width = parseInt(100 / duration * currentTime) + "%";

Событие срабатывает несколько раз в секунду.
При воспроизведении песни, прогресс идет не плавно, а каждый небольшой промежуток скачит.
Как сделать чтобы прогресс шел плавно. Как рассчитать формулу?
Ссылка на демо - codepen.io/evg_/pen/YGkbQW

Answer 1

[Сергей Тутуков]

parseInt(100 / duration * currentTime)
не преобразовывай в целое число, оставь float

Comments

[gleendo]

Сергей Тутуков Да убрал уже, но все равно спасибо. Более менее плавно, но все равно заметно что есть скачки. Событие срабатывает просто не очень часто, а примерно 250мс. Как уменьшить время я хз.

[Сергей Тутуков]

В вк еще сильнее дергается.
У тебя функция вызывается 6-11 раз в секунду. Я бы вызывал ее раз в секунду и через animate менял ширину. Еще нужно убрать transition у прогресс-бара

Answer 2

[Sn0wSky]

Смените у .progress-bar анимацию ease на linear :)
codepen.io/anon/pen/dpvBbW