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

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

Ваш плеер в HTML:

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

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

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

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

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

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

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

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

Установка значения атрибута HTML DOM элемента средствами js

Декабрь 17, 2018 г.

При работе с HTML документом из JavaScript одной из типовых операций является установка значения того или иного атрибута выбранного контейнера (тега). Vanila JS В чистом js (vanila) значение атрибута можно установить следующим образом: [crayon-6aef5c9cd69ce716930089/] ...

Читать

Вывод записей нужной рубрики в wordpress

Февраль 5, 2010 г.

Wordpress с самого начала позволяет задать определенную иерархию записей в вашем блоге с помощью рубрик. Не секрет, что возможности wordpress далеко уходят за пределы возможности создать просто блог. И сейчас мы рассмотрим типовую ситуацию, которую можно ...

Читать

Создаём программно url alias в Drupal 9

Август 28, 2021 г.

Сниппет кода, демонстрирующий как alias создаётся в Drupal 9. Ранее (в 8й версии) это был сервис ядра path.alias_storage, и код выглядел так: [crayon-6aef5c9cd6f82578129448/] В 9й версии хранилище перенесли в entityTypeManager и потому выглядит ...

Читать

Как оптимизировать диск, используемый WSL

Октябрь 12, 2024 г.

При удалении файлов на диске, используемом WSL, размер файла ext4.vhdx не уменьшается. Обычно он имеет тенденцию только расти в процессе работы. Как ...

Читать
 

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

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



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