<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Радио СИТИ</title>
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<!-- Yandex.RTB -->
<script>window.yaContextCb=window.yaContextCb||[]</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function(m,e,t,r,i,k,a){
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=104026025', 'ym');
ym(104026025, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/104026025" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<style>
body { max-width:100%;background:#ffdd00;text-align:center;margin:10px 0 0;padding:0;}
.player-container {
width: 320px;
height: 150px;
background: #ffdd00;
border: 2px solid white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: flex;
padding: 15px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
.logo-container {
width: 100px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.logo {
max-width: 140px;
max-height: 140px;
object-fit: contain;
}
.content-container {
flex: 1;
display: flex;
flex-direction: column;
}
.now-playing {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
color: #333;
align-self: center;
}
.track-info {
margin-bottom: 15px;
}
.artist {
font-size: 14px;
font-weight: bold;
margin-bottom: 3px;
text-align: -webkit-center;
}
.title {
font-size: 14px;
font-style: italic;
text-align: -webkit-center;
}
.controls {
display: flex;
align-items: center;
margin-top: -10px;
}
#playButton {
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 44px;
height: 44px;
transition: transform 0.1s;
margin-right: 15px;
}
#playButton:active {
transform: scale(0.95);
}
#playButton svg {
width: 100%;
height: 100%;
}
.pause-icon {
display: none;
}
.playing .play-icon {
display: none;
}
.playing .pause-icon {
display: block;
}
.play-icon {
fill: #0d3959;
}
.pause-icon {
fill: #0d3959;
}
.volume-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.volume-slider-container {
flex-grow: 1;
position: relative;
height: 24px;
display: flex;
align-items: center;
}
#volumeSlider {
width: 100%;
height: 4px;
margin: 0;
padding: 0;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ddd;
border-radius: 2px;
outline: none;
transition: background 0.2s;
}
#volumeSlider::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background: #ddd;
border-radius: 2px;
border: none;
}
#volumeSlider::-moz-range-track {
width: 100%;
height: 4px;
background: #ddd;
border-radius: 2px;
border: none;
}
#volumeSlider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
margin-top: -6px;
background: #0d3959;
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.1s, box-shadow 0.1s;
}
#volumeSlider::-moz-range-thumb {
width: 16px;
height: 16px;
background: #0d3959;
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.1s, box-shadow 0.1s;
}
#volumeSlider:hover {
background: #ccc;
}
#volumeSlider:hover::-webkit-slider-runnable-track {
background: #ccc;
}
#volumeSlider:hover::-moz-range-track {
background: #ccc;
}
#volumeSlider:active::-webkit-slider-thumb {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
#volumeSlider:active::-moz-range-thumb {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.volume-button {
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 34px;
height: 34px;
transition: transform 0.1s;
}
.volume-button:active {
transform: scale(0.9);
}
.volume-button svg {
width: 100%;
height: 100%;
fill: #666;
}
</style>
</head>
<body>
<div class="player-container">
<div class="logo-container">
<img src="https://radiocityonline.ru/logo.png" alt="Радио СИТИ" class="logo">
</div>
<div class="content-container">
<div class="now-playing">Сейчас в эфире:</div>
<div class="track-info">
<div class="artist" id="artistInfo">Нажмите PLAY</div>
<div class="title" id="titleInfo"></div>
</div>
<div class="controls">
<button id="playButton">
<svg class="play-icon" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
<svg class="pause-icon" viewBox="0 0 24 24">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
</svg>
</button>
<div class="volume-control">
<button class="volume-button" id="muteButton">
<svg viewBox="0 0 24 24">
</svg>
</button>
<div class="volume-slider-container">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.9">
</div>
<button class="volume-button" id="maxVolumeButton">
<svg viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<audio id="audioPlayer" preload="none" controls style="display: none;"></audio>
<script>
document.addEventListener('DOMContentLoaded', () => {
const audioElement = document.getElementById('audioPlayer');
const playButton = document.getElementById('playButton');
const volumeSlider = document.getElementById('volumeSlider');
const muteButton = document.getElementById('muteButton');
const maxVolumeButton = document.getElementById('maxVolumeButton');
const artistInfo = document.getElementById('artistInfo');
const titleInfo = document.getElementById('titleInfo');
// !!! ВАЖНО: Замените эту ссылку на URL вашего Icecast потока !!!
// Обычно это адрес сервера и порт, например http://your.server:8000/stream
const streamUrl = 'https://online.100i6fm.ru/city';
let isPlaying = false;
let lastVolume = 0.9;
audioElement.src = streamUrl;
audioElement.volume = volumeSlider.value;
updateVolumeIcons(audioElement.volume);
async function updateTrackInfo() {
try {
const response = await fetch('https://www.100i6fm.ru/cur_playing.txt', { cache: 'no-store' });
const text = await response.text();
const separatorIndex = text.indexOf(' - ');
let artist = '';
let title = '';
if (separatorIndex !== -1) {
artist = text.substring(0, separatorIndex).trim();
title = text.substring(separatorIndex + 3).trim();
}
artistInfo.textContent = artist || 'Радио СИТИ';
titleInfo.textContent = title || '';
} catch (error) {
console.error('Ошибка загрузки информации о треке:', error);
artistInfo.textContent = 'Радио СИТИ';
titleInfo.textContent = '';
}
}
playButton.addEventListener('click', () => {
if (isPlaying) {
audioElement.pause();
} else {
// Для live-потоков .load() помогает переподключиться, если соединение было потеряно
audioElement.load();
audioElement.play().catch(error => {
console.error('Ошибка воспроизведения:', error);
artistInfo.textContent = 'Ошибка, нажмите PLAY';
});
}
});
audioElement.addEventListener('play', () => {
isPlaying = true;
playButton.classList.add('playing');
});
audioElement.addEventListener('pause', () => {
isPlaying = false;
playButton.classList.remove('playing');
});
audioElement.addEventListener('error', (e) => {
console.error('Ошибка аудио элемента:', e);
artistInfo.textContent = 'Ошибка потока';
titleInfo.textContent = 'Проверьте соединение';
isPlaying = false;
playButton.classList.remove('playing');
});
volumeSlider.addEventListener('input', () => {
const volume = parseFloat(volumeSlider.value);
audioElement.volume = volume;
updateVolumeIcons(volume);
if (volume > 0) lastVolume = volume;
});
muteButton.addEventListener('click', () => {
if (audioElement.volume > 0) {
lastVolume = audioElement.volume;
audioElement.volume = 0;
volumeSlider.value = 0;
} else {
audioElement.volume = lastVolume;
volumeSlider.value = lastVolume;
}
updateVolumeIcons(audioElement.volume);
});
maxVolumeButton.addEventListener('click', () => {
audioElement.volume = 1;
volumeSlider.value = 1;
lastVolume = 1;
updateVolumeIcons(1);
});
function updateVolumeIcons(volume) {
const muteIcon = muteButton.querySelector('svg');
if (volume === 0) {
muteIcon.innerHTML = '<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>';
} else {
muteIcon.innerHTML = '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>';
}
}
updateTrackInfo();
setInterval(updateTrackInfo, 20000);
});
</script>
<!-- Yandex.RTB R-A-17101199-1 -->
<div id="yandex_rtb_R-A-17101199-1"></div>
<script>
window.yaContextCb.push(() => {
Ya.Context.AdvManager.render({
"blockId": "R-A-17101199-1",
"renderTo": "yandex_rtb_R-A-17101199-1"
})
})
</script>
</body>
</html>