9 ms·

Show HN: I made Vinlo – Spinning artwork video for your music

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.

deleted 3y ago
[deleted]
tunnuz 3y ago
Props! Good luck with the app!
- wayoverthecloud 3y ago
  Thank you!
kanapala 3y ago
Can’t upload mp3 from iOS for some reason. Stays gray in file upload modal. Name is 1.mp3
- wayoverthecloud 3y ago
  Hi, sorry the server was down, now it's back up! You should be able to upload now.
cenan 3y ago
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 3y ago
  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.
  - internetter 3y ago
    You could do this entirely client side
  - jaflo 3y ago
    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 3y ago
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.
- wayoverthecloud 3y ago
  These are awesome feedback, thanks!
- 0x62 3y ago
  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 3y ago
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 3y ago
  That sounds like a really good idea! Also thanks for calling the project "awesome" :)
devtailz 3y ago
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 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 3y ago
  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 3y ago
    Been through a few iterations now... Started with just recording the canvas using MediaRecorder (https://devtails.xyz/@adam/how-to-record-html-canvas-using-mediarecorder-and-export-as-video 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-using-web-codecs-api https://devtails.xyz/adam/how-to-save-html-canvas-to-mp4-usi...).
- deleted 3y ago
  [deleted]
RespectYourself 3y ago
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 3y ago
  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 3y ago
Why not an animated waveform?
- swyx 3y ago
  I think the industry term is audiogram
lovegrenoble 3y ago
Different one, but in the same vein: https://ambicular.com https://ambicular.com
panqueca 3y ago
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 3y ago
  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 3y ago
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 https://www.youtube.com/watch?v=5Mq8q8oD-Yw
majkinetor 3y ago
Does anybody know something similar, generating artwork video from audio, not necessarily like this, that can be done using CLI or desktop tool ?
- Retr0id 3y ago
  Not the most ergonomic thing in the world, but ffmpeg is capable of it https://stackoverflow.com/a/67875700 https://stackoverflow.com/a/67875700
stunnAR 3y ago
This remind me so much of this: https://techcrunch.com/2013/03/18/rando/ https://techcrunch.com/2013/03/18/rando/ Anyone remembers this one?
sira04 3y ago
Reminds me of Turn https://www.turn.audio https://www.turn.audio
- HorizonXP 3y ago
  This seems more complete.
jedisct1 3y ago
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 3y ago
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 3y ago
  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!
henrun12 3y ago
Ever consider using: https://www.remotion.dev https://www.remotion.dev in your tech stack? Would let you do cool things like overlay audiograms etc

deleted 3y ago

[deleted]

tunnuz 3y ago

Props! Good luck with the app!

wayoverthecloud 3y ago
Thank you!

kanapala 3y ago

Can’t upload mp3 from iOS for some reason. Stays gray in file upload modal. Name is 1.mp3

wayoverthecloud 3y ago
Hi, sorry the server was down, now it's back up! You should be able to upload now.

cenan 3y ago

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 3y ago
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.
- internetter 3y ago
  You could do this entirely client side
- jaflo 3y ago
  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 3y ago

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.

wayoverthecloud 3y ago
These are awesome feedback, thanks!
0x62 3y ago
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 3y ago

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 3y ago
That sounds like a really good idea! Also thanks for calling the project "awesome" :)

devtailz 3y ago

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 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 3y ago
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 3y ago
  Been through a few iterations now... Started with just recording the canvas using MediaRecorder (https://devtails.xyz/@adam/how-to-record-html-canvas-using-mediarecorder-and-export-as-video 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-using-web-codecs-api https://devtails.xyz/adam/how-to-save-html-canvas-to-mp4-usi...).
deleted 3y ago
[deleted]

RespectYourself 3y ago

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 3y ago
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 3y ago

Why not an animated waveform?

swyx 3y ago
I think the industry term is audiogram

lovegrenoble 3y ago

Different one, but in the same vein: https://ambicular.com https://ambicular.com

panqueca 3y ago

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 3y ago
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 3y ago

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 https://www.youtube.com/watch?v=5Mq8q8oD-Yw

majkinetor 3y ago

Does anybody know something similar, generating artwork video from audio, not necessarily like this, that can be done using CLI or desktop tool ?

Retr0id 3y ago
Not the most ergonomic thing in the world, but ffmpeg is capable of it https://stackoverflow.com/a/67875700 https://stackoverflow.com/a/67875700

stunnAR 3y ago

This remind me so much of this: https://techcrunch.com/2013/03/18/rando/ https://techcrunch.com/2013/03/18/rando/ Anyone remembers this one?

sira04 3y ago

Reminds me of Turn https://www.turn.audio https://www.turn.audio

HorizonXP 3y ago
This seems more complete.

jedisct1 3y ago

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 3y ago

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 3y ago
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!

henrun12 3y ago

Ever consider using: https://www.remotion.dev https://www.remotion.dev in your tech stack? Would let you do cool things like overlay audiograms etc