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

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

Ваш плеер в HTML:

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

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

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

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

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

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

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

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

Удалить название типа публикации из адреса кастомного типа публикации

Ноябрь 18, 2017 г.

При создании собственного типа публикации в Wordpress, вы получите ЧПУ, содержащий в самом начале название этого типа материала. Можно ли избавиться от этого? К примеру, вы зарегистрировали тип публикации portfolio: [crayon-6a51c1647830f539378550/] ...

Читать

Утилита для извлечения данных и парсинга HTML кода

Февраль 29, 2016 г.

Я иногда ссылаюсь на данную утилиту в примерах. Выкладываю её код и примеры использования. Примеры использования. Я привожу пример экспорта статей с одного из своих рабочих проектов - delovoymir2003.ru. Я выполнял программирование и переносом публикаций ...

Читать

Как зацепиться за редактор формы параграфа (paragraph)

Январь 25, 2022 г.

В Drupal 8 есть хорошая зацепка ко всей форме параграфа - hook_field_widget_WIDGET_TYPE_form_alter , а в семерке можно зацепляться за отдельные поля формы - hook_field_widget_form_alter. Рассмотрим примеры реализации этих зацепок. Drupal 7 ...

Читать

Input type email pattern

Октябрь 10, 2021 г.

В статье рассмотрим некоторые кейсы, связанные с полем email, и подберем шаблон для проверки <input type=email> поля. Немного теории. Атрибут pattern тега input позволяет использовать регулярные выражения для быстрой валидации значения поля. ...

Читать
 

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

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



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