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

22.07.18 ИТ / HTML 6529

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

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

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

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

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

• autoplay - автоматическое воспроизведение звука после загрузки страницы;
• controls - сообщает браузеру, что нужно показать кнопки управления плеером;
• loop - делает циклическое воспроизведение;
• muted - отключает звук воспроизведения;
• preload - предварительная загрузка аудио файла, возможные значения: auto, metadata, none;
• src - путь к проигрываемому файлу.

Какие форматы можно использовать для тега 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? Перечислим ниже:

• media - служит для определения типа медиа-устройства;
• src - служит для указания пути к файлу;
• type - определяет MIME-тип указанного файла.

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

• default - указывает, что дорожка воспроизводится по умолчанию;
• kind - указывает тип текстовой дорожки, принимаемые значения: captions – перевод диалогов, chapters – позволяет указать главу, которая служит для навигации по файлу, descriptions – добавляет звуковое описание при просмотре видео, актуально для тега video, metadata – данные для скриптов, subtitles – добавляет субтитры;
• label - название дорожки;
• src - путь к файлу;
• srclang - язык воспроизводимой дорожки.

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