Проще всего установить радио на сайт через HTML5-тег <audio>: берёте прямую ссылку на поток станции (обязательно https), вставляете её в код страницы, и посетитель слушает эфир во встроенном плеере браузера. Если нужен готовый дизайн и список станций, подойдёт виджет радиосервиса, а на WordPress хватит стандартного блока «Аудио» или HTML-блока без отдельных плагинов.
Какие способы есть сейчас
Раньше радиоплееры на сайтах делали на Flash. Flash Player официально закрыт с конца 2020 года и современными браузерами не поддерживается, поэтому старые коды с файлами .swf уже не заработают. Сегодня выбирают один из трёх путей.
- Свой HTML5-плеер. Несколько строк кода, никаких сторонних скриптов, полный контроль над внешним видом.
- Виджет радиосервиса или самой станции. Многие радиостанции и каталоги дают готовый код для вставки: кнопка, мини-плеер или окно со списком станций.
- Плагин для CMS. Удобно, если нужен плейлист из нескольких станций и настройки в админке, но каждый плагин добавляет скрипты и стили на все страницы.
| Способ | Плюсы | Минусы |
|---|---|---|
| HTML5 <audio> | Быстро грузится, работает на телефонах, нет чужих скриптов | Нужно найти прямую ссылку на поток |
| Виджет сервиса | Готовый дизайн, выбор станций | Внешний код, реклама или ссылки сервиса, может перестать работать |
| Плагин CMS | Настройки в админке, плейлисты | Лишняя нагрузка, нужны обновления |
Где взять ссылку на поток радиостанции
Поток — это адрес, по которому сервер станции непрерывно отдаёт звук. Обычно он выглядит как ссылка с портом или окончанием вроде /stream, /live, .mp3, .aac. Найти его можно так:
- Зайдите на официальный сайт станции и поищите раздел «Слушать в плеере», «Потоки» или «Для разработчиков». Многие станции публикуют ссылки для VLC, AIMP и других плееров.
- Если такого раздела нет, откройте онлайн-плеер станции, нажмите F12, перейдите во вкладку «Сеть» (Network) и включите воспроизведение. В списке запросов появится постоянно растущий файл — это и есть поток. Скопируйте его адрес.
- Проверьте ссылку: вставьте её в адресную строку браузера. Если звук пошёл, поток рабочий.
Важный момент: сайт на HTTPS не воспроизведёт поток по HTTP. Браузер заблокирует его как смешанный контент, и плеер останется немым. Ищите вариант ссылки, начинающийся с https://.
Готовый код HTML5-плеера
Минимальный вариант вставляется в любое место страницы:
<audio controls preload="none" src="https://адрес-потока/stream">Ваш браузер не поддерживает аудио</audio>
- controls — показывает кнопки воспроизведения и громкости.
- preload=»none» — поток не начинает качаться, пока посетитель не нажмёт «Играть». Это экономит трафик и не замедляет загрузку страницы.
- Текст внутри тега увидят только владельцы очень старых браузеров.
Если у станции есть потоки в разных форматах, укажите несколько источников через вложенные теги <source> с атрибутами src и type (например, audio/mpeg для MP3 и audio/aac для AAC). Браузер возьмёт первый, который умеет играть.
Свой стиль плеера
Стандартный плеер в каждом браузере выглядит по-своему. Чтобы сделать единый вид, скройте атрибут controls и добавьте свою кнопку, которая через JavaScript вызывает audio.play() и audio.pause(). Для ширины встроенного плеера достаточно CSS: audio{width:100%;max-width:400px} — так он не вылезет за край экрана на телефоне.
Почему радио не включается само
Chrome, Firefox, Safari и мобильные браузеры блокируют автозапуск звука, пока посетитель не взаимодействовал со страницей. Атрибут autoplay для радио почти всегда бесполезен, а там, где срабатывает, раздражает людей. Оставьте запуск по кнопке.
Как добавить радио на WordPress
В редакторе блоков есть два варианта без плагинов:
- Блок «Аудио»: нажмите «Вставить по ссылке» и укажите адрес потока. Часть потоков так работает, но не все, потому что блок рассчитан на обычные файлы.
- Блок «Произвольный HTML»: вставьте код с тегом
<audio>из примера выше. Это самый надёжный способ.
Чтобы плеер был на всех страницах, добавьте блок «Произвольный HTML» в боковую колонку или подвал: в блочных темах через «Внешний вид» → «Редактор» → «Шаблоны» или «Части шаблона», в классических — через «Внешний вид» → «Виджеты». Плагины имеет смысл ставить, только если нужен плейлист из многих станций; выбирайте те, что недавно обновлялись и совместимы с вашей версией WordPress.
Виджеты радиосервисов
Каталоги онлайн-радио и сами станции часто дают конструктор: выбираете станцию, размер и цвет, копируете HTML-код. Перед установкой проверьте несколько вещей:
- Код подключается по HTTPS и не ломает вёрстку на ширине 360 пикселей.
- Плеер играет прямо на странице, а не открывает новую вкладку: иначе посетитель уходит с сайта.
- В коде нет скрытых ссылок, лишних счётчиков и рекламы, которую вы не хотите показывать.
- Сервис живой: старые конструкторы со временем закрываются, и вместо плеера остаётся пустое место. Время от времени проверяйте, что эфир идёт.
Если виджет грузит тяжёлый скрипт, вставляйте его только на нужную страницу, а не во все шаблоны сайта: так не пострадает скорость остальных страниц.
Права на трансляцию
Встраивая чужой эфир, вы ретранслируете контент станции. Безопаснее всего использовать официальные виджеты и ссылки, которые станция сама публикует для внешних плееров, и не выдавать эфир за свой. Если хотите запустить собственное радио с музыкой, понадобятся лицензии на публичное исполнение; без них лучше ограничиться речевым контентом, своими записями или музыкой со свободной лицензией.
Частые вопросы
Замедлит ли радио загрузку сайта
Тег <audio> с preload="none" практически не влияет на скорость: поток начинает загружаться только после нажатия кнопки. Сторонние виджеты и плагины могут добавить заметный вес, поэтому проверьте страницу в PageSpeed Insights до и после установки.
Почему плеер есть, а звука нет
Чаще всего поток идёт по HTTP на сайте с HTTPS, ссылка устарела или станция сменила адрес. Откройте ссылку на поток отдельно в браузере и посмотрите ошибки во вкладке «Консоль» инструментов разработчика.
Можно ли сделать выбор из нескольких станций
Да. Сделайте список кнопок, каждая из которых через JavaScript подставляет в плеер свой адрес потока и запускает воспроизведение. Либо используйте виджет каталога или плагин с плейлистом.
Будет ли радио играть на телефоне
HTML5-плеер работает в мобильных браузерах на Android и iOS. Запуск только по нажатию, а при блокировке экрана воспроизведение может остановиться — это зависит от браузера и настроек телефона.