HTML5 представляет встроенную поддержку мультимедиа с тегом audio, который позволяет очень легко встраивать мультимедиа прямо в любой HTML-документ с ограниченным кодом. Он поставляется со встроенными элементами управления браузером, если вы укажете и воспроизводит звук красиво и эффективно.
Обычно это будет выглядеть в вашем браузере (некоторые могут отличаться).
Вы можете подумать: «А что, если бы я захотел стилизовать свой собственный аудиоплеер с его собственными кнопками и полосой прокрутки?»
С помощью элемента audio, элемента progress и нескольких кнопок вы можете создать свой собственный аудиоплеер в кратчайшие сроки! Элемент прогресса в основном используется для отслеживания завершения задачи, и им можно легко управлять с помощью Javascript. В нашем случае это будет отслеживание длины песни. И что замечательно, возможности HTML5 и браузера позволяют легко получать информацию о длине песен, текущем времени и многом другом.
Вот ссылка на рабочий пример в Codepen аудиоплеера с настраиваемым стилем (см. Изображение ниже, как это выглядит). Если вы хотите поиграть с кодом, дерзайте!
А ниже - код. Обратите внимание, что это две отдельные функции. Один отслеживает, действительно ли аудиоплеер воспроизводит звук (функция initPlayers), а другой отслеживает звук для элемента прогресса (функция initProgressBar). Я пытался свести jQuery к минимуму, но использовал его для вызова функции, извините, я не сожалею, пуристы JS.
Если у вас есть вопросы или предложения, я всем внимателен! Напишите мне на [email protected] или напишите в твиттере @luke__duncan
