Crunchyroll Audio Helper Extension
- 11 Devlogs
- 16 Total hours
A simple project that allows you to add an offset to the sometimes messed up audio on the Crunchyroll streaming service.
A simple project that allows you to add an offset to the sometimes messed up audio on the Crunchyroll streaming service.
It’s freaking instant now haha! Applying an offset will reload the player.
-
Had to do some bs trickery to get Shaka to do my bidding though. Reference: code report on Shaka generated by deepseek-v3-flash, which managed to catch a very specific pattern in the engine.
-
The engine, upon seeking, will check its copies of DOM’s SourceBuffer for its loaded range. By hijacking that value, one can make Shaka reload the buffer entirely, with the new offset applied.
-
That’s the gist of it. I pray that Crunchy doesn’t update Shaka anytime soon or I will cry…
Contrary to the last devlog, I was not, in fact, that close.
-
Anyways I actually did it now. It turned out to be slightly easier than I thought since I could just access the native SourceBuffer directly.
-
Still has an issue of needing the buffers to run out before the offset is actually applied, unfortunately
js got rated limited by crunchy while trying to fix compat with the croptix extension.
-
for context croptix’s latest recode to v2 switched the default media engine from bitmovin to shaka, which broke this extension (and dropped my user count by 20). the author of croptix isn’t responding to my PR to switch back to bitmovin so i guess i just gotta add shaka support.
-
unfortunately that is not going so well……….. AHHHHHHHHHHHHHH i was so close too
-
I really need a better workflow… it’s annoying to switch between Webstorm, then extension refresh tab, then Crunchyroll every time I make a change :
-
Anyways, since crunchy wants to update their player for no reason, the extension… BROKE. So, I decided to stop hardcoding the obfuscated variables and instead search for them like I do with the modules.
-
Now, this relies on the unobfuscated names being stable/consistent. If that breaks, I will cry.
-
Also I literally could not find a interesting thing to take a screenshot of. The workflow is actually so boring…
Did some cleanup on the code to make it look like I know what I am doing 😆. Not much to show so I’ll just do a screenshot of the tampermonkey script header?
Alrighty! The audio offset application is actually instant now! Unfortunately, I had to enlist some help from Claude to get the CMAF media data parsing/editing to get it to work :. But, it works like a charm now. Yay. Essentially, now the extension stores the buffered audio, and when offset changes, directly edits the time offset value in the cloned raw audio data (which is in the CMAF format), clears the old buffer, and then adds our cloned version. This also means I have to rewrite the README and re-record the DEMO 🫠. (also, the Jetbrains README editor is lowk goated)
Made the icon and added some build scripts to automatically export as PNG from the source photoshop file (which I made with Photopea). Took a minute to refine it. It looks a bit weird zoomed out and being so pixelated, but you can tell it’s my extension at least
Well, I got the extension loaded as a userscript in Tampermonkey. But I can’t seem to figure out why it wouldn’t auto install my script from the Github raw user content page
Ok. Dug into Crunchyroll’s code a bit more and maybe found a way to apply the offset faster instead of waiting for the previous buffers to run out. The video doesn’t really make it clear (recording freezes because DRM protection), but the audio updated when the timeline jumped. The delay was about a few seconds. Gonna go test tis on Chrome now 🙏.
Managed to style this thing. Actually works pretty well! I wanted to get rid of those ugly up/down arrows, but it’s really annoying to get rid of for some reason… Whatever. Probably will upload this both as an extension and as a Tampermonkey user script.
First devlog! In the past 4 hours or so (poking the website doesn’t count towards Hackatime unfortunately), I managed to monkey patch Crunchyroll’s web packed audio buffering code. After that, I figured out how to force the video player to error out so that it reloads itself. So, the main functionality of the helper extension is done (I think)! Other than that, I managed to inject a little button into the video player :). Credits to Google Material Icons. Gonna go make this button work now… yay.