Аудио на HTML-странице. Как вставить и воспроизвести трек с помощью элемента?

аудио на html-странице. как вставить и воспроизвести трек с помощью элемента?

Вставка и воспроизведение аудио

Аудио реже встречается на сайтах, чем другие типы медиа-контента, но это не делает его менее важным. Существует несколько способов вставки аудиозаписи в страницу. Мы рассмотрим специальный элемент, появившийся в пятой версии HTML. Его возможности отлично поддерживаются всеми видами браузеров, кроме Opera mini.

Для вставки аудио в HTML-страницу нужно использовать элемент <audio>. Указание закрывающего тега обязательно. В большинстве случаев пространство, между его открывающим и закрывающим тегом, должно оставаться пустым. Остальные ситуации будут рассмотрены далее в статье.

Чтобы появилась возможность воспроизведения аудио, расположение файла необходимо указать в атрибуте src. Путь должен быть относительным или абсолютным URL-адресом. Процессом воспроизведения необходимо управлять. Для этого добавьте атрибут controls. Его присутствие заставит браузер вывести панель управления, которая включает в себя следующие элементы: ползунок изменения громкости, кнопки паузы или остановки, индикатор тайминга.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Вставка аудио в разметку страницы</title>
    </head>
    <body>
        <h3>Запись: Mike Oldfield – Nuclear</h3>
        <audio src="test-audio.mp3" controls></audio>
    </body>
</html>
Отображение аудио проигрывателя с панелью управления
рис 1. Внешний вид проигрывателя в Google Chrome

Заметка
Внешний вид панели управления аудио может отличаться в разных браузерах. Встроенные в HTML возможности не могут на это повлиять. Всё целиком и полностью зависит от разработчиков браузера.

Расширенные настройки аудио

Есть несколько дополнительных атрибутов, которые управляют второстепенными возможностями воспроизведения.

Прослушивание аудиофайла может быть запущено автоматически, сразу после загрузки страницы. Для этого добавьте атрибут autoplay. Установив атрибут loop, вы заставите браузер воспроизводить аудио снова и снова при достижении концовки.

Используя атрибуты autoplay и loop желательно добавлять панель управления. Иначе у пользователя сайта не будет возможности остановить прослушивание или изменить громкость. В большинстве случаев это вызовет у него раздражение.

Выбор форматов воспроизведения

Элемент <audio> поддерживает несколько форматов воспроизведения (mp3, ogg, wav). Однако все зависит от конкретного вида браузера. Некоторые из них игнорируют определенные форматы. Это невозможно исправить доступным в HTML функционалом. Если вы разместите на страницах сайта аудио, не поддерживаемым каким либо браузером, то можете потерять часть посетителей.

Для достижения максимальной совместимости необходимо использовать аудио формат MP3. С ним можно забыть о проблемах кроссбраузерности. Если вам все же нужна поддержка разных форматов, используйте для этого элементы <source>, которые должны быть обернуты элементом <audio>.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>Добавление альтернативных аудиофайлов</title>
    </head>
    <body>
        <audio controls>
            <source src="test-audio.mp3" type="audio/mp3">
            <source src="another-audio.ogg" type="audio/ogg">

            Ваш браузер не поддерживает доступные форматы!
        </audio>
    </body>
</html>

Браузеры обрабатывают такую структуру по порядку, проверяя каждый элемент <source> на наличие поддерживаемого формата. Если он будет найден, остальные определения игнорируются. Нужный файл может быть не найден, поэтому вместо аудио показывается сообщение, добавленное нами в самом конце.

Элементы <source> имеют два атрибута. src — это URL-адрес аудиофайла, а в атрибуте type задается его медиа-тип. Медиа-тип может быть одного из трех форматов: audio/ogg, audio/mp3 или audio/wav.

Последние публикации