Как вставить аудио в html

До HTML5, которая значительно адаптировалась к потребностям современного Интернета, включая аудиофайл на странице HTML, обязательно требовала использования тега <object>. Хотя этот тег все еще используется (не только для включения аудиофайлов), в HTML5 появился новый тег, <audio> html разработанный специально для этой цели.

В этом уроке мы увидим, как использовать новый тег, <audio> введенный в HTML5. Для этого давайте начнем с простого примера:

<audio controls>
  <source src="music.mp3" type="audio/mp3">
</audio>

Первый атрибут есть controls, и его наличие гарантирует наличие пользовательских элементов управления для управления воспроизведением аудиофайла. Пропуск атрибута controls позволяет нам фактически вставить аудиофайл в фоновом режиме , так как невидимость элементов управления делает элемент аудио невидимым для пользователя. Эта последняя функциональность была реализована ранее через тег <bgsound>, который, однако, никогда не был стандартизирован, и поэтому лучше избегать его использования.

Два других возможных атрибута для тега <audio>autoplay и loop: первый заставляет аудио воспроизводиться автоматически, а второй — автоматически воспроизводить его в непрерывном цикле.

Внутри тега <audio> есть элемент типа <source>, с помощью которого мы можем указать файл, который мы хотим воспроизвести. В предыдущем примере мы указали воспроизводить файл music.mp3 через атрибут src, с предвидением сделать также явным тип file ( type="audio/mp3").

Поскольку некоторые типы файлов поддерживаются не всеми браузерами, вы можете указать разные теги <source>. Например:

<audio controls>
  <source src="music.mp3" type="audio/mp3">
  <source src="music2.ogg" type="audio/ogg">
Браузер не поддерживает аудио тег
</audio>

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *