До 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>.