The tech stack is Next.js and Node.js.
As others mentioned, I would go with a client-side approach if it works for you though.
Also, I haven’t tested but it seems like uploading an image might be required? If so, consider reading the metadata from the file and extracting the artwork, if there is any.
Finally, instead of a fixed colour background you could try making it the whole image, then have a “cutout” in the middle which spins. Might even be able to add some white overlays so it looks more like a vinyl.
Other ideas for branding:
- Use the image to generate a colour palette to ensure text content has good contrast on light/dark images and is on-brand
- Allow users to add links to the track on Spotify, YouTube, Apple Music etc and generate a short random link (e.g vinlo.co/VUSNF) to use instead of the vinlo.co mark. You can use this to a) provide track links for end users, b) provide analytics to creators, and c) understand which creators are driving traffic
I'm working on a similar tool https://kaizen.place/reel-generator . Moved the video rendering onto the client which helps keep rendering times quick and avoids the headache of managing an extra service.
+1 to the suggestion I saw for some kind of sound visual to make it even more clear there's audio.
Started with just recording the canvas using MediaRecorder (https://devtails.xyz/@adam/how-to-record-html-canvas-using-m...). This was super simple and I wish could have left it at that...But unfortunately Chrome gives you a webm file back and IG doesn't let you upload webm.
So then I went the route of ffmpeg.wasm in the browser to convert the webm to mp4.
I've finally landed on an approach that uses the WebCodecs API and mp4-muxer library (https://devtails.xyz/adam/how-to-save-html-canvas-to-mp4-usi...).
* if it were me with an awesome project as such
I wish people wouldn't abuse video sites and services to post audio-only content, though. That's what SoundCloud is for.
On a related note, I recently developed a similar tool involving 3D cubes. You can check it out at https://www.youtube.com/watch?v=5Mq8q8oD-Yw
Anyone remembers this one?
Couldn't it be done directly in the web browser using WebAssembly?
Not fan of the big Vinlo watermark either.
