Яндекс Музыка виджет для OBS

Инструкция по установке и использованию

Привет! Ниже описано, как запустить виджет.
Это обычный HTML/JS-проект без использования Node.js или других сборщиков — можно открыть в OBS как «Browser Source» или на любом локальном/внешнем сервере.

Что делает проект?

1. Подключается к нашему публичному API (pulsesync.dev/api/v1/), чтобы узнавать, какая композиция играет.
2. Отображает карточку с обложкой, названием трека, исполнителем, статусом (playing и т.д.).

Как получить доступ к публичному API?

1. Оформите подписку на Boosty.to/evt за символические 30 рублей.
2. После покупки вам придёт сообщение с инструкцией:

   "Здравствуйте и спасибо за подписку!
    Привяжите ваш Discord аккаунт в настройках Boosty:
    https://boosty.to/app/settings/external-apps
    
    После этого зайдите на сервер:
    https://discord.com/invite/pulsesync
    и бот выдаст вам роль бета-тестера (в течение 15 минут).
    
    Если роли не появились, обратитесь к администраторам.
    Если у вас была старая версия программы, пожалуйста, сделайте репатч.
    Приятного пользования!"
   

3. Получите роль бета-тестера на сервере Discord.
4. Зарегистрируйтесь в приложении, затем в Discord боте используйте команду /create-api-key (или если забыли — /get-api-key).
5. Скопируйте свой токен и вставьте его в api.js, там, где переменная API_KEY.

Структура файлов

├─ designs
│   └─ EvT (Pulsma)
│       ├─ color.js
│       ├─ default.png
│       ├─ index.html
│       ├─ main.js
│       ├─ style.css
│       └─ textAnimation.js
└─api.js

В качестве примера я хотел бы привести свою реализацию темы «EvT (Pulsma)».

• api.js
  Здесь лежит функция fetchTrackStatusFromApi() и ваш API_KEY.
• color.js
  Код, который определяет цвет обложки (через canvas), и при необходимости притемняет его.
• textAnimation.js
  «Матрица»-анимация (или любая другая), которая постепенно «пропечатывает» финальный текст.
• index.html
  Основная страница с разметкой. В неё подключаются все скрипты и стили.
• style.css
  Можно вынести сюда общую стилистику карточки.
• main.js
  Общая логика анимации (slideOut/slideIn), работа с DOM (обложка, текст), вызов api.js и т.д.
• default.png
  «Заглушка» для обложки.

Запуск в OBS (или где угодно)

1. Откройте OBS и добавьте Browser Source.
2. Укажите путь к index.html (например, file:///C:/Project/designs/EvT%20(Pulsma)/index.html) или локальный/внешний сервер.
3. Отрегулируйте размер.
4. Готово! Карточка будет обновляться и показывать текущий трек с анимацией.

Свой дизайн?

Мы приветствуем разные стили оформления!
Если у вас есть идеи — сделайте свой вариант, создайте Pull Request в этот репозиторий, и мы добавим новую тему в папку designs/.
Пример ветки:

designs/
  EvT (Pulsma)/
    color.js
    default.png
    index.html
    main.js
    style.css
    textAnimation.js

Вы можете назвать свою папку как угодно, например:

designs/
  MyChinazisDesign/
    color.js
    ...

Контакты

• Наш Discord-сервер.
• Boosty для оформления подписки.

Если возникнут вопросы или что-то не работает — спрашивайте на Discord-сервере.

---

Бай бай!