---

UnikPlayer

Музыкальный виджет для OBS, который показывает текущий трек с любого приложения на вашем устройстве

---

output.mp4

Возможности

• Универсальный захват — работает с любым музыкальным приложением (Spotify, Яндекс.Музыка, VK Music, браузер и др.)
• Интеграция с OBS — готовый виджет для стримов
• Кастомизация — настройка внешнего вида под ваш стиль
• Лёгкий — минимальное потребление ресурсов
• Авто-обновление — автоматическое определение смены трека

---

Вариации плееров

---

Требования для разработки

Системные требования

• Windows 10/11 (x64)
• .NET 9 SDK
• Node.js 18+

Зависимости

Frontend (Svelte/SvelteKit):

cd frontend
npm install

Backend (C#/.NET 9): Зависимости устанавливаются автоматически при сборке через NuGet:

• Dubya.WindowsMediaController - для работы с Windows SMTC
• System.Text.Json - сериализация JSON

---

Разработка

Dev Mode

В dev mode данные хранятся локально в dev-data/ вместо %LOCALAPPDATA%\UnikPlayer\.

Настройка:

# Скопировать .env.example в .env (уже сделано по умолчанию)
cp backend-csharp/UnikPlayer/.env.example backend-csharp/UnikPlayer/.env

.env конфигурация:

DEV_MODE=true              # true = локальные пути, false = %LOCALAPPDATA%
DEV_DATA_DIR=../../dev-data  # Путь к dev данным

Структура dev-data:

dev-data/
├── player-styles.json    # Настройки плееров (цвет, шрифт)
└── css/
    ├── BackPicture.css   # CSS для каждого плеера
    ├── BigHead.css
    ├── Generic.css
    ├── Separate.css
    └── Square.css

Быстрый старт

Терминал 1 - Backend (C#):

cd backend-csharp/UnikPlayer
dotnet run

Запустится HTTP сервер на http://localhost:27272 и WebSocket на ws://localhost:62727

Терминал 2 - Frontend (с hot reload):

cd frontend
npm run dev

Запустится dev сервер на http://localhost:5173

Порты

Сервис	Порт
HTTP (статика)	27272
WebSocket	62727
Vite Dev Server	5173

---

CSS Кастомизация

Каждый плеер имеет свой CSS файл в dev-data/css/ (dev) или %LOCALAPPDATA%\UnikPlayer\css\ (prod).

Важно: стилизация текста

Для стилизации текста используйте .className * вместо просто .className:

/* ❌ Неправильно - не сработает */
.title {
  font-size: 2rem;
}

/* ✅ Правильно - marquee создаёт дочерние элементы */
.title * {
  font-size: 2rem;
  color: var(--lightVibrant);
}

CSS переменные цветов

Доступны переменные из обложки альбома (или статический цвет):

Переменная	Описание
var(--vibrant)	Основной яркий цвет
var(--lightVibrant)	Светлый яркий
var(--darkVibrant)	Тёмный яркий
var(--muted)	Приглушённый
var(--lightMuted)	Светлый приглушённый
var(--darkMuted)	Тёмный приглушённый (фон)

Структура плееров

Плеер	Классы
Generic	.mainDiv > .picDiv > .pic + .textDiv > .title * + .artist *
BigHead	.mainDiv > .picDiv > .pic + .textDiv > .title * + .artist *
Square	.mainDiv > .mainDivGlow + .textDiv > .blurDiv + .title * + .artist *
Separate	.mainDiv > .picDiv + .textDiv > .titleDiv > .title * + .artistDiv > .artist *
BackPicture	.mainDiv > .mainDivGlow + .textDiv > .blurDiv + .title * + .artist *

---

Полная сборка до установщика:

npm run build:all

1. Сборка Frontend

cd frontend && npm run build && cd ..

2. Сборка C# Backend

cd backend-csharp/UnikPlayer
dotnet publish -c Release
cd ../..

3. Сборка инсталлера NSIS Installer

makensis projBuild/installer.nsi

1. Сборка Frontend

cd frontend
npm run build

Результат: статические файлы в папке frontBuild/

2. Сборка Backend (Release)

cd backend-csharp/UnikPlayer
dotnet publish -c Release -r win-x64 --self-contained true -p:PublishSingleFile=true

Результат: bin/Release/net9.0-windows10.0.17763.0/win-x64/publish/UnikPlayer.exe

Технологии

Компонент	Технология
Frontend	SvelteKit 2, Vite 7
Backend	C# / .NET 9
SMTC	Dubya.WindowsMediaController
Стили	SCSS, Flowbite

---

Структура проекта

unikPlayer/
├── backend-csharp/     # C# backend (основной)
│   └── UnikPlayer/
│       ├── Program.cs
│       └── UnikPlayer.csproj
├── frontend/           # Svelte frontend
│   ├── src/
│   │   ├── lib/
│   │   │   ├── players/      # Компоненты плееров
│   │   │   ├── stores/       # Svelte stores
│   │   │   └── ws.js         # WebSocket клиент
│   │   └── routes/
│   └── package.json
├── frontBuild/         # Собранный фронтенд
├── projBuild/          # Файлы для сборки установщика
└── README.md

---

Лицензия

This project is open source and available under the WTFPL.

Оффтоп

Работал над этим проектом исключительно потому, что не нашел плеера для себя. мне не нравились дизайны, которые уже есть и к тому же, они все работали лишь на одно приложение(только на ютуб музыку, только на браузер, только на спотифай). я хотел сделать ОДНУ программу, которая будет позволять захватывать звук с любого приложения и показывать его на стриме. чтобы дизайн можно было настроить для себя, под свои хотелки, А У КАЖДОГО ОНИ СВОИ! вы прикиньте? тематика стримов у всех разная и то, что сейчас есть на рынке плееров явно не будет нормально подходить под нужны каждого. Надеюсь, этот плеер и его идея понравится кому то кроме меня в комунити =D. буду рад, если поможете мне еще распространить.