ВБУДУЙТЕ 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 = 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> підтримує базову стилізацію.
Ні, ми не збираємо дані про те, де вбудовується наше радіо. Просто використовуйте код!