cadon0 / gif-to-the-beat Goto Github PK

View Code? Open in Web Editor NEW

32.0 2.0 3.0 3.9 MB

Syncs GIF animation speed with music

License: MIT License

HTML 2.52% JavaScript 96.48% CSS 0.58% Batchfile 0.42%

gif-to-the-beat's Introduction

gif-to-the-beat

Listens to stats on what's playing in osu! and syncs a gif to the beat. Video demonstration

Designed such that it can be used as a "plugin" for OBS

This will not work with osu!lazer and has only been tested on Windows

A thank you to Piotrekol for providing software which can extract information from osu!, such as ProcessMemoryDataFinder. For other osu! stream overlays you may be interested in their StreamCompanion project

Requirements
Settings
How to use
- Short version
- Long version
Multiple gifs?
Help! It doesn't work
It's out of sync!
How do I add a different gif?
Missing features
License

Requirements:

Node.js must be installed. Latest LTS recommended.

Settings

Configuration or settings are mentioned a few times throughout the instructions. They can usually be found in the config.js file in the server folder

If in doubt it can always be opened and edited with Nodepad

How to use:

Short version:

Download the latest .zip file. Extract it anywhere
Open the folder and double-click start.bat
- You will be asked to enter the osu! "Songs" folder if running for the first time
Add a "Browser" source in OBS with URL http://localhost:727/catjam and width/height 112
- Open the URL in a web browser to check that it's syncing correctly as the OBS preview is delayed

IMPORTANT: The gif may not display next time if OBS is opened before/without running start.bat first. Please open the settings for the source in OBS once it is running, and click "Refresh cache of the current page"

Long version:

Download:
- The latest release or source code
- A GifToTheBeatDataProvider.exe file
Place GifToTheBeatDataProvider.exe into the main folder like so:
Run start.bat
- An alternative is to run the commands npm ci (first time only) and npm start from the root directory of this project
Provide the osu! "Songs" folder location if this is the first time
- The songs folder location is saved in song-directory.txt. If there was a mistake this file can be edited or deleted
Add a "Browser" source in OBS and enter the URL e.g. http://localhost:727/catjam
- this URL can also be opened in a browser, useful if you need to fiddle with offset values
- the port number is a setting that can be changed

Multiple gifs?

More sources can be added to OBS for more gifs by adding their names (this is the gifName in their settings) to the end of the URL e.g. the two samples would be http://localhost:727/catjam and http://localhost:727/pikachu

Help! It doesn't work

Please check the common issues below, or open an issue

The .exe file may need to be updated, check the downloads page. The main symptom is strange characters in an error like this.
The application to execute does not exist: 'C:\Users<name>\AppData\Local\Temp.net\GifToTheBeatDataProvider\xvqwwjrg.y50\GifToTheBeatDataProvider.dll'.`

Please delete this folder it mentions and try again: C:\Users\<name>\AppData\Local\Temp.net\GifToTheBeatDataProvider

It's out of sync!

In the osu! editor? The disableSyncInEditor setting can be changed to false

In the configuration file there are offset values for each gif. Increase the offset if the gif appears to hit the beat after the song does, otherwise decrease

Each change to settings requires a restart

It's recommended to view the gif from a browser while tuning as the OBS preview is delayed. Note that the browser does not need to be refreshed

How do I add a different gif?

WARNING: If a gif has an uneven cycle time for each "beat" it will likely get out of sync with the music. For example, certain frames of the CatJam gif had to be removed. You can edit the frames of a gif here (upload then select the "frames" button)

Take your gif and generate a sprite sheet
- check the "Stack horizontally" box, the sprites should be in a single line from left to right
Place the sprite sheet in the images folder or upload it somewhere
In config.js there are settings for each gif. Copy or replace one, and be sure to enclose sections with { & }, and separate by ,. The settings are:
- gifName - this will be matched with the URL e.g. the settings with gifName "pikachu" are used at http://localhost:727/pikachu
- width
- height
- spritesheetWidth
- spritesheetLocation
- gifOffset - if the gif is slightly out of sync with osu! in general or does not start on the "beat" this is how you get it to sync
  - rearranging the frames of the gif so it starts on-beat can make this easier (again upload here, click "frames", then rearrange)
- originalBpm
  - you can tap along to each "beat" of the gif at this website or in the osu! editor (timing tab, mute the music and tap with T)
  - if the gif length (seconds) is already known this can be calculated by 60 * beatsInGif / seconds = originalBpm. e.g. CatJam has 13 "beats", 60 * 13 / 5.72 = 136.363...
- seconds
  - if the originalBpm is already known 60 * beatsInGif / originalBpm = seconds. e.g. CatJam has 13 "beats", 60 * 13 / 136.363... = 5.72
  - a stopwatch is okay. Let the gif cycle fully a number of times and take the average
  - the accurate but highly painful method: the gif can be converted into .mp4 and then played in VLC media player with an extension. Use pattern [E] for the extension. It's a bit weird - 3400 milliseconds will be displayed as 03,400
Add or edit your browser source in OBS, the end of the link should match the gifName. Refresh the cache if the image or settings don't update in OBS

Missing features:

Assisted offset tuning
Only requiring a gif instead of a manual sprite sheet conversion
A simpler way to calculate the exact length of a gif
Electron GUI for automatic updates, adding/configuring gifs, etc.

License

MIT

gif-to-the-beat's People

Contributors

Stargazers

Watchers

Forkers

catsvilles 420noscopeosu witchoffrost

gif-to-the-beat's Issues

not working

Starting osu! memory reader...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
Disconnected from feed of osu! data, reconnecting...
The application to execute does not exist: 'C:\Users<name>\AppData\Local\Temp.net\GifToTheBeatDataProvider\xvqwwjrg.y50\GifToTheBeatDataProvider.dll'.

Error running osu! memory reader:
Error: Command failed: C:\Users\nilsk\Desktop\Stream\Osu\gif-to-the-beat+v1.0.0\GifToTheBeatDataProvider.exe 7270
The application to execute does not exist: 'C:\Users<name>\AppData\Local\Temp.net\GifToTheBeatDataProvider\xvqwwjrg.y50\GifToTheBeatDataProvider.dll'.

at ChildProcess.exithandler (child_process.js:308:12)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1048:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) {

killed: false,
code: 2147516570,
signal: null,
cmd: 'C:\Users\\Desktop\Stream\Osu\gif-to-the-beat+v1.0.0\GifToTheBeatDataProvider.exe 7270'
}

this is the Error message...it worked fine a few weeks ago but now its not working...

new image link?

i got everything to work, except im trying to get a new gif instead of catjam. the instructions say to upload the spritesheet and put the link, which I did, but catjam still shows up. i went into server > config, and edited the notepad, added my new gif, changed the name and location of the file to match mine, but it still shows up at catjam. how do I change the gif?

Something does not get installed

husky > Setting up git hooks
fatal: not a git repository (or any of the parent directories): .git
husky > Failed to install

cant even get an error code to show

whenever i try to run start.bat or run it through powershell, im getting no error codes but the command prompt closes instantly.
i tried the solutions in #10 but had no luck, this is likely something simple that i just dont know how to go about fixing it

Easier way to find temp.net?

I keep having the same "temp.net" problem, and I fixed it once, but it came back. is there a quick way to find the file? I cant seem o find it in AppData, so I am opening file explorer and searching "gif=to-the-beat", and it takes about 10 whole minutes for the results to even appear, which is a huge pain. so I was wondering if there was an easier way to find and delete the file?

Can't add custom gif

So, for a while now, i've been trying to add a custom gif, but I just can't get it to work

î thats the gif btw

it doesnt work when osu game is running

The cat gif works before i launch osu. As soon as I launch the game, the start.bat window just closes and if I go to refresh the localhost page, it'll say the site can't be reached. I assumed it is because start.bat window isn't running anymore. I can have catjam gif work in obs as long as I don't refresh localhost page while having osu running but it will just not sync with the beatmap at all, the gif is running at a stable pace. Also one thing I manage to catch while launching start.bat is that it says:

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

which I have no clue how to do this. the gif used to work just fine and changes speed pretty much immediately as soon as I change the beatmap in game but now it just doesn't.
Thanks.

Crashes when osu! starts up with theme music

This is likely because some osu! startup songs, e.g. the current "beachballs!" theme for the summer season don't actually have equivalent folders within the Songs folder.

Adding a .catch((err) => console.log(err); ) to the end of the getTimingPoints(osuFile).then((timingPoints) => {...}) call in listenerWebSocket.js fixed it for me but I'm no JS developer so there is likely a better solution.

not working anymore

hey, I've been using the software and it's been working and looking great, but now it's not working. everytime I run the program, it says somethings outdated and to run "npx browserslist@latest --update-db", and repeatedly shows a block of text (picture below) . I input the command into shell (opened as administrator), but it doesn't fix anything, and says "npx: installed 6 in 2.963s
Cannot find package.json. Is this the right directory to run npx browserslist --update-db in?"

not working

Everytime i start the start.bat thing it just closes without asking me to enter the osu Songs folder. What do i have to do?

Not detecting Songs folder

Hey,

since a few days I get this when I start the program. (See image)

Any solution?

not working again

Hey, (I'm not sure why i keep having problems, so sorry about that lol) there is an issue whenever I open the "start" in the folder. the image below constantly repeats, is there a fix to this? thank you!

Blank Webpage

Gives blank webpage when loaded on chrome

html displayed:


<!DOCTYPE html>
<!-- saved from url=(0027)http://localhost:727/catjam -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gif to the beat</title>
    <link rel="icon" href="data:,">
    <link rel="stylesheet" href="./gif to the beat_files/styles.css" type="text/css">
  </head>
  <body>
    <script type="module" src="./gif to the beat_files/app.bundle.js.download"></script>
    <div id="app"><div style="width: 112px; height: 112px; background: url(&quot;./catjam-spritesheet.png&quot;) left center; animation: 4.72727s steps(143) 0s infinite normal none running catjam;"></div></div>
  

</body></html>

Sync without osu?

This is not an issue, I just dont know how to contact you. Sorry!

Do you think it is possible to use your tool, and remake it to use some API which can read a song bpm, and then use that as a source to change the gif speed?

It would be neat nothing like it exists

Failed to load hostfxr.dll, can't get it working

I had to manually download hostfxr.dll and place it in the requested folder in AppData\Local\Temp.net\GifToTheBeatDataProvider\txhwhbkd.y1g, but now it's telling me it can't load it. I maybe need to install something else but I've tried installing basically every version and package of .NET 5.0 and nothing seems to work.

Thanks in advance :)

Upon opening "Disconnected from feed of osu! data, reconnecting..."

Please bare with me, I am slow.

It used to work for me without a problem and I dont know what I did or how I did it but it refuses to work even after reinstall.

running as admin provides this

Regular startup

the main text upon open(not admin)

A gif does play from the localhost but stays at the constant default BPM

weird error?

get this repeatedly in the cmd prompt window

'C:\Users\weiji\AppData\Local\osu!\Songs\123593 Rostik - Liquid (Paul Rosenthal Remix)\ㆨο丌ο'
(node:5600) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 97)
(node:5600) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open

it doesn't work.

when i open "start.bat" it close almost immediately.
all I can see are messages saying "error"

Can't launch correctly

The .bat is launching, loading everything and I don't understand why it doesn't tell me the osu songs folder in it and closes
I'm kinda lost because I followed steps for the .exe correctly I think and I've still nothing....

Program no longer works?

Hi! I don't really know how to make a proper GitHub issue, but when trying to use the program, these just get spammed in the console it opens up:
(node:22036) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:23824) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'C:\Users\MYUSERNAME\Appdata\Local\osu!\Songs\143397 Natsume Chiaki - Hanairo Biyori\[bold:0,size:20]なつめ千秋花色日和'
The gif never gets synced up to the music. Is this a problem on my end or does this need fixing on the developer end?

localhost wont work, i dont get any errors and the page is just white, ive triple checked the link

Issue starting osu memory reader

Error Message:
Error:
An assembly specified in the application dependencies manifest (GifToTheBeatDataProvider.deps.json) was not found:
package: 'runtimepack.Microsoft.NETCore.App.Runtime.win-x86', version: '3.1.1'
path: 'System.Diagnostics.Tools.dll'

Error running osu! memory reader:
Error: Command failed: C:\Users\username\OneDrive\Desktop\gif-to-the-beat+v1.0.01\GifToTheBeatDataProvider.exe 7270
Error:
An assembly specified in the application dependencies manifest (GifToTheBeatDataProvider.deps.json) was not found:
package: 'runtimepack.Microsoft.NETCore.App.Runtime.win-x86', version: '3.1.1'
path: 'System.Diagnostics.Tools.dll'

Not sure whats goin on plz halp

I have to run the program as admin but it's not working like that.

Somehow when I don't open osu! as admin it only refreshes maps all the time, it's broken and I cannot play, because of this i have to open osu! as admin and so i have to open streamlabs as admin, have to open streamcompanion as admin, or else these wouldn't work.

Now i also have to open the start.bat as admin, which unfortunately isn't working. Is there anything I can do or will I never be able to use the program correctly? Because when i open it normally, not as admin the cat is jamming, but it is not jamming to the beat :/

When i open as admin, there are some red errors for a quick moment before the program just shuts itself down.

Thanks and greetings!

Gif stays at a constant bpm and doesn't change to the song

So when I open it up, it gives me a brief message saying:
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

The problem is that right after this message, the batch file begins to loop, giving me no time to input the command.
With this, the file stays in an infinite loop and effectively produces a gif for obs as it doesn't change its speed

Here is the infinite string of messages that I get:
Starting osu! memory reader...
Error:
An assembly specified in the application dependencies manifest (GifToTheBeatDataProvider.deps.json) was not found:
package: 'runtimepack.Microsoft.NETCore.App.Runtime.win-x86', version: '3.1.1'
path: 'System.Diagnostics.StackTrace.dll'

Error running osu! memory reader:
Error: Command failed: C:\Users\Ty\Desktop\gif-to-the-beat-1.0.0\GifToTheBeatDataProvider.exe 7270
Error:
An assembly specified in the application dependencies manifest (GifToTheBeatDataProvider.deps.json) was not found:
package: 'runtimepack.Microsoft.NETCore.App.Runtime.win-x86', version: '3.1.1'
path: 'System.Diagnostics.StackTrace.dll'

at ChildProcess.exithandler (child_process.js:303:12)
at ChildProcess.emit (events.js:315:20)
at maybeClose (internal/child_process.js:1021:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) {

killed: false,
code: 2147516556,
signal: null,
cmd: 'C:\Users\Ty\Desktop\gif-to-the-beat-1.0.0\GifToTheBeatDataProvider.exe 7270'
}

It's just not starting.

I've downloaded a zip file, extracted it into a folder on my desktop, double-clicked "start.bat" and it opened a cmd for a 1 frame and closed it. I tried to run it as administrator, it doesn't help. :(

Desktop.2021.01.17.-.05.21.24.03.mp4

It doesn't open start.bat

just like in title

Gif not appearing on the website

I'm using the catjam spritesheet you provided and everything should be in the right place
When the website starts it's just a white screen

german letter ü in username

Hi,

I ran into a problem with my username while entering the file path into node.
My username contains the german letter ü and i dont know how to enter that into node.
I tried ue because thats how its usually abreviated but it couldnt find the files then.

error:0308010C: Digital Evnelope Routines::unsupported

Currently having an issue where it crashes after starting up for a second and it gives me this.
(starting with start cmd /k start.bat)

I've gone through different node versions with no avail

can't get it to work?

this is what happens when i run as admin

and this is without

either way, nothing shows up in obs. what's wrong?

npm won't connect to Nuget to download "wildcard" package

npm ERR! code E401
npm ERR! 401 Unauthorized - GET https://nuget.lic.co.nz/npm/NPM/wildcard/-/wildcard-2.0.0.tgz

2024-03-14T17_49_52_105Z-debug-0.log

ENOENT error

This error seems to have occurred previously at #36 ; here's what mine says:

Connected to feed of osu! data. Data will be logged occasionally to show it's active
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[Error: ENOENT: no such file or directory, open 'C:\Θä£╠úΘìÇ╠ú'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Θä£╠úΘìÇ╠ú'
}

If you need any other info for debugging, let me know!

^localhost:727

^streamlabs setting for the gif