HN Explorer

Show HN: I made Vinlo – Spinning artwork video for your music (vinlo.co)

59 points by wayoverthecloud ↗ HN
Hi HN, I'm excited to share a new app I've been working on which helps you share music on Instagram and anywhere that allows video posting. It's called Vinlo and it takes an MP3 and an image file and creates a new video with a rotating visual of your artwork. I hope you find this useful and I'm very much looking forward to any feedback you may have. Good luck with your music!

The tech stack is Next.js and Node.js.

35 comments

[ 2.0 ms ] story [ 84.5 ms ] thread
kanapala
Can’t upload mp3 from iOS for some reason. Stays gray in file upload modal. Name is 1.mp3
wayoverthecloud
Hi, sorry the server was down, now it's back up! You should be able to upload now.
[deleted]
(comment deleted)
cenan
I like the idea, good luck! But I uploaded a very short sound effect (2s) instead of music, hoping it would complete faster but 15 minutes later and still waiting... A cancel button would also be nice. How do you render the video on the server? Do you open selenium and take screenshots of each frame and then stitch them together using ffmpeg?
wayoverthecloud
Hi, sorry, looks like the server was down because it couldn't handle the load. I am currently running a "poor man's setup", everything is on EC2 instance. I am not so big on DevOps side of things, so I have an API that does all the FFmpeg processing and the frontend calls that API. I am looking for a better way to do things and been considering Lambda functions too. I would love to hear if you have any tips on handling a long processing job like this.
jaflo
I've worked on something similar for a project of mine and used AWS Lambda which has been nice because it scales well and didn't cost me money while it wasn't running. The limit is 15 minutes which should be fine for something like this.

As others mentioned, I would go with a client-side approach if it works for you though.

latexr
There’s enough space to add some sound bars to the video to make it even clearer it has sound. They don’t need to be accurate, just moving.

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.

0x62
An alternative for the background which might be slightly easier would be to use the same image as the vinyl, but apply a blur and scale up.

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

sam1r
You really **should* create a twitter, create +place its icon next to instagrams -- and then.. create 30-s spinning record samples of your favorite artists and tweet at them with your digital art.

* if it were me with an awesome project as such

wayoverthecloud
That sounds like a really good idea! Also thanks for calling the project "awesome" :)
devtailz
Nice! Love seeing new ways to share music on IG without having to be a professional video editor.

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.

wayoverthecloud
Kaizen looks so cool, I am jealous! When you say "Moved the video rendering onto the client" do you mean you are doing FFMPeg on the client side?
devtailz
Been through a few iterations now...

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...).

[deleted]
(comment deleted)
RespectYourself
A simple application that serves a purpose and addresses something people want to do. So... nice job.

I wish people wouldn't abuse video sites and services to post audio-only content, though. That's what SoundCloud is for.

akouri
agree, it seems inefficient. I have friends that use YouTube as their main music subscription platform though. With YouTube premium I think you can close out of the app and still have it play music. I would hope that YouTube is smart enough to not buffer video when you're out of the app for long enough.
Solvency
Why not an animated waveform?
swyx
I think the industry term is audiogram
panqueca
The idea is cool, but the site it's a bit buggy. Sometimes it didn't show the button to create the video. Anyway I really liked the idea. I just would like to have an option to create a video from the entire song and also an api. (I have more than 10.000 vinyls songs stored. So it would take really long if I would create a video for each one manually)
wayoverthecloud
Sorry, the site got lots of requests today so I have been updating my EC2 instances but it gets loaded everytime. I think an API is certainly doable, can I reach out to you once I have it? (Might take me a week or two).
DJMolehill
Very cool project! I gave it a shot using an MP3 and PNG file, but unfortunately, it didn't work as expected. The download page offered a 0-byte MP4 file. Nonetheless, I am still excited about its potential. I am happy to share the files if there's somewhere I can file a bug report.

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

majkinetor
Does anybody know something similar, generating artwork video from audio, not necessarily like this, that can be done using CLI or desktop tool ?
jedisct1
Cool idea, I could definitely use this. However, it seems to be very slow.

Couldn't it be done directly in the web browser using WebAssembly?

Not fan of the big Vinlo watermark either.

browningstreet
This could be good for audio podcasts uploaded as videos to Youtube. I was using things like Headliner.app and moving backgrounds in Camtasia for visual interest. But also seconding the need for audiograms.
wayoverthecloud
Wow, I am seeing so many cool ideas. Thanks for yet another awesome idea. Would you be interested in this if there was an audiogram and with better podcast options? I have got a whole lotta ideas from this thread, so I am definitively going to make this more flexible!