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

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

Ваш плеер в HTML:

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

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

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

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

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

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

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

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

Скользящий блок внутри контейнера, но фиксированный относительно экрана

Июнь 15, 2023 г.

Сложно коротко описать поведение блока, а речь пойдет о sticky позиционировании в css. Невероятно классная штука position: sticky давно уже существует в спецификации, но пока ощутимая доля интернетчиков пользовалось IE, который не поддерживал значение ...

Читать

WordPress: вывод рубрик и тегов таксономии в шаблоне single.php

Июль 17, 2025 г.

Если вы хотите отобразить рубрики (категории) и теги поста в шаблоне single.php - т.е. шаблоне одиночной статьи, WordPress предоставляет удобные функции из API-шаблонов. В этой статье разберем, как их использовать правильно и оформить вывод. Зачем ...

Читать

View Binding в kotlin

Февраль 15, 2025 г.

Иногда на собесах спрашивают что такое view binding, и звучит это как некая сложная тема, но на самом деле, это просто фича сборщика, которую можно использовать для упрощения доступа к элементам шаблонов. Этот механизм упрощает работу с элементами ...

Читать

Грузим картинку в поле image в Drupal

Март 1, 2016 г.

Из кода программы на PHP мы попытаемся загрузить картинку в публикацию сайта на Drupal 7. Здесь описана логика и показан код всех операций. Постановка задачи Эта задача является частью задачи импорта статьи, извлеченной из HTML кода веб-страницы ...

Читать
 

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

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



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