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

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

Ваш плеер в HTML:

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

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

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

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

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

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

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

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

Bootstrap - показ произвольного html контента подсказки в popover

Июнь 14, 2021 г.

Один из компонентов Bootstrap - popover - создаёт оформление и показывает текст подсказки при нажатии на контейнер. Рассмотрим более сложный кейс использования этого компонента, а именно, создание контента для popover на лету. Стандартный шаблон ...

Читать

MUI TextField с маской

Июль 4, 2023 г.

В MUI компонентах мне не хватало поддержки ввода с маской. Давайте подключим библиотеку imask к mui компоненту TextField для ликвидации этого пробела. Установите в ваш проект библиотеку imask (https://imask.js.org/), и сам материал https://mui.com. ...

Читать

Поиск дубля в массиве на PHP

Июнь 20, 2017 г.

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

Читать

Выполнение php кода через drush

Март 24, 2020 г.

Для отладки или выполнения какого то разового кода иногда требуется выполнить php код в системном окружении вашего сайта на Drupal. Без drush приходится добавлять код вроде следующего в файл темы (а в последствии его удалять от туда): [crayon-6983f9b42495c772355916/] ...

Читать
 

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

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



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