🎵 Cider 4 OBS 🔴

Connect your Cider Client to OBS and show what you're listening to!

❗ Requirements

Open Broadcaster Software
Cider 2.5+
An Apple Music subscription (duh)

🛠 Setup

Setup Cider if you haven't done so already and open the settings. Go to "Connectivity" and scroll down all the way. Enable the Switch "WebSockets API". This isn't technically needed anymore, but it's good to have it enabled nevertheless.
Create a new Browser Source in OBS and set the URL to https://ryzetech.github.io/cider4obs/.
The source will spawn with a width of 800 by default. Resize it if necessary (my personal sweet spot is 400) and change the height to 170 or something like that.
The browser in OBS will now attempt to connect to Cider every five seconds and reestablish the connection if necessary!
If you want to customize how the app is looking, read below. Add the options into the Custom CSS box of OBS!

🎨 Customization & Settings

Unhappy with the way the app looks and behaves by default? You can change the settings with the "Custom CSS" box in the OBS browser source. I have compiled some examples below to just copy and change to your liking.

To pick colors, I recommend https://rgbacolorpicker.com/.

Box Customization

#content {
  /* change the background color with this: */
  background-color: rgba(69, 69, 69, 42);
  /* rgba($RED, $GREEN, $BLUE, $ALPHA)
      alpha = how transparent it is
  */
}

Text Customization

Customizable elements are span, #title, #artist, #album

/* to change the text color, do */
span {
  color: white;
  /* or: #ffffff; */
}

/* to make the title look neutral instead of bold, do: */
#title {
  font-weight: normal;
}

/* similar with the album name (pay attention to the attribute!) */
#album {
  font-style: normal;
}

/* you can even hide elements: */
#album {
  display: none;
}

Progress Bar

Customizable elements are #progressBg, #progressBar.

/* change the progress bar background like this: */
#progressBg {
  background-color: rgba(97, 97, 97, 0.45);
}

/* same goes with the bar itself: */
#progressBar {
  background-color: rgba(255, 0, 132, 1);
}

/* you can also make the progress bar thicker or thinner: */
#progressBar {
  height: 15px;
}

Settings

Some settings adjusting the behavior of certain elements.

body {
  /* general key unless stated otherwise: 1=on, 0=off */
  
  /* fade the box in and out depending on whether music is playing or not */
  --fade-on-stop: 1;

  /* how long playback must be paused in milliseconds until the box fades (if enabled) */
  --fade-delay: 1000;

  /* the box will fade out when Cider disconnects and appears on reconnecting */
  --fade-on-disconnect: 1;

  /* the delay in milliseconds after the player has disconnected until the box fades */
  --fade-disconnect-delay: 3000;
}

💜 Trusted by streamers

Thank you for supporting this project by using and spreading it! You are my heroes!

🥇 iamtheratio

Do you want to appear here? Open a new issue and outline your involvement. I'll be happy to add you here!

❤ Special Thanks

A list of entities I want to thank for supporting me in different ways!

Cider Collective
Thank you so much for giving me access to early builds, making change response much faster!

Aquasius
Thanks for the original idea, initial feedback, and the driving force to make this open source!

Issues, Ideas, Comments?

Tell me in the issues tab! <3 Don't have a GitHub account? Feel free to contact me on Discord, Telegram, or via Mail

ryzetech/cider4obs