Как разместить на сайте аудио-плеер средствами HTML

/, Апельсиновый фреш, Сайтостроение/Как разместить на сайте аудио-плеер средствами HTML

Как разместить на сайте аудио-плеер средствами HTML

Здравствуйте. Иногда перед веб-мастером встает задача размещения на сайте аудио-материалов и поэтому сегодня в рубрике «Апельсиновый фреш» я расскажу, как разместить на странице сайта обычный аудио-плеер. Итак, в версии HTML5 появился новый тег, при помощи которого мы можем теперь «встраивать» звук прямо в сайт. Как это работает? На страницу сайта прописывается тег <audio> в том месте, где вам нужно разместить плеер.

У этого тега есть атрибуты:

autoplay — звук начинает играть сразу после загрузки страницы.
controls —  добавляет панель управления к аудиофайлу.
loop — включение автоповтора воспроизведения
preload — файл загружается вместе с веб-страницей
src — указывает путь к воспроизводимому аудиофайлу.

Вот такой аудио-плеер получается при вставке следующего кода

Встречайте! «Mahalageasca» Горан Брегович

Теперь пару слов о совместимости браузеров и проигрываемых аудио-файлов. По данным htmlbook.ru составлена следующая таблица совместимости:

 

Кодек/Браузер Internet Explorer Chrome Opera Safari Firefox
ogg/vorbis нет да да нет да
wav нет да да да да
mp3 да да нет да нет
AAC да да нет да нет

Для того, чтобы максимально увеличить совместимость браузера и формата аудиофайла, можно разместить в папке одну и ту же музыкальную композицию, но в разных форматах. В таком случае код приобретет вид:

 

Вот вам полезная ссылочка на онлайн-сервис конвертации аудио-файлов online-convert.com. Пользуйтесь на здоровье!

На этом сегодня всё. Если у вас появились вопросы, то вы можете задать их нам в комментариях или через систему личных сообщений, просто зарегистрировавшись на нашем сайте.

С уважением.

4

Leave A Comment

Войти с помощью: