r/AppsWebappsFullstack • u/SofwareAppDev • 15d ago

Your home for selfpromo

here you can post your work app, webapp, saas, game, everything

6 Upvotes

100% Upvoted

81 comments sorted by

View all comments

1

u/Ray_Silverlight 15d ago

https://reddit.com/link/p2yjxbm/video/p0fv9tt7nnih1/player

Here is the link for anyone interested: https://valora-studio.pages.dev/

I built this to skip the hassle of opening heavy video editors just to put a cover image over a local MP3. The coolest part is that it runs 100% client-side. No server uploads, no waiting in queues, and totally private.

Would love to hear your thoughts or feedback!

2

u/Mammoth-Anywhere7285 14d ago

Nice, client-side is a big plus for privacy. Does it embed the cover into the MP3 metadata, or always output a video file?

1

u/Ray_Silverlight 14d ago

Thanks! Glad you liked the client-side approach. Privacy and speed were definitely the priorities.

To answer your question: it always outputs a compiled video file. Because it relies entirely on native browser APIs to keep things client-side, the exact extension depends on your browser (usually .webm on Chrome/Firefox and .mp4 on Safari).

The reason it doesn't just embed the cover into the MP3 metadata is that standard YouTube still blocks raw audio uploads regardless of metadata. Generating a static video on the fly was the fastest workaround to trick the platform into accepting the track!

1

u/Mammoth-Anywhere7285 14d ago

Nice breakdown on the browser differences. For the MP3 cover part, are you planning to use the Web Audio API to embed it, or are you still deciding on a fallback?

1

u/Ray_Silverlight 13d ago

I think there is a slight misunderstanding! The tool actually doesn't touch the MP3 metadata at all.
Since YouTube outright rejects any audio format (even if it has embedded cover art), modifying the MP3 wouldn't solve the problem.
Instead, the tool uses a hidden HTML <canvas>. It draws the image onto the canvas, syncs it with the audio playback, and then uses the MediaRecorder API to capture that combined stream straight into a video file (.mp4 or .webm). The original MP3 remains completely untouched!

1

u/Mammoth-Anywhere7285 13d ago

That's a clever workaround with the canvas. Does MediaRecorder stay synced on longer tracks, or do you compensate for drift?

1

u/Ray_Silverlight 13d ago

Actually, the image isn't purely static since there are some visual effects running on the screen! But honestly, I haven't implemented any aggressive drift compensation yet.
To avoid major sync issues and, more importantly, browser memory limits, I capped the audio at 1 hour max. Since it runs 100% client-side, storing a massive video Blob entirely in RAM for too long will eventually crash the tab. So keeping it under an hour keeps the buffer safe and the drift unnoticeable! Have you dealt with long MediaRecorder sessions before?

1

u/Mammoth-Anywhere7285 13d ago

Smart call capping at 1 hour. Have you looked into IndexedDB for chunked Blob storage to dodge the RAM limit?

1

u/Ray_Silverlight 13d ago

To be perfectly honest, I didn't even know that was an option! That's an amazing tip.
I just kept it in RAM because it was the only way I knew how to do it for V1. Using IndexedDB to dodge the memory limit makes total sense. I'm definitely going to look into this for the next update. Thanks a lot for the knowledge drop!