Тег audio
Тег audio управляет проигрыванием
аудиозаписи на HTML странице. При
его добавлении на странице появляется плейер,
у которого будут кнопки "Назад", "Вперед",
"Стоп" и так далее (их вид и количество зависит
от браузера). Путь к файлу задается через
атрибут src или вложенный тег source.
Тег source нужен для того, чтобы задавать
пути к файлам аудиозаписи в различных форматах
(так как браузеры поддерживают разный формат
аудио, например mp3 или wav).
Если у вас есть запись в одном из форматов,
то нужно ее сконвертировать и в другие.
Внутри тега audio можно написать текст,
который будет выводиться в браузерах, которые
не поддерживают аудио в HTML (это делается
для того, чтобы сообщить пользователям об этом).
Если вы хотите увидеть плейер для управления проигрыванием
аудио - следует добавить атрибут controls.
Без него вы ничего не увидите - и звука при
этом тоже не будет. Чтобы был звук при отсутствии
плейера - добавьте атрибут autoplay.
Атрибуты
| Атрибут | Описание |
|---|---|
src |
Указывает путь к аудио файлу.
Но лучше для этого использовать тег source
(в этом случае можно будет задать аудио в разных форматах).
|
preload |
Используется для загрузки аудио файла одновременно с загрузкой страницы сайта.
Принимаемые значения: none (не загружать файл, по умолчанию),
metadata (загрузить только служебную информацию: продолжительность звучания и так далее),
auto (загрузить аудиофайл целиком при загрузке HTML страницы).
|
autoplay |
Звук начинает играть сразу после загрузки страницы,
при этом наличие атрибута preload будет проигнорировано.
Атрибут без значения. |
controls |
Добавляет панель управления к аудиофайлу.
при этом наличие атрибута preload будет проигнорировано.
Атрибут без значения. |
loop |
Повторяет аудиозапись по "кругу": после завершения она начнет играть заново.
при этом наличие атрибута preload будет проигнорировано.
Атрибут без значения. По умолчанию (если атрибута нет) запись проиграется только 1 раз.
|
muted |
Отключает звук в аудиозаписи.
Атрибут без значения. По умолчанию (если атрибута нет) у записи звук включен. |
Пример . Плейер на странице сайта
Давайте добавим на страницу плейер с аудиозаписью.
Для тех браузеров, которые не поддерживают
тег audio оставлена специальная запись
об этом:
<audio src="track.mp3" controls>
Ваш браузер не поддерживает audio на HTML5.
</audio>
Пример . Плейер на странице сайта с тегом sourse
А теперь давайте вместо атрибута src
для тега audio добавим тег source:
<audio controls>
<source src="track.mp3">
Ваш браузер не поддерживает audio на HTML5.
</audio>
