Тег audio. Воспроизведение звука на сайте

Тег audioВ свое время единственным способ воспроизведения аудио на сайте, было использование Flash. С приходом в нашу жизнь HTML5, все значительно упростилось, ведь появился новый тег <audio> с помощью которого вы можете воспроизводить и управлять аудиозаписью на своем сайте.

В данной статье, я хочу вас познакомить с данным тегом.

Как добавить тег <audio> на страницу

Пример добавления аудио, приведен ниже. Обратите внимание на два атрибута, которые я указал. Первый, это атрибут src в котором указывается путь до вашего аудиофайла и второй, это autoplay с помощью которого мы говорим браузеру, что данная аудиозапись должна воспроизводиться автоматически, сразу же после загрузки страницы. Если мы вообще не указываем атрибут autoplay, то запись не будет воспроизводиться до тех пор, пока мы не кликнем по кнопке Play.

<audio src="audio.mp3" autoplay></audio>

Воспроизведение аудио в цикле

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

<audio src="audio.mp3" autoplay loop></audio>

Если вы не укажите атрибут loop, то запись один раз проиграется и остановиться.

Отображение панели управления аудиозаписью

Выше мы рассмотрели пример с использованием атрибута autoplay, в этом случае наша запись автоматически начинает воспроизводиться без возможности управлять ей (т.е. пользователь не сможет поставить ее на паузу и т.д.).

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

<audio src="audio.mp3" controls></audio>

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

Аудиоплеер

Какие форматы аудиозаписей использовать?

Тег <audio> поддерживают большинство современных браузеров, но единственный минус заключается в том, что разные браузеры поддерживают разный формат аудиозаписей. Например, Chrome воспроизводит аудио в формате MP3, а Firefox данный формат не воспроизводит, вместо него он использует аудио в формате OGG.

Выходом из данной проблемы является использование аудиозаписей в обоих форматах (смотрите пример ниже).

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mp3">
</audio>

Теперь данную запись смогут воспроизвести все современные браузеры.

Кроссбраузерность тега <audio>

Как я уже писал выше, тег <audio> поддерживают все современные браузеры, а именно: Chrome, Firefox, Opera, Safari, Яндекс.Браузер, Internet Explorer 9+.

Но разумеется есть ряд устаревших браузеров, которыми не поддерживается тег <audio> и которыми еще пользуется некий процент пользователей сети Интернет. Для этих браузеров вы можете написать следующее:

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mp3">
  Ваш браузер не поддерживает воспроизведение аудио!
</audio>

На этом у нас все. Надеюсь, вы разобрались с данным тегом.

Если вам понравилась данная статья, пожалуйста, напишите в комментариях стоит ли писать статью или видеоурок о том, как можно создать свой аудиоплеер, со своим дизайном на JavaScript?

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев нет

Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад