Собственный автономный аудиоплеер для сайта (uCoz и не только) - 02 Октября 2026 - Compannero Blog

Главная » » Собственный автономный аудиоплеер для сайта (uCoz и не только)

07:49

Собственный автономный аудиоплеер для сайта (uCoz и не только)

Стандартный элемент браузера <audio controls> сложно стилизовать, а популярные плагины часто тянут за собой громоздкие внешние библиотеки. Ниже представлен полностью автономный HTML/JS-виджет плеера, оптимизированный для модулей uCoz («Новости сайта», «Каталог статей», «Каталог файлов», «Блог»).

Преимущества решения:

Полная автономность: работает на чистом JavaScript (ES6), не конфликтует со встроенным в uCoz jQuery.
Чтение ID3-тегов: скрипт считывает название трека, исполнителя и встроенную обложку альбома прямо из MP3-файла.
Счетчики в браузере: прослушивания и скачивания фиксируются в localStorage посетителя.
Умный стоп: при старте одного плеера остальные треки на странице автоматически становятся на паузу.
Адаптивность: отлично выглядит как на смартфонах, так и на широкоформатных экранах.

Живой пример плеера

Загрузка...

WESTDE

0:00 0:00

Код для копирования

Скопируйте код ниже и вставьте в исходный код вашего материала или шаблона:

HTML + JS код плеера

<!-- ТАБЛИЦА С АУДИОПЛЕЕРОМ -->
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 10px 0; border-collapse: separate; border-spacing: 0; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.03);">
 <tbody>
 <tr>
 <td style="padding: 14px 16px; vertical-align: middle;">
 <div class="u-player" data-cover="ВАША_ССЫЛКА_НА_ОБЛОЖКУ" data-src="ВАША_ССЫЛКА_НА_MP3">
 <style type="text/css">
 .u-player { box-sizing: border-box; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #212529; }
 .u-player * { box-sizing: border-box; }
 .u-p-body { display: flex; gap: 14px; align-items: center; width: 100%; }
 .u-cover { width: 72px; height: 72px; min-width: 72px; max-width: 72px; min-height: 72px; max-height: 72px; background: #dee2e6; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #ced4da; border-radius: 4px; position: relative; }
 .u-cover img { width: 72px !important; height: 72px !important; max-width: 72px !important; max-height: 72px !important; object-fit: cover !important; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; }
 .u-info { flex: 1; min-width: 0; }
 .u-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
 .u-artist { font-size: 12px; color: #495057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
 .u-timeline { width: 100%; height: 6px; background: #ced4da; cursor: pointer; position: relative; border-radius: 3px; overflow: hidden; }
 .u-bar { height: 100%; width: 0%; background: #1b4332; transition: width 0.1s linear; }
 .u-time { display: flex; justify-content: space-between; font-size: 10px; color: #6c757d; margin-top: 4px; }
 .u-p-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #ced4da; gap: 8px; flex-wrap: wrap; width: 100%; }
 .u-btns { display: flex; gap: 8px; align-items: center; }
 .u-btn { height: 28px; background: #1b4332; color: #ffffff !important; border: none; padding: 0 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; text-decoration: none !important; border-radius: 3px; box-sizing: border-box; line-height: 1; transition: background 0.15s; }
 .u-btn:hover { background: #2d6a4f; color: #ffffff !important; }
 .u-btn-play { width: 28px; padding: 0; }
 .u-vol-box { display: inline-flex; align-items: center; gap: 4px; color: #1b4332; margin-left: 2px; }
 .u-vol-slider { width: 54px; height: 4px; -webkit-appearance: none; appearance: none; background: #ced4da; border-radius: 2px; outline: none; cursor: pointer; }
 .u-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #1b4332; cursor: pointer; }
 .u-vol-slider::-moz-range-thumb { width: 10px; height: 10px; border: none; border-radius: 50%; background: #1b4332; cursor: pointer; }
 .u-player a.u-dl-btn, .u-player a.u-dl-btn:link, .u-player a.u-dl-btn:visited, .u-player a.u-dl-btn:hover, .u-player a.u-dl-btn:active, .u-player a.u-dl-btn:focus { color: #ffffff !important; text-decoration: none !important; }
 .u-player a.u-dl-btn span, .u-player a.u-dl-btn svg { color: #ffffff !important; fill: #ffffff !important; }
 .u-stats { display: flex; gap: 12px; font-size: 11px; color: #495057; }
 .u-stats span { display: inline-flex; align-items: center; gap: 4px; }
 </style>

 <audio class="uAudio" preload="auto"> </audio>

 <div class="u-p-body">
 <div class="u-cover uCover">
 <svg class="uCoverIco" fill="#6c757d" height="32" viewBox="0 0 24 24" width="32"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
 <img alt="Cover" class="uCoverImg" src="" style="display:none;width:72px;height:72px;object-fit:cover;" />
 </div>

 <div class="u-info">
 <div class="u-title uTitle">Загрузка...</div>
 <div class="u-artist uArtist">WESTDE</div>
 <div class="u-timeline uTimeline">
 <div class="u-bar uBar"> </div>
 </div>
 <div class="u-time"><span class="uCur">0:00</span> <span class="uDur">0:00</span></div>
 </div>
 </div>

 <div class="u-p-footer">
 <div class="u-btns">
 <button class="u-btn u-btn-play uPlayBtn" title="Воспроизвести" type="button">
 <svg class="uPlayIco" fill="currentColor" height="14" viewBox="0 0 24 24" width="14"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
 </button>
 <a class="u-btn u-dl-btn uDlBtn" download="" href="#" style="color: #ffffff !important; text-decoration: none !important;" title="Скачать трек">
 <svg fill="#ffffff" height="12" style="fill: #ffffff !important;" viewBox="0 0 24 24" width="12"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg>
 <span style="color: #ffffff !important;">MP3</span>
 </a>
 <div class="u-vol-box" title="Громкость">
 <svg fill="currentColor" height="13" viewBox="0 0 24 24" width="13"><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"></path></svg>
 <input class="u-vol-slider uVolume" max="1" min="0" step="0.05" type="range" value="0.8" />
 </div>
 </div>

 <div class="u-stats">
 <span title="Прослушивания">
 <svg fill="currentColor" height="12" viewBox="0 0 24 24" width="12"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 10c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>
 <b class="uPlays">0</b>
 </span>
 <span title="Скачивания">
 <svg fill="currentColor" height="12" viewBox="0 0 24 24" width="12"><path d="M5 20h14v-2H5v2zM12 2L4.5 9.5h4V16h7V9.5h4L12 2z"></path></svg>
 <b class="uDls">0</b>
 </span>
 </div>
 </div>
 </div>

 <script>
 (function() {
 function initPlayers() {
 document.querySelectorAll('.u-player:not([data-inited])').forEach(function(root) {
 root.setAttribute('data-inited', 'true');
 var audio = root.querySelector('.uAudio');
 var playBtn = root.querySelector('.uPlayBtn');
 var playIco = root.querySelector('.uPlayIco');
 var bar = root.querySelector('.uBar');
 var timeline = root.querySelector('.uTimeline');
 var curEl = root.querySelector('.uCur');
 var durEl = root.querySelector('.uDur');
 var titleEl = root.querySelector('.uTitle');
 var artistEl = root.querySelector('.uArtist');
 var coverImg = root.querySelector('.uCoverImg');
 var coverIco = root.querySelector('.uCoverIco');
 var dlBtn = root.querySelector('.uDlBtn');
 var pCount = root.querySelector('.uPlays');
 var dCount = root.querySelector('.uDls');
 var volSlider = root.querySelector('.uVolume');

 var url = root.getAttribute('data-src');
 var fallbackCover = root.getAttribute('data-cover');

 if (fallbackCover && fallbackCover.trim() !== '') {
 coverImg.src = fallbackCover;
 coverImg.style.display = 'block';
 coverIco.style.display = 'none';
 coverImg.onerror = function() {
 coverImg.style.display = 'none';
 coverIco.style.display = 'block';
 };
 } else {
 coverImg.style.display = 'none';
 coverIco.style.display = 'block';
 }

 audio.src = url;
 audio.volume = volSlider ? parseFloat(volSlider.value) : 0.8;
 if (dlBtn) dlBtn.href = url;

 if (volSlider) {
 volSlider.addEventListener('input', function(e) {
 audio.volume = parseFloat(e.target.value);
 });
 }

 var defaultTitle = decodeURIComponent(url.split('/').pop().replace(/\\.mp3$/i, ''));
 titleEl.textContent = defaultTitle;

 var trackKey = 'u_stat_' + btoa(encodeURIComponent(url)).replace(/=/g, '').slice(-16);
 var st = JSON.parse(localStorage.getItem(trackKey) || '{"p":0,"d":0}');
 pCount.textContent = st.p;
 dCount.textContent = st.d;

 var fmt = function(s) {
 return (isNaN(s) || !isFinite(s)) ? "0:00" : Math.floor(s / 60) + ":" + ("0" + Math.floor(s % 60)).slice(-2);
 };

 var listened = false;
 playBtn.onclick = function() {
 if (audio.paused) {
 document.querySelectorAll('.u-player .uAudio').forEach(function(otherAudio) {
 if (otherAudio !== audio && !otherAudio.paused) {
 otherAudio.pause();
 }
 });
 audio.play();
 playIco.innerHTML = '<rect x="5" y="4" width="4" height="16"/><rect x="15" y="4" width="4" height="16"/>';
 if (!listened) {
 st.p++;
 listened = true;
 localStorage.setItem(trackKey, JSON.stringify(st));
 pCount.textContent = st.p;
 }
 } else {
 audio.pause();
 playIco.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"/>';
 }
 };

 audio.onpause = function() {
 playIco.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"/>';
 };

 audio.onplay = function() {
 playIco.innerHTML = '<rect x="5" y="4" width="4" height="16"/><rect x="15" y="4" width="4" height="16"/>';
 };

 audio.ontimeupdate = function() {
 if (audio.duration) {
 bar.style.width = ((audio.currentTime / audio.duration) * 100) + '%';
 curEl.textContent = fmt(audio.currentTime);
 }
 };

 audio.onloadedmetadata = function() {
 durEl.textContent = fmt(audio.duration);
 };

 audio.onended = function() {
 playIco.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"/>';
 bar.style.width = '0%';
 };

 timeline.onclick = function(e) {
 if (audio.duration) {
 audio.currentTime = ((e.clientX - timeline.getBoundingClientRect().left) / timeline.offsetWidth) * audio.duration;
 }
 };

 if (dlBtn) {
 dlBtn.onclick = function() {
 st.d++;
 localStorage.setItem(trackKey, JSON.stringify(st));
 dCount.textContent = st.d;
 };
 }

 function safeClean(s) {
 var out = '';
 for (var i = 0; i < s.length; i++) {
 var c = s.charCodeAt(i);
 if (c >= 32 && c !== 127 && c !== 65279 && c !== 65533) {
 out += s.charAt(i);
 }
 }
 return out.trim();
 }

 fetch(url)
 .then(function(r) { return r.blob(); })
 .then(function(blob) { return blob.slice(0, 1500000).arrayBuffer(); })
 .then(function(buf) {
 var v = new DataView(buf);
 if (v.getUint8(0) !== 73 || v.getUint8(1) !== 68 || v.getUint8(2) !== 51) return;
 var ver = v.getUint8(3);
 var tagSz = ((v.getUint8(6)&127)<<21) | ((v.getUint8(7)&127)<<14) | ((v.getUint8(8)&127)<<7) | (v.getUint8(9)&127);
 var lim = Math.min(tagSz + 10, buf.byteLength);
 var o = 10;
 while (o < lim - 10) {
 if (v.getUint8(o) === 0) break;
 var fid = String.fromCharCode(v.getUint8(o), v.getUint8(o+1), v.getUint8(o+2), v.getUint8(o+3));
 var fsz = (ver === 4)
 ? (((v.getUint8(o+4)&127)<<21) | ((v.getUint8(o+5)&127)<<14) | ((v.getUint8(o+6)&127)<<7) | (v.getUint8(o+7)&127))
 : ((v.getUint8(o+4)<<24) | (v.getUint8(o+5)<<16) | (v.getUint8(o+6)<<8) | v.getUint8(o+7));

 o += 10;
 if (fsz <= 0 || o + fsz > buf.byteLength) break;

 if (fid === "TIT2") {
 var enc = v.getUint8(o);
 var raw = new Uint8Array(buf, o + 1, fsz - 1);
 var txt = (enc === 1 || enc === 2) ? new TextDecoder('utf-16').decode(raw) : new TextDecoder('utf-8').decode(raw);
 txt = safeClean(txt);
 if (txt) titleEl.textContent = txt;
 }

 if (fid === "TPE1") {
 var enc = v.getUint8(o);
 var raw = new Uint8Array(buf, o + 1, fsz - 1);
 var txt = (enc === 1 || enc === 2) ? new TextDecoder('utf-16').decode(raw) : new TextDecoder('utf-8').decode(raw);
 txt = safeClean(txt);
 if (txt) artistEl.textContent = txt;
 }

 if (fid === "APIC" || fid === "PIC") {
 var u8 = new Uint8Array(buf, o, fsz);
 for (var i = 0; i < u8.length - 4; i++) {
 if ((u8[i] === 255 && u8[i+1] === 216 && u8[i+2] === 255) || (u8[i] === 137 && u8[i+1] === 80 && u8[i+2] === 78 && u8[i+3] === 71)) {
 var blobImg = new Blob([u8.slice(i)]);
 coverImg.src = URL.createObjectURL(blobImg);
 coverImg.style.display = 'block';
 coverIco.style.display = 'none';
 break;
 }
 }
 }
 o += fsz;
 }
 })
 .catch(function() {});
 });
 }

 if (document.readyState === 'loading') {
 document.addEventListener('DOMContentLoaded', initPlayers);
 } else {
 initPlayers();
 }
 })();
 </script>
 </td>
 </tr>
 </tbody>
</table>

Инструкция по настройке

В редакторе материала uCoz перейдите в режим «Источник» (или HTML).
Вставьте скопированный выше блок кода.
В строке <div class="u-player" data-cover="..." data-src="..."> укажите свои данные как на примере:
- data-src — прямая ссылка на аудиозапись (или переменная uCoz $FILE_URL$ ).
- data-cover — ссылка на фоновую обложку (или переменная $SCREEN_URL$ ).
Сохраните материал.

Обратите внимание: если MP3-файл загружен в файловый менеджер вашего uCoz-сайта, все метаданные (название, обложка) будут считываться без задержек. Если файл хранится на внешнем хостинге, убедитесь, что удалённый сервер поддерживает CORS (заголовок Access-Control-Allow-Origin: *).

Категория: WEB | Просмотров: 12 | Добавил: Compannero | Теги: плеер для сайта ucoz, веб разработка, плеер без jquery, vanilla js, скрипты для ucoz, аудиоплеер для сайта, html5 плеер, mp3 плеер, плеер ucoz, код плеера, html5 audio, автономный плеер, javascript плеер, id3 теги js, скрипт аудиоплеера | Рейтинг: 5.0/1

Всего комментариев: 0

Логин:
Пароль:

« Октябрь 2026 »
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31





Онлайн всего: 6 Гостей: 6 Пользователей: 0