В прошлой статье Проигрыватель видео HTML5 мы уже говорили об использовании HTML5 и почему это актуально на сегодняшний день. Теперь остановимся более подробно на вопросе "Как вставить аудио на сайт с помощью HTML5".
Добавить музыку на сайт можно с помощью тега audio. Пример простейшей реализации этого тега:
<audio src="nubex.mp3" />Но опять же, как и в случае с видео, не всё так просто. Не все браузеры поддерживают нужные аудио-кодеки. Взглянем на таблицу:
| Браузер | Google Chrome | Mozilla Firefox | Safari | Opera | Internet Explorer |
|---|---|---|---|---|---|
| mp3 | Есть | Нет | Есть | Нет | Есть |
| wav | Есть | Есть | Есть | Есть | Нет |
| AAC | Есть | Нет | Есть | Нет | Есть |
| ogg/vorbis | Есть | Есть | Нет | Есть | Нет |
Как видно из таблицы, наиболее "универсальным" является формат .wav. Но, тем не менее, его не поддерживает Internet Explorer. Поэтому, рекомендуется конвертировать аудиофайл в несколько форматов и использовать несколько аудио-кодеков. Следующий пример иллюстрирует один из способов добавления аудио HTML на веб-страницу:
<audio controls>
<source src="nubex.ogg" type="audio/ogg; codecs=vorbis">
<source src="nubex.mp3" type="audio/mpeg">
Ваш браузер не поддерживает тег audio.
</audio>Внешний вид аудиоплеера будет зависеть от браузера, вот, например, вид аудиоплеера в браузере Firefox:
Атрибуты тега AUDIO
К основным атрибутам тега audio относятся:
- src - путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source);
- controls - отображается панель управления аудио (play, pause, volume и т.д.);
- autoplay - воспроизводит аудиофайл сразу после загрузки веб-страницы;
- loop - циклическое воспроизведение;
Вложенный тег source может иметь следующие атрибуты:
- src - путь к аудиофайлу;
- type - тип аудио-источника;
- media - тип устройства, на котором будет проигрываться аудиофайл (all - на всех устройствах, tv - телевизор и т.д.);