Веб-разработка, логотип Eqsash

Как сделать плеер на сайте при помощи HTML5, тег audio

Воспроизведение аудио файлов на веб-страницах сегодня не является чем-то необычным. Раньше для этого приходилось использовать специальные сторонние средства, подключать flash-плеер к примеру. Но с появлением HTML5 стало возможным легко добавить плеер на страницу, при помощи одного тега – audio.

html5-audio

Для добавления фонового звука на страницу существует тег bgsound, но он позволяет лишь просто воспроизвести музыку при заходе на страницу. Обычно же требуется создать полноценный мультимедиа плеер на странице, поэтому в спецификацию HTML5 был добавлен новый тег – audio. В разных браузерах вид внешнего плеера может отличаться, например, на картинке выше светлый плеер – это вид в Chrome, темный – вид в Firefox. Но внешний вид плеера можно легко изменить при помощи CSS-стилей. Использовать тег audio крайне просто:

<audio src="track.mp3" controls></audio>

Атрибут src позволяет задать путь к музыкальному файлу, атрибут controls сообщает браузеру, что необходимо отобразить интерфейс управления плеером – обычно это кнопки воспроизведения, паузы, громкости. Так как тег сравнительно новый, то стоит позаботиться о его поддержке браузерами, хотя большинство современных браузеров конечно поддерживают этот тег, но со своими особенностями.

Какие атрибуты есть у тега audio? Перечислим ниже:

Какие форматы можно использовать для тега audio? Лучше всего следующие три: AAC, MP3, OGG. Но не все браузеры могут воспроизводить формат MP3 из-за лицензионного соглашения. Поэтому можно написать такой код:

<audio controls>
	<source src="track.mp3" type="audio/mpeg">
	<source src="track.ogg" type="audio/ogg">
	<a href="/sounds/track.mp3">Загрузить track.mp3
</audio>

Как видно, мы просто перечисляем источники звука при помощи тега source - браузер выберет подходящий. Если вдруг тег audio не поддерживается – будет показана ссылка на загрузку файла. В таком случае пользователь сможет скачать и послушать его на своем устройстве.

Тег source нужен для указания альтернативных источников файлов. Какие атрибуты есть у тега source? Перечислим ниже:

Также внутрь тега audio можно добавить тег track, он служит для задания текстовой информации о файле, например, субтитры, заголовок и т.д. Какие атрибуты есть у тега track? Перечислим ниже:

Таким образом, мы рассмотрели, как сделать плеер на сайте при помощи HTML5, при помощи нового тега audio. Тег позволяет быстро создать функциональный плеер на любой странице сайта.

Оставить заявку

Последние статьи

Популярные разделы