ВБУДУЙТЕ SRIBNE FM НА СВІЙ САЙТ

Три простих способи — просто скопіюйте код і вставте на свою сторінку.

Економна якість (64 kbps)

Мінімальні вимоги до трафіку

<audio controls style="width: 100%; height: 40px;">
    <source src="https://on.sribne.com:1055/stream" type="audio/mpeg">
</audio>

Стандартна якість (128 kbps)

Оптимальний баланс якості та трафіку

<audio controls style="width: 100%; height: 40px;">
    <source src="https://on.sribne.com:1065/stream" type="audio/mpeg">
</audio>

Високої якості (320 kbps)

Найкраща якість звуку

<audio controls style="width: 100%; height: 40px;">
    <source src="https://on.sribne.com:1075/stream" type="audio/mpeg">
</audio>

Блок інформації про пісню

Показуйте поточну пісню з обкладинкою (опціонально)

Обкладинка

Завантаження...

<!-- HTML блок -->
<div id="sribne_song" style="text-align: center;">
    <picture>
        <source id="sribne_song_thumb_webp" type="image/webp">
        <img id="sribne_song_thumb" src="" alt="Обкладинка" style="max-width: 100px;"> <!-- Максимум 640px або 100% -->
    </picture>
    <p id="sribne_song_name"></p>
</div>

<!-- JS скрипт -->
<script src="https://sribne.com/assets/js/embed-song.js"></script>
<div id="sribne_song" style="text-align: center;">
    <picture>
        <source id="sribne_song_thumb_webp" type="image/webp">
        <img id="sribne_song_thumb" alt="Обкладинка">
    </picture>
</div>

<script src="https://sribne.com/assets/js/embed-song.js"></script>
<div id="sribne_song">
    <p id="sribne_song_name"></p>
</div>

<script src="https://sribne.com/assets/js/embed-song.js"></script>

Для розробників

Розклад передач у машинному форматі

Готові XML і JSON дані для інтеграції, імпорту або автоматичних перевірок.

XML feed
https://sribne.com/assets/xml/program.xml
Відкрити XML
JSON feed
https://sribne.com/assets/json/program.json
Відкрити JSON
$xml = simplexml_load_file('https://sribne.com/assets/xml/program.xml');

if ($xml === false) {
    exit('XML feed not available');
}

foreach ($xml->xpath('//s:programme') as $program) {
    $title = (string) $program->title;
    $start = (string) $program->time['time'];
    echo $title ' — ' . $start . PHP_EOL;
}
const response = await fetch('https://sribne.com/assets/xml/program.xml');
const xmlText = await response.text();
const parser = new DOMParser();
const xml = parser.parseFromString(xmlText, 'application/xml');

xml.querySelectorAll('programme').forEach((item) => {
  console.log(item.querySelector('title')?.textContent);
});
$data = json_decode(file_get_contents('https://sribne.com/assets/json/program.json'), true);

foreach ($data as $day) {
    echo $day['date'] . ' - ' . $day['day'] . PHP_EOL;
    foreach ($day['items'] as $item) {
        echo $item['title'] . ' — ' . $item['start'] . PHP_EOL;
    }
}
async function loadSchedule() {
  const response = await fetch('https://sribne.com/assets/json/program.json');
  const data = await response.json();

  data.forEach(day => {
    console.log(day.date, day.day);
    day.items.forEach(item => {
      console.log(item.title, item.start, item.end);
    });
  });
}

loadSchedule();
// HTTP: libcurl, XML: tinyxml2
#include <curl/curl.h>
#include <tinyxml2.h>

size_t writeCallback(void* data, size_t size, size_t count, void* userData) {
    auto* xml = static_cast<std::string*>(userData);
    xml->append(static_cast<char*>(data), size * count);
    return size * count;
}

CURL* curl = curl_easy_init();
std::string xmlText;
curl_easy_setopt(curl, CURLOPT_URL, "https://sribne.com/assets/xml/program.xml");
curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, writeCallback);
curl_easy_setopt(curl, CURLOPT_WRITEDATA, &xmlText);
curl_easy_perform(curl);
curl_easy_cleanup(curl);

tinyxml2::XMLDocument doc;
doc.Parse(xmlText.c_str());
for (auto* item = doc.FirstChildElement("programme");
     item;
     item = item->NextSiblingElement("programme")) {
    std::cout << item->FirstChildElement("title")->GetText() << std::endl;
}
import { useEffect, useState } from 'react';

export default function Schedule() {
    const [days, setDays] = useState([]);

    useEffect(() => {
        fetch('https://sribne.com/assets/json/program.json')
            .then(response => response.json())
            .then(setDays);
    }, []);

    return (
        <ul>
            {days.map(day => <li key={day.date}>{day.day}</li>)}
        </ul>
    );
}
// HTTP: libcurl, JSON: nlohmann/json
#include <curl/curl.h>
#include <nlohmann/json.hpp>

using json = nlohmann::json;

size_t writeCallback(void* data, size_t size, size_t count, void* userData) {
    auto* response = static_cast<std::string*>(userData);
    response->append(static_cast<char*>(data), size * count);
    return size * count;
}

CURL* curl = curl_easy_init();
std::string body;
curl_easy_setopt(curl, CURLOPT_URL, "https://sribne.com/assets/json/program.json");
curl_easy_setopt(curl, CURLOPT_WRITEFUNCTION, writeCallback);
curl_easy_setopt(curl, CURLOPT_WRITEDATA, &body);
curl_easy_perform(curl);
curl_easy_cleanup(curl);

for (const auto& day : json::parse(body)) {
    std::cout << day["date"] << std::endl;
}
import { useEffect, useState } from 'react';

export default function XmlSchedule() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch('https://sribne.com/assets/xml/program.xml')
            .then(response => response.text())
            .then(xmlText => {
                const xml = new DOMParser().parseFromString(xmlText, 'application/xml');
                setItems([...xml.querySelectorAll('programme')]);
            });
    }, []);

    return <ul>{items.map(item => <li>{item.querySelector('title')?.textContent}</li>)}</ul>;
}

Чому Sribne FM?

Легко вбудовується

Просто скопіюйте код — не потрібні складні налаштування або розробники.

Працює скрізь

На мобільних, планшетах, ПК — це звичайний <audio> HTML5 елемент.

Без відслідкування

Ми не збираємо дані про ваш сайт. Тільки чистий стрім!

Часті питання

64 kbps — якщо трафік обмежений.

128 kbps — оптимальний вибір для більшості сайтів.

320 kbps — якщо вам потрібна найкраща якість.

Так, HTML5 <audio> повністю сумісний з мобільними браузерами (iOS, Android).

Так! Використовуйте CSS для налаштування розмірів, кольорів та шрифтів. Звичайний <audio controls> підтримує базову стилізацію.

Ні, ми не збираємо дані про те, де вбудовується наше радіо. Просто використовуйте код!