Вход Регистрация
ruen

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

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

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. Тег позволяет быстро создать функциональный плеер на любой странице сайта.

Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.
Оставить заявку

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

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

Eqsash (Инструменты)

Приложение для Android - VK LAST USER ID, отучитель от зависимости и т.д.:
Доступно в Google Play

Amessage (Общение)

Вход в веб-версию
Приложение для Android:
Доступно в Google Play

Поделиться

Подписаться

YouTube

Книги

IT-заметки - Простым языком о самом нужном (HTML, CSS, JavaScript, PHP, базы данных, Drupal, Битрикс, SEO, домены, безопасность и другое), PDF, 500 стр.