Как вставить аудио в HTML — музыка на сайте на примерах

Аудио файлы вставить в HTML довольно просто, как и видео файлы, о чем мы рассказывали ранее в статье как вставить видео на сайт в html. Для вставки аудио используется html тег <audio>. В этой статье разберём, как вставить аудио в HTML и какие форматы поддерживаются браузером.

На примерах как вставить музыку в HTML

Самый базовый пример вставки аудио в html — это вставка mp3 файла и указания типа файла в атрибуте audio/mpeg, дочернего тега source.

<audio controls autoplay loop muted preload="auto">
  <source src="/assets/audio/music.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио.
</audio>

Таким образом мы вставили нашу музыку в html код нашего сайта. А именно, структура тегов и их атрибуты такая:

• <audio> — главный тег дающий браузеру понять что здесь будет подключение аудио файла.
  • controls — атрибут который добавляет элементы управления плеером (громкость, плей, пауза, перемотка).
  • autoplay — атрибут дающий возможность автоматически запускать плеер при загрузке страницы.
  • loop — атрибут дающий зацикливание музыки после ее окончания.
  • muted — атрибут убавляющий звук на 0 по умолчанию.
  • preload="auto" — атрибут делающий предварительную загрузку файла.
• <source> — дочерний тег который подключает непосредственно сам аудио файл и задает его тип.
  • src — атрибут в котором указывается путь к файлу который будет проигрываться.
  • type — атрибут в котором указывается тип проигрываемого файла.

Подключение музыки в HTML в разных форматах

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

• audio/mpeg — этот тип указывается при подключении аудио в формате MP3. Самый популярный тип файла.
• audio/ogg — этот тип указывается при подключении аудио в формате OGG. Открытый формат, поддерживается Firefox, Opera.
• audio/wav — этот тип указывается при подключении аудио в формате WAV. Высокое качество, но большой размер.

<audio controls autoplay loop muted preload="auto">
  <source src="/assets/audio/music.mp3" type="audio/mpeg">
  <source src="/assets/audio/music.ogg" type="audio/ogg">
  <source src="/assets/audio/music.wav" type="audio/wav">
  Ваш браузер не поддерживает аудио.
</audio>

Итог подключения audio в html

Как видите, подключить музыку в html на сайт совсем не сложно. Самое главное, подготовить музыкальные файлы нужного формата и качества, и загрузить их на свой хостинг/сервер и указать путь в теге <source>.