Управление позицией воспроизведения трека в HTML5 теге AUDIO

Объект audio поддерживает установку текущей позиции воспроизведения через свойство — currentTime. Если попытаться установить значение выходящее за рамки трека, то javascript создаст соответствующее исключение. Потому следует использовать конструкцию try — catch. Отлавливать исключения не понадобится, только если вы точно уверены в правильности нового значения для currentTime.

Ваш плеер в HTML:

Пример скрипта:

Одного currentTime явно не достаточно, чтобы отслеживать и отображать позицию воспроизведения трека.

Общую длительность трека можно посмотреть в свойстве объекта duration.

Для отображения текущей позиции проигрывателя могут понадобиться обработчики следующих событий:

  • playing — вызывается при запуске (play) проигрывателя,
  • pause — вызывается про остановке (pause) проигрывателя,
  • timeupdate — вызывается при обновлении текущей позиции воспроизведения.

Пример подключения обработчика (на примере ‘pause’):

Вернуться к основной статье по управлению объектом HTML5 AUDIO из javascript.

Мало букафф? Читайте есчо !

Многострочные константы в js

Сентябрь 19, 2018 г.

JavaScript в web был когда то всего лишь приятным дополнением. А сейчас сложно найти сайт, который не использует скрипты. А если уж часть шаблона формируется скриптом, то без много-строчных констант не обойтись. Но в javascript с ними не так все ...

Читать

Подключаем LESS препроцессор к вашей теме в Wordpress

Июнь 2, 2019 г.

Вкусив однажды всех радостей от использования препроцессора, сложно себя заставить работать с нативным CSS. Посмотрим как подключить LESS к вашей теме на WP. Т.к. уже есть готовые решения, то воспользуемся одним из них. Плагин WP-LESS сделает большую ...

Читать

Защита зараженного сайта: автоматическая сборка черного списка IP-адресов из логов Nginx

Февраль 4, 2026 г.

Представьте ситуацию: ваш сайт подвергся атаке. В корне и других папках появились подозрительные PHP-файлы, которых там быть не должно. Вы их удаляете, но через некоторое время они возникают снова. Очевидно, злоумышленники нашли и используют неизвестную ...

Читать

Убираем нативный крестик в поле ввода под IE

Май 13, 2018 г.

Во время ввода в текстовом поле IE появляется "крестик", который позволяет очистить поле в один клик. Иногда стиль, и вообще наличие этого крестика, не ...

Читать
 

Комментарии к «Управление позицией воспроизведения трека в HTML5 теге AUDIO»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: