Please sign in to access this page
a web app made to help easily sync a music track to a gif or a slideshow
Ali Khan
Check their project out: Mermaid Translator
Emma
Check their project out: Blueprint Framework
CT02
Check their projects out: TS;DR, My minimalist portfolio, Secura Authenticator
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
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!
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 ↓
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.
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.
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.