Тег <bgsound> (от английского background sound, «фоновый звук») включал музыку при открытии страницы. Его придумали для Internet Explorer: достаточно было записать <bgsound src="music.mid" loop="infinite">, и мелодия играла сама. Тег пустой: закрывающего </bgsound> у него нет.
В стандарт HTML он не вошёл, а в списке устаревших записано коротко: вместо него пишут audio. Сегодня браузер считает bgsound неизвестным тегом и звука не воспроизводит.
<bgsound src="music.mid" loop="infinite">В этой статье
Тег bgsound в HTML: что это и для чего создавали
Раньше на личных страницах любили фоновую музыку: человек открывал страницу, и играла мелодия, которую выбрал автор. Для этого в Internet Explorer добавили отдельный тег. Он ничего не показывал на экране, а только запускал звук по адресу из src.
Internet Explorer понимал четыре атрибута. Современные браузеры ни один из них не читают.
| Атрибут | Что делал | Заметка |
|---|---|---|
src | адрес звукового файла | звуковой файл: WAV, AU или MIDI |
loop | сколько раз повторить звук | число повторов или infinite |
volume | громкость звука | от -10000 до 0, по умолчанию 0 |
balance | баланс между левой и правой колонкой | от -10000 (левая) до 10000 (правая), по умолчанию 0 |
Тег понимали Internet Explorer и некоторые старые браузеры, например прежняя Opera. В большинстве браузеров такая музыка не играла.
Как браузер разбирает bgsound
В стандарте для bgsound есть особое правило разбора: его добавляют в документ и сразу закрывают, как link или meta. Поэтому тег пустой, а записанный после него текст остаётся рядом, а не внутри. Закрывающий </bgsound> ни на что не влияет.
Класс у тега HTMLUnknownElement, то есть браузер считает его неизвестным: свойств src, loop, volume, balance у него нет, а display по умолчанию inline. Внутри head он тоже остаётся в head.
const s = document.querySelector("bgsound");
console.log(s.constructor.name, "src" in s);Пример: как браузер разбирает bgsound
Кнопки меняют запись. Под ней показаны класс тега, родитель и свойства, измеренные в рамке.
Работает ли bgsound сейчас
Нет. Звук не воспроизводится, адрес из src браузер не загружает. Тег ничего не рисует, поэтому страница выглядит так, будто его нет. Настройки loop, volume и balance браузеры не читают.
Какие браузеры понимали bgsound
Номеров версий у этого тега нет: он не вошёл в стандарт и работал в Internet Explorer и в некоторых старых браузерах, например в прежней Opera.
Пример: таблица браузеров
| Браузер | Понимал bgsound | Заметка |
|---|---|---|
| Internet Explorer | да | фоновый звук играл по адресу из src |
| Opera (старые версии) | да | звук играл по адресу из src |
| Chrome | нет | тег неизвестен |
| Edge | нет | тег неизвестен |
| Firefox | нет | звук не играет |
| Safari | нет | звук не играет |
Чем заменить bgsound
Фоновый звук записывают тегом audio. Адрес задаёт src, повтор включает атрибут loop, а controls показывает кнопки управления. Громкость у audio задаёт свойство volume в JavaScript, значения от 0 до 1. Баланса колонок у него нет.
<audio src="music.mp3" loop controls></audio>Автозапуск со звуком браузеры, как правило, блокируют: пока человек не нажал кнопку или не коснулся страницы, музыка не включится. Поэтому звук запускают по действию пользователя, а если музыка нужна сразу, её не включают сами, а показывают кнопку.
button.addEventListener("click", () => {
const audio = new Audio("music.mp3");
audio.loop = true;
audio.volume = 0.5;
audio.play();
});Пример: фоновый звук через audio
Кнопки включают звук по нажатию. Звук беззвучный, в рамке измеряются loop, volume и paused.
Частые ошибки с тегом bgsound
Почти все ошибки возникают оттого, что bgsound пытаются использовать как рабочий тег или переносят его привычки на audio.
| Ошибка | Что получится | Как исправить |
|---|---|---|
<bgsound src="music.mid"> и ожидание звука | Звука нет, файл даже не загружается | Записать <audio src="music.mp3" controls></audio> |
<audio autoplay>, чтобы музыка играла сразу | Браузер, как правило, блокирует звук до первого действия человека | Запускать звук по нажатию кнопки |
<audio volume="0.5"> по аналогии с bgsound | Такого атрибута у audio нет, громкость не меняется | Писать audio.volume = 0.5 в JavaScript |
