[HN Gopher] Show HN: I made Vinlo - Spinning artwork video for y...
       ___________________________________________________________________
        
       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.
        
       Author : wayoverthecloud
       Score  : 37 points
       Date   : 2024-03-11 18:47 UTC (4 hours ago)
        
 (HTM) web link (vinlo.co)
 (TXT) w3m dump (vinlo.co)
        
       | tunnuz wrote:
       | Props! Good luck with the app!
        
         | wayoverthecloud wrote:
         | Thank you!
        
       | kanapala wrote:
       | Can't upload mp3 from iOS for some reason. Stays gray in file
       | upload modal. Name is 1.mp3
        
         | wayoverthecloud wrote:
         | Hi, sorry the server was down, now it's back up! You should be
         | able to upload now.
        
       | cenan wrote:
       | 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 wrote:
         | 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.
        
       | latexr wrote:
       | 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 wrote:
         | These are awesome feedback, thanks!
        
       | sam1r wrote:
       | 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 wrote:
         | That sounds like a really good idea! Also thanks for calling
         | the project "awesome" :)
        
       | devtailz wrote:
       | 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 wrote:
         | 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 wrote:
           | 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...).
        
       | Solvency wrote:
       | Why not an animated waveform?
        
       ___________________________________________________________________
       (page generated 2024-03-11 23:00 UTC)