↓  downbeat

↓ downbeat

19 devlogs
65h 52m
•  Ship certified
Created by deltea

a web app made to help easily sync a music track to a gif or a slideshow

Timeline

Earned sticker

DEVLOG #19!!!!!!!!!!!!!

auto speed multiplier slash time signature thingie is working!!!!! i do want to maybe in the future add some buttons that let you adjust the auto detected speed by increments of 2, so that you can change it if it guessed wrong. i added some pretty nice quality of life stuff, like a bpm picker (finally), a video codec selector (i don't like it), and also some french toast when you export (kinda looks ass). the only things left to do are bug fixing!!!!!! (yayyyyyyyyyyyyy) including these:
- fix certain gifs not exporting
- fix gif preview artifacts
- fix export cropping issues
- fix export quality bad
as you can see, most of these are just exporting bugs that i haven't been able to fix for a while, so fingers crossed i can fix them... there are also a few things i might do, but might not do, like: adding mobile support (nooo) and unfuqing the code, cuz it's lowkey kinda messed up rn. but yeah, maybe devlog 20 will be my last devlog!!!!!?
(also i haven't had that much time cuz of the funny bug game that released so yea)
(theres a bug in the video where some gifs just ARENT RENDERING PROPERLY FOR SOME FKN REASON)

DEVLOG #18!!!!!!
added a processing/export queue!!! since it's client side and very fast, it can export multiple videos in parallel!!! i redid the frame offset slider thingy again, since it was really weird and confusing. i figured out this really annoying bug, where certain gifs that have a low resolution straight up just can't export??? it probably has something to do with codecs, and encoding. i really don't want to deal with that, so i'll probably just work on the other things first, like adding a export progress bar (really easy), and also some kind of bpm editor (no idea where to put this). after those 2 things, downbeat will basically be done, except for lil animations and the bug fixes. yay.

DEVLOG #17!!!!!!!!!!!!!!!

LET'S GOOOOO i revamped export, and now it's client side, and like 10x faster!!!! i figured i could just do the mp4 creation myself, instead of relying on ffmpeg, and it's not even that hard! now a normal length song and gif takes around 30 seconds to export, which is not bad at all! especially since i can now add a progress bar to update the user. i think the next thing to add is some kind of processing queue (totally not cobalt) where you can export multiple videos at a time. i'm not sure about the performance of doing this, but it seems fine when i have 2 videos exporting at the same time. another i added this time is a quality radio group! it controls the bitrate, but for some reason it takes the same amount of time to export?????? idk. i'm still honestly kinda on the fence about this layout design, since i feel like it doesn't optimize the amount of space being used. also i still need to add a bpm edit thingie. but the main issue i wanted to fix is now done!!!!! yayyyyy1!!
(the exported is just temporarily stuck to the top left corner of the screen rn lol)

DEVLOG #16!!!!!!

got a lot done! most of the gif player issues fixed (more issues came up), got the speed multiplier and offset slider working, and also added some nice little tooltips that tell you what each option does. the drifting you see in the video is caused by the bpm being one off, so i want to fix that by allowing you to manually change the bpm if the guessed one is wrong. oh yeah i also added a restart preview button.

(also i think i may be running out of gifs)

DEVLOG #15!!!!!!!!!!

got the gif player wroking really well, and next step is to add offset and speed control (it's super late rn) i'm also wondering what other options i could add to the options window

DEVLOG #14!!!!!!

got a lot of the easy stuff done, like uploading music and gifs, and also some codes structuring stuff. i think the next thing i need to do is probably to make the gif player actually like work, and also I WANT TO REWRITE MY GIF PLAYER AHHHHHHH IT'S SO BAAADDDD I CAN'TTTT

DEVLOG #13!!!!!!!!!!!!!!!!!!!!!!!!

WE ARE SO BACK!!!
complete ui redesign, trying a new backend approach (cuz 5 mins to export is not okay), and overall good stuff!!!
started the redesign by eliminating the weird step process you go through, since i think it makes it more complicated and bloated. (also it makes the logic easier). i decided on this layout below because it looks cool with the diagram line thingies (they're just svg paths). right now it's just the layout, so i'll need to make them actually work, but it shouldn't be too bad since i already made them before!

Update attachment

Ship 2

1 payout of shell 157.0 shells

deltea

2 months ago

deltea Covers 3 devlogs and 6h 2m

devlog #12!!

this is a small devlog, but i added confetti!!! also made the progress bar on export page a spinny thing instead. (cuz no progress yet)

devlog #11!!!!!!
exporting videos server side in the demo works!!!
it's really really really slow but it works. the ffmpeg stuff is processed server-side on a render.com web service, which means it spins down after 5 mins of inactivity, which means it takes even longer to process :( i do want to add a progress bar to show how much longer it will take. feel free to comment if you have any ideas on how to do that! (oh yea i also want to add confetti when you export lol)

devlog #10!!!!!!

maybe last devlog?...
added a quick warning/danger tapes to export since it isn't done (persona style ofc).
i hope i can get export working soon!

Update attachment

Ship 1

1 payout of shell 588.0 shells

deltea

3 months ago

deltea Covers 9 devlogs and 33h 43m

devlog #9!!!!!

LETS GOOOOOOOO
ffmpeg is DONE. I FRICKIN HATE FFMPEG!! AHHHHHH!!!
ok anyways, gif + audio export is done, still having the issue with gif transparency, and some black splotches on the gif. but yeah, i added a few small changes here and there, and changed some styling around. next up: making speed settings and audio offset slider actually affect the exported video. (ʸᵃʸʸʸʸʸ)

oh also, i have no idea how i'm gonna deploy this, since vercel (serverless functions) doesn't really support writing to disk and whatnot, so fingers crossed i can find an alternative to host it.

here's spamton (for like the 3rd time) ↓

devlog #8!!

honestly nothing super interesting. rewrote more of the app flow so it's more flexible. a few styling changes here and there. oh also... THEMES!!!!!!
right now you can change themes by clicking the palette button, but i want to add some kind of popover.

below is the catpuccin theme ↓

Update attachment

devlog #7!! (structure update)

this is a big update! i completely remade the structure of the project, so it's easier to change data between components. i also added a mode switcher, that let's you switch between the slideshow mode and gif mode.

i found a bug where some gifs you upload have black spots when displayed in the preview?? i'll look into it. next up: exporting

devlog #6!

added a speed selector radio group, and also added an offset slider to change the frame offset (to better sync with the music). still wondering how i should display the label for the offset slider and the speed buttons.

i'm starting to think i should change the app to ONLY accept gifs, since it looks nicer anyway. i'm still super scared to touch ffmpeg so fingers crossed i guess.

devlog #5!!

beat syncing with gifs work now!! i added the fusion step that shows a canvas with a preview of what the video will look like. i still need to add some kind of slider to change the offset of the audio to match the beat, and also add some options for different time signatures.

this might be scope creep kicking in, but i think it would be cool if you could tap out your own rhythm, and have the app auto-snap the taps to the correct beat. this way, you could make your own unique rhythms instead of just on a bpm.

Emma Emma 3 months ago

OMG I LOVE THIS!! keep it up :3

devlog #4!

created the images screen where you can upload the images. i completely remade the code internally so that it uses a cleaner way of file uploading and extracting bpm. i'm definitely dreading using ffmpeg.wasm (which is the next step) soooo yeah. (i'm also wondering if i can make the boombox match the beats more accurate by adding some kind of offset???)

devlog #3!

finished the layout!! (finally). i got audio uploads working, as well as playing a preview of the uploaded file, along with a preview of the cover art. i also managed to guess the bpm of the uploaded track with the music-tempo package, and the little boombox vibin.

devlog #2!

moved some components around and added a vertical nav bar and a progress bar.

Update attachment

devlog #1!!

i made a nice little logo for the app, and a simple video file picker to drop or select videos. i also added a preview image that extracts a frame of the video to preview the video.