Как сделать звук на сайте в 2026: музыка, эффекты и озвучка

Звук на сайте это четыре разные задачи: фоновая музыка, эффекты у кнопок, плеер с треками или подкастом и озвучка текста голосом. Технически всё держится на теге <audio> и нескольких строках JavaScript, но есть условие, о которое разбивается половина задумок: браузер не даст включить звук сам, пока человек не сделает что-то на странице. Ниже рабочие схемы под каждую задачу, вес файлов и способы сгенерировать музыку и голос нейросетями.

Какой звук бывает на сайте

От того, что именно вы добавляете, зависят и способ, и вес страницы.

• Фоновая музыка. Зацикленный трек для настроения: сайт студии, портфолио фотографа, промо-страница мероприятия. Самый спорный вариант, потому что человек его не просил.
• Звуковые эффекты интерфейса. Щелчок при клике, сигнал при отправке формы, звук успеха после оплаты. Файлы крошечные, эффект заметный.
• Аудиоплеер и подкаст-блок. Человек сам нажимает play: демозаписи, аудиогид, выпуски подкаста. Ограничений почти нет, запуск идёт от пользователя.
• Озвучка текста. Кнопка «Прослушать статью» или голосовое приветствие: готовым файлом или синтезом речи в браузере.

Почему музыка не включается сама при заходе

Самая частая задумка звучит так: человек открывает страницу, и сразу играет трек. В 2026 году это не работает, и дело не в кривом коде. Браузеры намеренно блокируют автозапуск со звуком.

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

В Safari и других браузерах на WebKit логика похожая: видео без звуковой дорожки или с атрибутом muted запускается само, а как только звук появляется без действия пользователя, воспроизведение ставится на паузу (политика WebKit). Общее правило собрано в руководстве MDN по автозапуску: медиа со звуком играет, если оно приглушено, либо пользователь уже что-то нажал на сайте, либо сайт разрешён вручную.

Отсюда практический вывод: метод play() может не сработать. Он возвращает промис, который отклоняется с ошибкой NotAllowedError. Если это не обработать, у части посетителей звука не будет, а вы об этом не узнаете.

const audio = document.querySelector('#bg-music');
const btn = document.querySelector('#sound-btn');

audio.play().catch((err) => {
  if (err.name === 'NotAllowedError') {
    // браузер отказал: показываем кнопку включения звука
    btn.hidden = false;
  }
});

То же касается Web Audio API: звуковой контекст создаётся в состоянии suspended и оживает после действия пользователя. «Музыка с первой секунды» превращается в «музыка с первого клика», и это стоит заложить в дизайн.

Четыре рабочие схемы включения звука

Вместо попыток обмануть браузер используйте один из вариантов ниже. Все они честные и работают одинаково в Chrome, Safari и Firefox.

1. Кнопка звука в углу экрана. Иконка динамика в шапке: по клику музыка запускается, по второму выключается, громкость лучше сразу занизить (audio.volume = 0.3). Состояние сохраняйте в localStorage, чтобы при следующем заходе не навязывать звук заново.
2. Видео без звука как фон, звук по кнопке. Ролик с атрибутами muted и playsinline запускается сам, а рядом стоит кнопка «Включить звук», которая снимает приглушение. Сам приём мы разбирали в статье про фон сайта.
3. Звук после первого любого действия. Одноразовый слушатель на первый клик или касание, аудио запускается внутри него: формально это жест пользователя, и браузер разрешает воспроизведение. Приём годится для тихих эффектов, но не для громкой музыки.
4. Плеер, который запускает сам посетитель. Для подкаста, демозаписей и аудиогида это единственно верный вариант: ставите <audio controls> и не трогаете автозапуск вообще.

По теме: Как сделать сайт чёрным в 2026: тёмная тема, которая читается

Плеер, подкаст-блок и звуки кнопок

Плеер в простом виде это одна строка разметки. Атрибут controls рисует кнопки браузера, preload="none" запрещает качать файл до нажатия на play, а loop нужен только фоновому треку.

<audio id="podcast" controls preload="none">
  <source src="/audio/episode-01.m4a" type="audio/mp4">
  <source src="/audio/episode-01.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио.
</audio>

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

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

const click = new Audio('/audio/click.mp3');
click.volume = 0.4;

document.querySelectorAll('button').forEach((b) => {
  b.addEventListener('click', () => {
    click.currentTime = 0;
    click.play().catch(() => {});
  });
});

Звук стоит вешать на осмысленные события: отправку формы, успешную оплату, добавление в избранное. Щелчок на каждое движение мыши раздражает уже на второй минуте.

Формат, вес и скорость загрузки

Аудио легко превращает быструю страницу в медленную. Ориентиры простые.

• Формат. MP3 и AAC (в контейнере MP4) поддерживают все актуальные браузеры, это безопасный выбор по умолчанию. Opus сжимает лучше, но в Safari его поддержка ограничена, поэтому его ставят первым источником, а MP3 оставляют запасным (таблица кодеков MDN).
• Битрейт и вес. Для музыки хватает 128 kbps в MP3, это примерно мегабайт на минуту звучания. Речь остаётся разборчивой и на заметно меньшем битрейте.
• WAV на сайт не кладут. Формат несжатый, минута весит около десяти мегабайт. Он для монтажа, а не для отдачи посетителю.
• Ленивая загрузка. preload="none" на плеере, фоновый трек подгружается только после клика по кнопке звука. Пока человек не попросил звук, качать его незачем.

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

По теме: Как сделать карточку товара для сайта в 2026: каталог и ИИ

Доступность и случаи, когда звук вредит

Тут есть не только вкусовое, но и формальное требование. Критерий 1.4.2 стандарта WCAG: если аудио играет автоматически дольше трёх секунд, должен быть способ поставить его на паузу или отрегулировать громкость отдельно от системной (формулировка W3C). Причина простая: звук сайта перекрывает речь экранного диктора, которым пользуются незрячие посетители.

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

• Страницы, которые открывают с работы или в транспорте: внезапная музыка приводит к закрытию вкладки.
• Мобильный трафик на медленном интернете, где каждый мегабайт виден сразу.
• Страницы с формой: всё, что отвлекает от заполнения полей, снижает шанс получить заявку.
• Длинные тексты: фоновая музыка мешает читать, особенно если у человека уже играет что-то своё.

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

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

Где взять музыку, эффекты и голос: помощь нейросетей

Аудио больше не обязательно искать в стоках, нейросети закрывают все три задачи. Но у каждой есть нюанс с лицензией, и его лучше проверить до публикации.

• Музыка. Suno генерирует трек по описанию стиля и настроения. На бесплатном тарифе коммерческое использование не предусмотрено, права на созданные треки дают платные Pro и Premier (тарифы Suno). Для сайта компании это принципиально.
• Звуковые эффекты. ElevenLabs делает короткие звуки по описанию вроде «мягкий щелчок кнопки». В коммерческих проектах их можно использовать на платном аккаунте, бесплатный ограничен некоммерческими целями (генератор звуковых эффектов).
• Озвучка текста файлом. Для русской речи удобен Yandex SpeechKit: русские голоса, управление интонацией и паузами через SSML, оплата в рублях (документация сервиса). Результат сохраняете в MP3 и кладёте в обычный плеер.
• Озвучка прямо в браузере. Встроенный Web Speech API читает текст голосами операционной системы, без файлов и оплаты. Голос звучит роботизированно и отличается на Windows, Android и iPhone, зато подходит для кнопки «Прослушать».

Сам код обвязки удобно писать вместе с ИИ-помощником: задача типовая, и модель делает её с первого раза, если перечислить все условия.

Добавь на страницу кнопку включения фоновой музыки.
Условия:
- файл /audio/theme.mp3, зациклен, громкость 0.3;
- по умолчанию звук выключен, запуск только по клику;
- кнопка переключает вкл/выкл и меняет иконку;
- выбор сохраняется в localStorage и применяется при следующем заходе;
- если play() отклонён с NotAllowedError, кнопка остаётся в положении «выключено»;
- кнопка доступна с клавиатуры и имеет подпись для экранного диктора.

Если самого сайта ещё нет, порядок сборки от структуры до публикации разобран в руководстве о том, как сделать сайт с помощью ИИ, а вариант, где звук становится смыслом проекта, мы собирали в статье про музыкальный сайт с плеером и афишей.

Частые вопросы

Можно ли всё-таки сделать, чтобы музыка играла сразу при входе?

Нет. Браузеры разрешают автозапуск только приглушённого медиа, а со звуком требуют действия пользователя. Максимум, что доступно: видео без звука на фоне и заметная кнопка включения звука рядом.

Как сделать кнопку «Прослушать статью»?

Два пути. Быстрый: Web Speech API, читает текст голосом системы, ничего не хранится. Качественный: заранее озвучить текст в сервисе синтеза речи, сохранить MP3 и подключить обычным плеером. Второй вариант звучит приятнее, но требует переозвучки при каждой правке текста.

Нужны ли права на музыку, если её сгенерировала нейросеть?

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