Тег <audio> - это простой, но мощный инструмент для встраивания звуковых файлов на веб-страницу. Однако здесь кроется одна маленькая хитрость: не все браузеры одинаково «любят» аудиоформаты. Чтобы ваш звук зазвучал везде и без сбоев, важно предусмотреть несколько вариантов файла сразу. Для этого внутри элемента <audio> используются дочерние теги <source>. Это своего рода страховка от несовместимости! А если вдруг браузер решит, что с аудиофайлом что-то не так или формат ему не по душе, он бережно покажет любой текст, который вы поместили внутрь тега. Это отличный способ поддержать пользователей даже в крайних случаях. Примечание: этот тег не поддерживается в IE8 и более ранних версиях. Особое внимание заслуживают атрибуты controls, autoplay и loop. Они работают по принципу «булевых переключателей»: их присутствие само по себе включает функцию, а отсутствие - выключает. Вам не обязательно присваивать им значения, просто укажите название атрибута - этого достаточно. Разбираем ключевые атрибуты autoplay:- Включает автоматическое воспроизведение. Аудиофайл заиграет сразу, как только будет полностью загружен. Вы можете написать это так:
<audio autoplay><audio autoplay="autoplay"><audio autoplay=""> controls:- Добавляет на страницу удобную панель управления: кнопки запуска, паузы, ползунок громкости и шкалу прокрутки. Без этого атрибута интерфейс плеера не появится вовсе!
<audio controls><audio controls="controls"><audio controls=""> Важно: если вы забыли указать атрибут controls, пользователь просто не увидит ни одного элемента управления на странице. loop:- Создает бесконечный цикл: как только музыка закончится, она начнется заново. Идеально для фоновой музыки!
<audio loop><audio loop="loop"><audio loop=""> preload:- Управляет тем, как браузер готовит файл к прослушиванию (если не стоит
autoplay). У вас есть три выбора: - auto - браузер начинает подгружать файл сразу после загрузки страницы;
- metadata - загружается только «обложка» данных: размер, длительность и т.д.;
- none - ничего не грузится, пока пользователь сам не нажмет кнопку Play.
Примечание: если используется атрибут autoplay, то preload игнорируется. src:- Указывает путь к аудиофайлу. Здесь можно использовать относительный или абсолютный URL.
Пример использования<audio controls="controls"> <source src="song.mp3" type="audio/mp3"> Ваш браузер не поддерживает тег audio</audio>
|