Тег <audio>

Аудиоплеер
  • Категории: Потоковое содержимое, Фразовое содержимое, Встроенное содержимое, Интерактивное содержимое
  • Контекст:

    Где ожидается встроенное содержимое.

  • Модель:

    Прозрачная модель, но без других медиа-объектов.

Тег <audio> (от англ. "audio" - аудио) позволяет вставить на страницу аудиоплеер для проигрывания аудиофайлов. Как и в случае с изображением, для указания источника аудио мы можем использовать атрибут src. Но кроме этого, есть возможность задать несколько источников через вложенные элементы <source>.

Изначально аудиоплеер никак не отображается и мы можем управлять им только через JavaScript. Для отображения элементов управления плеером необходимо добавить ему атрибут controls. При этом его внешний вид в различных браузерах может отличаться.

Атрибуты

  • Глобальные атрибуты
  • src - адрес аудиофайла
  • crossorigin - как элемент обрабатывает запросы с других доменов
  • preload - поведение загрузки файла
  • autoplay - автовоспроизведение файла
  • loop - зацикливание произведения
  • muted - отключение звука по умолчанию
  • controls - показать элементы управления плеером

  • Вставка аудиоплеера

    Базовый аудиоплеер должен содержать атрибут src для указания источника аудио, а также атрибут controls для отображения его элементов управления:

  • Управление поведением

    Если вы хотите, чтобы ваш плеер проигрывался автоматически, то достаточно добавить ему атрибут autoplay. Старайтесь не злоупотреблять данной возможностью, поскольку это может смутить пользователя.

    Еще один атрибут muted позволяет отключить звук вашего плеера, а атрибут loop делает проигрывание цикличным.

  • Управление загрузкой файла

    Атрибут preload позволяет установить поведение для загрузки файла:

    • auto (по умолчанию) - браузер начинает подгружать файл до нажатие на воспроизведение
    • none - браузер не загружает файл пока не было нажато воспроизведение
    • metadata - браузер подгружает информацию о файле, но сам файл загружается только в момент воспроизведения

  • Источники разных форматов

    Разные браузеры могу иметь разную поддержку тех или иных форматов. Хорошей практикой является указание источника в нескольких форматах одновременно. Для этого вместо атрибута src используются дочерние элементы <source> - по одному на каждый формат. Вы можете указать файл во всех доступных форматах, но в большинстве случаев достаточно использовать два из них: ".mp3" и ".ogg".

    Когда мы указываем несколько источников файла, браузер пытается подключить каждый из них по порядку, пока не найдет первый формат, который он может воспроизвести. Мы можем упростить ему поиск поддерживаемого формата, указав MIME-тип источника в атрибуте type. Таким образом браузер сможет сразу перейти к нужному ему файлу.

  • Альтернативный контент

    Внутри тега <audio> можно указать альтернативный контент, который будет выведен, если браузер пользователя не поддерживает данный элемент. Мы можем использовать эту возможность, чтобы оставить ссылку на скачивание файла. Таким образом ни один пользователь не будет обделен.

Поделитесь данной записью с друзьями