A Widget overlay compatible with OBS (28.0.1 and newer) that shows the current song with album artwork and difficulty/source icon being played on Yet Another Rhythm Game.
-
Download and extract this repository. You can do by clicking here.
-
Copy where the
currentSong.json
is stored.2.1. Open YARG
2.2. Go to Settings
2.3. In File Managment Section, click
Copy Current Song JSON File Path
-
On the extracted widget folder, go to
settings
folder, openCurrentSongFilePath.txt
with a text or code editor, paste inside and save it. -
Create a new Browser Source on your OBS.
- On the browser settings, mark "Local file", and locate the extracted widget folder and select
YARG Widget.html
- Set the width as
1920
and height as260
. If it's too big, you can resize the widget on your canvas after you add it.
- On the browser settings, mark "Local file", and locate the extracted widget folder and select
DisplaySmallIcon.txt
- Change small icon beside the rim.Instrument.txt
- Change current instrument.TextAlignment.txt
- Change text position.LastFmAPIKey.txt
- Use Last.fm as a fallback when album art isn't available on chart.PlayingOBSSceneName.txt
- Change OBS Scene to Playing Scene when song is playing.NotPlayingOBSSceneName.txt
- Change OBS Scene to Not Playing/Song Select Scene when song is not being played.
-
On the extracted widget folder, go to
settings
folder, and openDisplaySmallIcon.txt
with a text or code editor. -
Place what you want to display on the small icon and save it.
Available icons: (not case-sensitive)
instrument
(default) - will show the instrument being played along with the difficulty ring.
source
- will show the icon for the chart source. (grabbed from YARC-Official/OpenSource)
none
- will not show anything on the small icon.
As for now, the widget isn't able to detect what instrument is being played. In case you're playing an instrument that's not Guitar, you might need to change inside the settings.
-
On the extracted widget folder, go to
settings
folder, and openInstrument.txt
with a text or code editor. -
Place what instrument you'll be playing
Warning This is case-sensitive.
Available instruments:
GUITAR
-GUITAR_COOP
-REAL_GUITAR
-RHYTHM
-BASS
-REAL_BASS
-DRUMS
-GH_DRUMS
-REALDRUMS
-KEYS
-REAL_KEYS
-VOCALS
-HARMONY
- You can put multiple instruments separated by a comma (example:
GUITAR,GUITAR_COOP,RHYTHM,BASS,KEYS
) so you don't have to change mid-screen in case a chart doesn't have specified instrument. - The order you put the instruments will matter, as the widget will fetch the first instrument with chart available.
- In case you want to change the instrument mid-stream, just change the
Instrument.txt
and clickRefresh
on the Browser Source in OBS. (you can use Streamer.bot + StreamDeck to write the file + refresh the browser source)
-
On the extracted widget folder, go to
settings
folder, and openTextAligment.txt
with a text or code editor. -
Place the alignment value and save.
Available alignment values: (not case-sensitive)
left
(default) - Shows album art and text left-to-right
right
- Shows album art and text right-to-left
center
- Shows album art and text left-to-right, but widget will be centered on canvas
-
Go to https://www.last.fm/api/account/create (you'll need to create an Last.fm account if you don't have)
-
You'll need to provide an
Application Name
, feel free to chose whatever name. (the other fields aren't required) -
Copy your API key, you'll need it later.
-
On the extracted widget folder, go to
settings
folder, and openLastFmAPIKey.txt
with a text or code editor. -
Paste your API key, and save.
Warning Still a bit experimental.
-
On OBS Studio, get the name for the scene used when playing songs. (You can right click the scene, click
Rename
and copy to clipboard) -
Paste on the
PlayingOBSSceneName.txt
text file. -
Right-click on the YAWO4YARG browser source, and go to
Properties
. -
Scrolling to the bottom of the properties, set the
Page permissions
toAdvanced access to OBS
. (Needed to widget to change the current OBS Scene) -
Refresh the browser source.
NotPlayingOBSSceneName.txt
- Change OBS Scene to Not Playing/Song Select Scene when song is not being played.
Follow the same steps on PlayingOBSSceneName.txt
- Change OBS Scene to Playing Scene when song is playing., except now it's for the Not Playing/Song Select Scene.