
Klippr
Create a music video from a Beatport or Traxsource track URL
After 2 years and 2,200 videos I decided it's finally time for Klippr to become a fully-fledged web-app. As you can imagine, I have a fairly extensive list of extra features I've thought of over the last 2 years.
I'll be turning Klippr into a structured web application with user accounts, more video features, supporting more providers and allowing custom uploads. It will still all be free to begin with, as I figure out what value my users are getting out of Klippr.
Currently deciding whether to build it out as a Node/Express app, run the whole thing on Firebase (they have all the moving parts required - auth, database, functions, hosting) or whether I should go back to the old familiar Ruby on Rails.
- Videos created = 2,200+
- Beatport = 27%
- Traxsource = 73%
- Average video size = 2.8MB
- S3 bucket size = 6.4GB
- S3 storage cost = 5ยข per month
- Webtask cost = $0 (free plan)
- Mailgun emails cost = $0 (free plan)
Total monthly running cost = $0.05
1 Like
Comment
After 2 years of operating silently and (mostly) seamlessly, Klippr produced it's 2,000th video!
Like
Comment
I launched this quietly, almost privately, to a bunch of my music producer and record label friends. I assumed the Webtask function would crumble on first use or the videos would come out corrupted or the user would never receive the emails and be left wondering where their video was.
Fortunately none of these things happened. A handful of folks tried it and have used it regularly ever since!
Everything works well. It's not performant. It's not scalable as-is. It's nothing more than a single-feature web app but it solved my problem and a few other folks are benefitting from it too. ๐
Like
Comment
I built a single page site using Carrd.co with a 2-field form asking for the user's email address and the track URL.
The form sends both pieces to the Webtask function. The function grabs the asset URLs from the track URL, downloads them, runs the FFMPEG command and uploads the resulting video to AWS S3.
Then it sends an email to the user with a link to download the video. Easy peasy!
2 Likes
Comment
I looked at Serverless, Firebase Functions, Google Cloud Whatever, Digital Ocean Droplets and all the rest but finally decided to run this single, simple function on Webtask.io. It's a free service, within limits, and best of all for me - I could create and edit the code right in their web editor.
You get a simple URL to hit to run the function. I wrapped my function in a barebones Express app so I could easily respond to POST requests with the Beatport or Traxsource track URL as a parameter.
Like
Comment
Neither Beatport nor Traxsource have a public API but the assets I need exist on their web pages for each music track. I just had to write a function to load the page, grab the links to the assets, download those assets and feed them into FFMPEG.
Some of it was easy, some of it was XML (read, horribly difficult).
At first I wasn't caching any of these assets so multiple requests for videos of the same track required whole separate trips to the web page and runs of the FFMPEG command but I'm working on caching the assets so further requests for the same video are returned instantly. Besides, my hits to their pages through Klippr were tiny in comparison to their overall traffic so I wasn't concerned about that.
Next challenge was where to run this almighty function.
Like
Comment
Now I had my FFMPEG command that will turn an image and audio clip into a shareable MP4 video I wanted to enable others to use it.
I originally planned to build a web app that would allow visitors to upload their own image, or create one with built-in backgrounds and text-editing tools, and add their audio, possibly with some basic editing controls for length, fades, etc.
Dozens of tests and demos in CodePen later I decided this was too much for a first version. I thought about it laterally and realized tat these assets already exist on URLs on the web - in the individual track pages of music retail sites like Beatport and Traxsource.
Next job was to write code to grab these assets and feed them into my custom FFMPEG command.
Like
Comment
After wrestling with image editors, trimming audio clips and squishing the two together in a video editor I decided to try to create a single FFMPEG command that would do the whole process for me. After a lot of head-scratching and Stack Overflow'ing I finally had a long-ass FFMPEG command that would take in a PNG image and a WAV audio clip and spit out an MP4 video. Huzzah!
Like
Comment
As a music producer and record label owner I was always opening a bunch of image, audio and video editing tools to create simple 60-second videos to share on social media. I wanted something much simpler.
Like
Comment
About
As a music producer and record label owner I was always opening a bunch of image, audio and video editing tools to create simple 60-second videos to share on social media. I wanted something much simpler.

Comment