Как вставить музыку на сайте (тег <bgsound>). Плееры для сайта html

Музыка на сайте — это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.

Как вставить фоновую музыку на сайт

Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.

Есть два способа для вставки музыки в html

Вариант 1. Через html тег <bgsound>

Синтаксис для вставки фоновой музыки

<bgsound src="адрес_аудиофайла" [атрибуты]>

У тега <bgsound> есть несколько атрибутов:

loop="значение" — количество повторений музыки (если -1, то повторяется бесконечно)
balance="значение" — стереобаланс (от -10000 до 10000)
volume="значение" — громкость (0 максимум, -10000 минимум)

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

Например

<bgsound src="fon_music.mp3" loop="1" balance="0" volume="0">

Вариант 2. Через тег <embed>

Синтаксис для вставки объекта с музыкой

<embed src="адрес_аудиофайла" [атрибуты]>

У тега <embed> возможно использование следующих атрибутов:

width="значение" — ширина (в пикселях или процентах)
height="значение" — высота (в пикселях или процентах)
align="значение" — выравнивание (left — слева, right — справа, center — по центру)
hidden="значение" — видимость панели (true — скрыть, false — показывать), по умолчанию панель видна
autostart="значение" — проигрывать музыку при загрузке (true — да, false — нет)
loop="значение" — значение true - проигрывать по кругу, false — один раз

Например

<embed src="fon_music.mp3" loop="true" 
width="300px" height="100px" align="center" autostart="false">

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

В html5 можно использовать тег <audio>

Смысл использования тега <audio> вызывает сомнения, поскольку до сих пор у старых браузеров отсутствует поддержка html5.

Синтаксис тег <audio>

<audio src="адрес_музыки.mp3" controls [атрибуты]>
Браузер не поддерживает audio
</audio controls>

Следующие атрибуты можно использовать:

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

Рассмотренные варианты на мой взгляд не являются идеальными решениями, поскольку все базируются на штатных проигрывателях. У каждого браузера будет свой штатный проигрыватель по умолчанию, а в каких-то он вообще может не работать. Поэтому лучше всего скачать плеер к себе на сайт и уже с него загружать музыку. У такого плеера будет функции остановки, настройки громкости и т.п. — весь необходимый набор для простого пользователя.

← Перейти в каталог html уроков и советов